diff --git a/app/assets/images/ai.svg b/app/assets/images/ai.svg new file mode 100644 index 00000000..ee2c6462 --- /dev/null +++ b/app/assets/images/ai.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/javascript/controllers/chat_menu_controller.js b/app/javascript/controllers/chat_menu_controller.js new file mode 100644 index 00000000..7ca1011d --- /dev/null +++ b/app/javascript/controllers/chat_menu_controller.js @@ -0,0 +1,32 @@ +import { Controller } from "@hotwired/stimulus"; + +/** + * A controller to toggle between chat list and chat content in the sidebar + */ +export default class extends Controller { + static targets = ["button", "content", "defaultContent", "menuIcon", "backIcon", "header", "listHeader"]; + + connect() { + this.isShowingChatList = false; + } + + toggle() { + this.isShowingChatList = !this.isShowingChatList; + + if (this.isShowingChatList) { + this.contentTarget.classList.remove("hidden"); + this.defaultContentTarget.classList.add("hidden"); + this.menuIconTarget.classList.add("hidden"); + this.backIconTarget.classList.remove("hidden"); + this.headerTarget.classList.add("hidden"); + this.listHeaderTarget.classList.remove("hidden"); + } else { + this.contentTarget.classList.add("hidden"); + this.defaultContentTarget.classList.remove("hidden"); + this.menuIconTarget.classList.remove("hidden"); + this.backIconTarget.classList.add("hidden"); + this.headerTarget.classList.remove("hidden"); + this.listHeaderTarget.classList.add("hidden"); + } + } +} \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 50eef742..e1755e1d 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -70,7 +70,7 @@ <% end %> <% end %> - <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300 border-l border-gray-200", right_sidebar_open ? "w-80" : "w-0"), data: { sidebar_target: "rightPanel" } do %> + <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300", right_sidebar_open ? "w-[375px]" : "w-0"), data: { sidebar_target: "rightPanel" } do %> <%= render "layouts/shared/ai_sidebar" %> <% end %> diff --git a/app/views/layouts/shared/_ai_avatar.html.erb b/app/views/layouts/shared/_ai_avatar.html.erb new file mode 100644 index 00000000..b6292834 --- /dev/null +++ b/app/views/layouts/shared/_ai_avatar.html.erb @@ -0,0 +1,3 @@ +
+ <%= image_tag "ai.svg", alt: "AI", class: "w-full h-full" %> +
\ No newline at end of file diff --git a/app/views/layouts/shared/_ai_sidebar.html.erb b/app/views/layouts/shared/_ai_sidebar.html.erb index ac55551d..53655e2d 100644 --- a/app/views/layouts/shared/_ai_sidebar.html.erb +++ b/app/views/layouts/shared/_ai_sidebar.html.erb @@ -1,101 +1,182 @@ -
+
<% if Current.user && @chat.present? %> <%= turbo_stream_from @chat %> <% end %> -
- - - <%= link_to chats_path, class: "py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" do %> - All chats +
+ <% if @chat.present? %> + <%= link_to root_path, class: "p-2 rounded-lg hover:bg-gray-100" do %> + <%= icon("arrow-left") %> + <% end %> + <% else %> + <% end %> -
- <% if Current.user && @chat.present? %> - <%= button_to chat_path(@chat), method: :delete, class: "p-2 rounded-lg hover:bg-gray-100", data: { turbo_confirm: "Are you sure you want to delete this chat?" } do %> - <%= icon("trash-2") %> +
+

Chat

+ + +
+ <% if Current.user && @chat.present? %> + <%= button_to chat_path(@chat), method: :delete, class: "p-2 rounded-lg hover:bg-gray-100", data: { turbo_confirm: "Are you sure you want to delete this chat?" } do %> + <%= icon("trash-2") %> + <% end %> <% end %> - <% end %> - + +
-
- <% if Current.user && @chat.present? %> -
- <% messages = @messages&.where(internal: [false, nil]) %> - <% if messages.any? %> - <% messages.each do |message| %> -
- <% unless message.user? %> -
- <%= icon("bot") %> -
+
+