Message styles
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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?
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user