alex/elixirAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better layout

Browse Source
This commit is contained in:
Alex Mickelson
2026-03-05 16:55:16 -07:00
parent ea2b6d4cbf
commit cacae19f74
8 changed files with 274 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
lib/elixir_ai_web/live/chat_live.ex
View File

@@ -1,8 +1,8 @@
defmodule ElixirAiWeb.ChatLive do
use ElixirAiWeb, :live_view
import ElixirAiWeb.Spinner
import ElixirAiWeb.ChatMessage
import ElixirAi.ChatRunner
alias ElixirAiWeb.Markdown
@topic "ai_chat"
@@ -19,44 +19,35 @@ defmodule ElixirAiWeb.ChatLive do
def render(assigns) do
~H"""
<div class="flex flex-col h-96 border rounded-lg overflow-hidden">
<div class="px-4 py-3 font-semibold">
<div class="flex flex-col h-full rounded-lg">
<div class="px-4 py-3 font-semibold ">
Live Chat
</div>
<div class="flex-1 overflow-y-auto p-4">
<div class="flex-1 overflow-y-auto p-4 bg-cyan-950/30 rounded-lg">
<%= if @messages == [] do %>
<p class="text-sm text-center mt-4">No messages yet.</p>
<% end %>
<%= for msg <- @messages do %>
<div class={["mb-2 text-sm", if(msg.role == :user, do: "text-right", else: "text-left")]}>
<%= if msg.role == :assistant do %>
<span class="inline-block px-3 py-1 rounded-lg border">
{Markdown.render(msg.reasoning_content)}
</span>
<% end %>
<span class="inline-block px-3 py-1 rounded-lg border">
{Markdown.render(msg.content)}
</span>
</div>
<%= if msg.role == :user do %>
<.user_message content={msg.content} />
<% else %>
<.assistant_message content={msg.content} reasoning_content={msg.reasoning_content} />
<% end %>
<% end %>
<%= if @streaming_response do %>
<div class="mb-2 text-sm text-left">
<span class="inline-block px-3 py-1 rounded-lg border">
{Markdown.render(@streaming_response.reasoning_content)}
</span>
<span class="inline-block px-3 py-1 rounded-lg border">
{Markdown.render(@streaming_response.content)}
</span>
<.spinner />
</div>
<.assistant_message
content={@streaming_response.content}
reasoning_content={@streaming_response.reasoning_content}
/>
<.spinner />
<% end %>
</div>
<form class="border-t p-3 flex gap-2" phx-submit="submit" phx-change="update_user_input">
<form class="p-3 flex gap-2" phx-submit="submit" phx-change="update_user_input">
<input
type="text"
name="user_input"
value={@user_input}
class="flex-1 border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2"
class="flex-1 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2"
/>
<button type="submit" class="px-4 py-2 rounded text-sm border">
Send