Mercurial Hosting > lang
changeset 79:d4473741142c
chat UI
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Tue, 02 Sep 2025 16:33:45 -0600 |
| parents | 2be9ea450de3 |
| children | 0ae81150d377 |
| files | src/lib/Chat.luan src/lib/claude/Ai_chat.luan src/site.css |
| diffstat | 3 files changed, 35 insertions(+), 16 deletions(-) [+] |
line wrap: on
line diff
--- a/src/lib/Chat.luan Tue Sep 02 09:46:04 2025 -0600 +++ b/src/lib/Chat.luan Tue Sep 02 16:33:45 2025 -0600 @@ -119,7 +119,6 @@ local function assistant_controls() return `%> - <div trans=needed>Translating...</div> <div controls> <audio controls preload=none></audio> <select onchange="showSelected(this)">
--- a/src/lib/claude/Ai_chat.luan Tue Sep 02 09:46:04 2025 -0600 +++ b/src/lib/claude/Ai_chat.luan Tue Sep 02 16:33:45 2025 -0600 @@ -42,25 +42,27 @@ continue end local role = message.role or error() - local who - if role=="assistant" then - who = "Claude" - elseif role=="user" then - who = "You" - else - error(role) - end local function output(text) text = html_encode(text) + if role=="user" then %> - <div role="<%=role%>" msg="<%=i%>"> - <h3><%=who%></h3> - <div message markdown><%=text%></div> -<% if role=="assistant" then %> -<%= assistant_controls %> -<% end %> - </div> + <div role="user" msg="<%=i%>"> + <div flex><div bubble> + <div message markdown><%=text%></div> + </div></div> + </div> <% + elseif role=="assistant" then +%> + <div role="assistant" msg="<%=i%>"> + <div flex><div bubble> + <div message markdown><%=text%></div> + <div trans=needed>Translating...</div> + </div></div> +<%= assistant_controls %> + </div> +<% + else error(role) end end local content = message.content or error() if type(content) == "string" then
--- a/src/site.css Tue Sep 02 09:46:04 2025 -0600 +++ b/src/site.css Tue Sep 02 16:33:45 2025 -0600 @@ -93,6 +93,24 @@ white-space: pre-wrap; } +div[role] div[flex] { + display: flex; +} +div[role=user] div[flex] { + justify-content: flex-end; +} +div[role] div[bubble] { + border-radius: 20px; + padding: 4px 20px; + margin-top: 16px; +} +div[role=user] div[bubble] { + background-color: #C1D5D9; + max-width: 70%; +} +div[role=assistant] div[bubble] { + background-color: #E0E0E0; +} div[role=assistant] div[trans] { display: none; border-top: 1px solid #cccccc;