better layout

lib/elixir_ai_web/components/chat_message.ex

@@ -0,0 +1,66 @@
+defmodule ElixirAiWeb.ChatMessage do
+  use Phoenix.Component
+  alias ElixirAiWeb.Markdown
+  alias Phoenix.LiveView.JS
+
+  attr :content, :string, required: true
+
+  def user_message(assigns) do
+    ~H"""
+    <div class="mb-2 text-sm text-right">
+      <div class="inline-block px-3 py-2 rounded-lg  bg-cyan-950 text-cyan-50 max-w-prose text-left">
+        {@content}
+      </div>
+    </div>
+    """
+  end
+
+  attr :content, :string, required: true
+  attr :reasoning_content, :string, default: nil
+
+  def assistant_message(assigns) do
+    assigns = assign(assigns, :_reasoning_id, "reasoning-#{:erlang.phash2(assigns.content)}")
+
+    ~H"""
+    <div class="mb-2 text-sm text-left">
+      <%= if @reasoning_content && @reasoning_content != "" do %>
+        <button
+          type="button"
+          class="flex items-center text-cyan-500/60 hover:text-cyan-300 transition-colors duration-150 cursor-pointer"
+          phx-click={
+            JS.toggle_class("collapsed", to: "##{@_reasoning_id}")
+            |> JS.toggle_class("rotate-180", to: "##{@_reasoning_id}-chevron")
+          }
+          aria-label="Toggle reasoning"
+        >
+          <div class="flex items-center gap-1 text-cyan-100/40 ps-2 mb-1">
+            <span class="text-xs">reasoning</span>
+            <svg
+              id={"#{@_reasoning_id}-chevron"}
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              class="w-3 h-3 transition-transform duration-300"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </button>
+        <div
+          id={@_reasoning_id}
+          class="reasoning-content block px-3 py-2 rounded-lg bg-cyan-950/50 text-cyan-400 italic text-xs max-w-prose mb-1 markdown"
+        >
+          {Markdown.render(@reasoning_content)}
+        </div>
+      <% end %>
+      <div class="inline-block px-3 py-2 rounded-lg  max-w-prose markdown bg-cyan-950/50">
+        {Markdown.render(@content)}
+      </div>
+    </div>
+    """
+  end
+end

lib/elixir_ai_web/components/layouts/app.html.heex

@@ -1,3 +1,3 @@
-<main class="px-4 py-8 sm:px-6 lg:px-8">
+<main class="px-4 py-8 sm:px-6 lg:px-8 h-screen w-screen">
   {@inner_content}
 </main>

lib/elixir_ai_web/controllers/page_html/home.html.heex

@@ -1,3 +1,3 @@
-<div class="">
-  <%= live_render(@conn, ElixirAiWeb.ChatLive) %>
-</div>
+
+<%= live_render(@conn, ElixirAiWeb.ChatLive) %>
+

lib/elixir_ai_web/live/chat_live.ex

@@ -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