Message styles

This commit is contained in:
Zach Gollwitzer
2025-03-25 07:52:38 -04:00
parent 0ac1c458fb
commit 573ec67af8
9 changed files with 42 additions and 33 deletions

View File

@@ -112,7 +112,13 @@
}
}
.prose--ai {
.prose--ai-chat {
@apply break-words max-w-[300px];
p {
@apply text-sm text-primary;
}
scrollbar-width: thin;
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;

View File

@@ -35,7 +35,7 @@ class Assistant
private
def chat_history
chat.messages.conversation.ordered
chat.messages.where.not(debug: true).ordered
end
def process_response_artifacts(data)

View File

@@ -36,6 +36,10 @@ class Chat < ApplicationRecord
end
def conversation_messages
messages.conversation(debug: debug_mode?)
if debug_mode?
messages
else
messages.where(type: ["UserMessage", "AssistantMessage"])
end
end
end

View File

@@ -14,7 +14,6 @@ class Message < ApplicationRecord
after_update_commit -> { broadcast_update_to chat }, if: :broadcast?
scope :ordered, -> { order(created_at: :asc) }
scope :conversation, ->(debug: false) { debug ? all : where(debug: false) }
private
def broadcast?

View File

@@ -1,10 +1,19 @@
<%# locals: (assistant_message:) %>
<div id="<%= dom_id(assistant_message) %>">
<div class="flex items-start">
<%= render "chats/ai_avatar" %>
<div class="pr-2 max-w-[85%] text-primary">
<div class="prose prose-sm prose-gray break-words"><%= markdown(assistant_message.content) %></div>
<% if assistant_message.reasoning? %>
<details class="group mb-1">
<summary class="flex items-center gap-2">
<p class="text-secondary text-sm">Assistant reasoning</p>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
</summary>
<div class="prose prose--ai-chat"><%= markdown(assistant_message.content) %></div>
</details>
<% else %>
<div class="flex items-start mb-6">
<%= render "chats/ai_avatar" %>
<div class="prose prose--ai-chat"><%= markdown(assistant_message.content) %></div>
</div>
</div>
<% end %>
</div>

View File

@@ -1,6 +1,6 @@
<%# locals: (chat:) %>
<nav class="flex items-center justify-between mb-6">
<nav class="flex items-center justify-between">
<% path = chat.new_record? ? chats_path : chats_path(previous_chat_id: chat.id) %>
<div class="flex items-center gap-2 grow">

View File

@@ -8,18 +8,16 @@
<%= render "chats/chat_nav", chat: @chat %>
</div>
<div id="messages" class="grow py-8 overflow-y-auto" data-chat-target="messages">
<div class="p-4 space-y-6">
<% if @chat.conversation_messages.any? %>
<% @chat.conversation_messages.each do |message| %>
<%= render message %>
<% end %>
<% else %>
<div class="mt-auto">
<%= render "chats/ai_greeting", context: "chat" %>
</div>
<div id="messages" class="grow overflow-y-auto p-4" data-chat-target="messages">
<% if @chat.conversation_messages.any? %>
<% @chat.conversation_messages.each do |message| %>
<%= render message %>
<% end %>
</div>
<% else %>
<div class="mt-auto">
<%= render "chats/ai_greeting", context: "chat" %>
</div>
<% end %>
</div>
<div class="p-4">

View File

@@ -1,9 +1,6 @@
<%# locals: (developer_message:) %>
<div id="<%= dom_id(developer_message) %>">
<div class="flex items-start">
<div class="pr-2 max-w-[85%] text-primary">
<div class="prose prose-sm prose-gray break-words"><%= markdown(developer_message.content) %></div>
</div>
</div>
<div id="<%= dom_id(developer_message) %>" class="my-2 <%= developer_message.debug? ? 'bg-yellow-50 border-yellow-200' : 'bg-blue-50 border-blue-200' %> px-3 py-2 rounded-lg max-w-[85%] ml-auto border">
<span class="text-secondary text-xs"><%= developer_message.debug? ? "Debug message (internal only)" : "System instruction (sent to AI)" %></span>
<p class="text-primary text-sm"><%= developer_message.content %></p>
</div>

View File

@@ -1,9 +1,5 @@
<%# locals: (user_message:) %>
<div id="<%= dom_id(user_message) %>">
<div class="flex items-start">
<div class="pr-2 max-w-[85%] text-primary">
<div class="prose prose-sm prose-gray break-words"><%= markdown(user_message.content) %></div>
</div>
</div>
<div id="<%= dom_id(user_message) %>" class="bg-gray-100 px-3 py-2 rounded-lg max-w-[85%] w-fit ml-auto mb-6">
<div class="prose prose--ai-chat"><%= markdown(user_message.content) %></div>
</div>