gavin/maybe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 28 Wiki Activity

Refactor AI sidebar and chat layout with improved structure and comments

Browse Source 
- Remove inline AI chat from application layout
- Enhance AI sidebar with more semantic HTML structure
- Add descriptive comments to clarify different sections of chat view
- Improve flex layout and scrolling behavior in chat messages container
- Optimize message rendering with more explicit class names and structure
This commit is contained in:
Josh Pigford
2025-02-28 13:08:40 -05:00
parent 9c87deb508
commit 4b0ac4ec8b
2 changed files with 24 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/views/layouts/application.html.erb
View File

@@ -72,35 +72,6 @@
<%= 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" %>
<% if Current.user.show_ai_sidebar? %>
<div data-controller="ai-chat" class="my-4 flex flex-col h-full max-h-[calc(100vh-128px)]">
<div id="thinking" class="hidden"></div>
<div data-ai-chat-target="chatWindow" class="flex-1 overflow-y-auto overflow-x-hidden min-h-24 px-4 pb-8">
<%= render "layouts/shared/ai_greeting" %>
</div>
<div class="pt-2 border-t border-gray-100 dark:border-gray-800 max-w-full px-4">
<form data-action="ai-chat#sendMessage" class="relative">
<textarea
data-ai-chat-target="input"
data-action="keydown->ai-chat#handleKeyDown"
class="resize-none rounded-md w-full px-3 py-2 border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
placeholder="Ask about your finances..."
rows="1"
></textarea>
<button
type="submit"
class="absolute right-3 bottom-2 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
data-ai-chat-target="submitButton"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 transform rotate-90">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
</svg>
</button>
</form>
</div>
</div>
<% end %>
<% end %>
</div>
<% end %>

38
app/views/layouts/shared/_ai_sidebar.html.erb
View File

@@ -50,6 +50,7 @@
</div>
<div id="chat-messages" class="flex-grow overflow-y-auto px-4 py-3" data-controller="chat-scroll" data-chat-scroll-target="container">
<%# Chat List Menu (hidden by default) %>
<div data-chat-menu-target="content" class="hidden">
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
@@ -98,9 +99,11 @@
</div>
</div>
<div data-chat-menu-target="defaultContent" data-chat-scroll-target="messages">
<%# Default Content - Chat Messages or Initial Greeting %>
<div data-chat-menu-target="defaultContent" data-chat-scroll-target="messages" class="flex flex-col h-full">
<% if Current.user && @chat.present? %>
<div id="messages" data-turbo-cache="false">
<%# Existing Chat: Show messages or greeting if empty %>
<div id="messages" data-turbo-cache="false" class="flex-grow">
<% messages = @messages&.where(internal: [false, nil]) %>
<% if messages.any? %>
<% messages.each do |message| %>
@@ -111,27 +114,34 @@
<% end %>
</div>
<% else %>
<%= render "layouts/shared/ai_greeting", context: 'default' %>
<% end %>
</div>
<div id="thinking" class="hidden flex items-start gap-1 w-full">
<%= render "layouts/shared/ai_avatar" %>
<div class="p-4 max-w-[85%] flex items-center text-gray-800">
<div class="flex gap-1">
<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
<%# New Chat: Show greeting in the top section %>
<div class="flex-grow">
<%= render "layouts/shared/ai_greeting", context: 'default' %>
</div>
<% end %>
<%# Thinking indicator %>
<div id="thinking" class="hidden flex items-start gap-1 w-full">
<%= render "layouts/shared/ai_avatar" %>
<div class="p-4 max-w-[85%] flex items-center text-gray-800">
<div class="flex gap-1">
<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
</div>
<span class="ml-2 text-gray-600">Thinking...</span>
</div>
<span class="ml-2 text-gray-600">Thinking...</span>
</div>
</div>
</div>
<%# Message Input Form Section %>
<div class="px-4 py-3 border-t border-gray-100">
<% if Current.user && @chat.present? %>
<%# For existing chats %>
<%= render "messages/form", chat: @chat, message: @message, scroll_behavior: true %>
<% else %>
<%# For new chats %>
<%= render "messages/form", scroll_behavior: true %>
<% end %>
<p class="text-xs text-gray-500 text-center mt-2">AI may make mistakes. Make sure to double check responses.</p>