moved frontend files around

lib/elixir_ai_web/chat/chat_live.ex

@@ -0,0 +1,225 @@
+defmodule ElixirAiWeb.ChatLive do
+  use ElixirAiWeb, :live_view
+  require Logger
+  import ElixirAiWeb.Spinner
+  import ElixirAiWeb.ChatMessage
+  import ElixirAiWeb.ChatProviderDisplay
+  alias ElixirAi.ChatRunner
+  alias ElixirAi.ConversationManager
+  import ElixirAi.PubsubTopics
+
+  def mount(%{"name" => name}, _session, socket) do
+    case ConversationManager.open_conversation(name) do
+      {:ok, _pid} ->
+        if connected?(socket) do
+          Phoenix.PubSub.subscribe(ElixirAi.PubSub, chat_topic(name))
+        end
+
+        conversation = ChatRunner.get_conversation(name)
+
+        {:ok,
+         socket
+         |> assign(conversation_name: name)
+         |> assign(user_input: "")
+         |> assign(messages: conversation.messages)
+         |> assign(streaming_response: conversation.streaming_response)
+         |> assign(background_color: "bg-cyan-950/30")
+         |> assign(provider: conversation.provider)
+         |> assign(db_error: nil)}
+
+      {:error, :not_found} ->
+        {:ok, push_navigate(socket, to: "/")}
+
+      {:error, reason} ->
+        Logger.error("Failed to start conversation #{name}: #{inspect(reason)}")
+
+        {:ok,
+         socket
+         |> assign(conversation_name: name)
+         |> assign(user_input: "")
+         |> assign(messages: [])
+         |> assign(streaming_response: nil)
+         |> assign(background_color: "bg-cyan-950/30")
+         |> assign(provider: nil)
+         |> assign(db_error: Exception.format(:error, reason))}
+    end
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div class="flex flex-col h-full  rounded-lg">
+      <div class="px-4 py-3 font-semibold flex items-center gap-3">
+        <.link navigate={~p"/"} class="text-cyan-700 hover:text-cyan-400 transition-colors">
+          ←
+        </.link>
+        <span class="flex-1">{@conversation_name}</span>
+        <.chat_provider_display provider={@provider} />
+      </div>
+      <%= if @db_error do %>
+        <div class="mx-4 mt-2 px-3 py-2 rounded text-sm text-red-400 bg-red-950/40" role="alert">
+          Database error: {@db_error}
+        </div>
+      <% end %>
+      <div
+        id="chat-messages"
+        phx-hook="ScrollBottom"
+        class={"flex-1 overflow-y-auto p-4 rounded-lg #{@background_color}"}
+      >
+        <%= if @messages == [] do %>
+          <p class="text-sm text-center mt-4">No messages yet.</p>
+        <% end %>
+        <%= for msg <- @messages do %>
+          <%= cond do %>
+            <% msg.role == :user -> %>
+              <.user_message content={Map.get(msg, :content) || ""} />
+            <% msg.role == :tool -> %>
+              <.tool_result_message
+                content={Map.get(msg, :content) || ""}
+                tool_call_id={Map.get(msg, :tool_call_id) || ""}
+              />
+            <% true -> %>
+              <.assistant_message
+                content={Map.get(msg, :content) || ""}
+                reasoning_content={Map.get(msg, :reasoning_content)}
+                tool_calls={Map.get(msg, :tool_calls) || []}
+              />
+          <% end %>
+        <% end %>
+        <%= if @streaming_response do %>
+          <.streaming_assistant_message
+            content={@streaming_response.content}
+            reasoning_content={@streaming_response.reasoning_content}
+            tool_calls={@streaming_response.tool_calls}
+          />
+          <.spinner />
+        <% end %>
+      </div>
+      <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 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
+        </button>
+      </form>
+    </div>
+    """
+  end
+
+  def handle_event("update_user_input", %{"user_input" => user_input}, socket) do
+    {:noreply, assign(socket, user_input: user_input)}
+  end
+
+  def handle_event("submit", %{"user_input" => user_input}, socket) when user_input != "" do
+    ChatRunner.new_user_message(socket.assigns.conversation_name, user_input)
+    {:noreply, assign(socket, user_input: "")}
+  end
+
+  def handle_info({:user_chat_message, message}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [message]))
+     |> push_event("scroll_to_bottom", %{})}
+  end
+
+  def handle_info(
+        {:start_ai_response_stream,
+         %{id: _id, reasoning_content: "", content: ""} = starting_response},
+        socket
+      ) do
+    {:noreply, assign(socket, streaming_response: starting_response)}
+  end
+
+  # chunk arrived before :start_ai_response_stream — fetch snapshot from runner and apply
+  def handle_info(
+        {:reasoning_chunk_content, reasoning_content},
+        %{assigns: %{streaming_response: nil}} = socket
+      ) do
+    base = get_snapshot(socket) |> Map.update!(:reasoning_content, &(&1 <> reasoning_content))
+    {:noreply, assign(socket, streaming_response: base)}
+  end
+
+  def handle_info({:reasoning_chunk_content, reasoning_content}, socket) do
+    updated_response = %{
+      socket.assigns.streaming_response
+      | reasoning_content:
+          socket.assigns.streaming_response.reasoning_content <> reasoning_content
+    }
+
+    # Update assign (controls toggle button visibility) and stream chunk to hook.
+    {:noreply,
+     socket
+     |> assign(streaming_response: updated_response)
+     |> push_event("reasoning_chunk", %{chunk: reasoning_content})}
+  end
+
+  def handle_info(
+        {:text_chunk_content, text_content},
+        %{assigns: %{streaming_response: nil}} = socket
+      ) do
+    base = get_snapshot(socket) |> Map.update!(:content, &(&1 <> text_content))
+    {:noreply, assign(socket, streaming_response: base)}
+  end
+
+  def handle_info({:text_chunk_content, text_content}, socket) do
+    updated_response = %{
+      socket.assigns.streaming_response
+      | content: socket.assigns.streaming_response.content <> text_content
+    }
+
+    # Update assign (accumulated for final message) and stream chunk to hook.
+    {:noreply,
+     socket
+     |> assign(streaming_response: updated_response)
+     |> push_event("md_chunk", %{chunk: text_content})}
+  end
+
+  def handle_info(:tool_calls_finished, socket) do
+    # Logger.info("Received tool_calls_finished")
+
+    {:noreply,
+     socket
+     |> assign(streaming_response: nil)}
+  end
+
+  def handle_info({:tool_request_message, tool_request_message}, socket) do
+    # Logger.info("tool request message: #{inspect(tool_request_message)}")
+
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [tool_request_message]))}
+  end
+
+  def handle_info({:one_tool_finished, tool_response}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [tool_response]))}
+  end
+
+  def handle_info({:end_ai_response, final_message}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [final_message]))
+     |> assign(streaming_response: nil)}
+  end
+
+  def handle_info({:db_error, reason}, socket) do
+    {:noreply, assign(socket, db_error: reason)}
+  end
+
+  def handle_info({:set_background_color, color}, socket) do
+    Logger.info("setting background color to #{color}")
+    {:noreply, assign(socket, background_color: color)}
+  end
+
+  defp get_snapshot(socket) do
+    ChatRunner.get_streaming_response(socket.assigns.conversation_name)
+    |> case do
+      nil -> %{id: nil, content: "", reasoning_content: "", tool_calls: []}
+      snapshot -> snapshot
+    end
+  end
+end

lib/elixir_ai_web/chat/chat_message.ex

@@ -0,0 +1,418 @@
+defmodule ElixirAiWeb.ChatMessage do
+  use Phoenix.Component
+  alias Phoenix.LiveView.JS
+
+  defp max_width_class, do: "max-w-300"
+
+  attr :content, :string, required: true
+  attr :tool_call_id, :string, required: true
+
+  def tool_result_message(assigns) do
+    ~H"""
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900/40 bg-cyan-950/20 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900/40 bg-cyan-900/10 text-cyan-600">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="w-3 h-3 shrink-0"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M10 2a.75.75 0 0 1 .75.75v.258a33.186 33.186 0 0 1 6.668 2.372.75.75 0 1 1-.636 1.354 31.66 31.66 0 0 0-1.598-.632l1.44 7.402a.75.75 0 0 1-.26.726A18.698 18.698 0 0 1 10 15.75a18.698 18.698 0 0 1-6.364-1.518.75.75 0 0 1-.26-.726l1.44-7.402a31.66 31.66 0 0 0-1.598.632.75.75 0 1 1-.636-1.354 33.186 33.186 0 0 1 6.668-2.372V2.75A.75.75 0 0 1 10 2Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        <span class="text-cyan-600/70 flex-1 truncate">tool result</span>
+        <span class="text-cyan-800 text-[10px] truncate max-w-[12rem]">{@tool_call_id}</span>
+      </div>
+      <div class="px-3 py-2">
+        <pre class="text-cyan-500/70 whitespace-pre-wrap break-all">{@content}</pre>
+      </div>
+    </div>
+    """
+  end
+
+  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_width_class()} text-left"}>
+        {@content}
+      </div>
+    </div>
+    """
+  end
+
+  attr :content, :string, required: true
+  attr :reasoning_content, :string, default: nil
+  attr :tool_calls, :list, default: []
+
+  def assistant_message(assigns) do
+    assigns =
+      assigns
+      |> assign(
+        :_reasoning_id,
+        "reasoning-#{:erlang.phash2({assigns.content, assigns.reasoning_content, assigns.tool_calls})}"
+      )
+      |> assign(:_expanded, false)
+
+    ~H"""
+    <.message_bubble
+      reasoning_id={@_reasoning_id}
+      content={@content}
+      reasoning_content={@reasoning_content}
+      tool_calls={@tool_calls}
+      expanded={@_expanded}
+    />
+    """
+  end
+
+  attr :content, :string, required: true
+  attr :reasoning_content, :string, default: nil
+  attr :tool_calls, :list, default: []
+
+  # Renders the in-progress streaming message. Content and reasoning are rendered
+  # entirely client-side via the MarkdownStream hook — the server sends push_event
+  # chunks instead of re-rendering the full markdown on every token.
+  def streaming_assistant_message(assigns) do
+    ~H"""
+    <div class="mb-2 text-sm text-left">
+      <!-- Reasoning section — only shown once reasoning_content is non-empty.
+           The div is always in the DOM so the hook mounts before chunks arrive. -->
+      <div id="stream-reasoning-wrap">
+        <%= 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-stream")
+              |> JS.toggle_class("rotate-180", to: "#reasoning-stream-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-stream-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>
+        <% end %>
+        <div
+          id="reasoning-stream"
+          phx-hook="MarkdownStream"
+          phx-update="ignore"
+          data-event="reasoning_chunk"
+          class={"reasoning-content block px-3 py-2 rounded-lg bg-cyan-950/50 text-cyan-400 italic text-xs #{max_width_class()} mb-1 markdown"}
+        >
+        </div>
+      </div>
+      <%= for tool_call <- @tool_calls do %>
+        <.tool_call_item tool_call={tool_call} />
+      <% end %>
+      <div
+        id="stream-content"
+        phx-hook="MarkdownStream"
+        phx-update="ignore"
+        data-event="md_chunk"
+        class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-cyan-950/50"}
+      >
+      </div>
+    </div>
+    """
+  end
+
+  attr :content, :string, required: true
+  attr :reasoning_content, :string, default: nil
+  attr :tool_calls, :list, default: []
+  attr :reasoning_id, :string, required: true
+  attr :expanded, :boolean, default: false
+
+  defp message_bubble(assigns) do
+    ~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", !@expanded && "rotate-180"]}
+            >
+              <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}
+          phx-hook="MarkdownRender"
+          phx-update="ignore"
+          data-md={@reasoning_content}
+          class={[
+            "reasoning-content block px-3 py-2 rounded-lg bg-cyan-950/50 text-cyan-400 italic text-xs #{max_width_class()} mb-1 markdown",
+            !@expanded && "collapsed"
+          ]}
+        >
+        </div>
+      <% end %>
+      <%= for tool_call <- @tool_calls do %>
+        <.tool_call_item tool_call={tool_call} />
+      <% end %>
+      <%= if @content && @content != "" do %>
+        <div
+          id={"#{@reasoning_id}-content"}
+          phx-hook="MarkdownRender"
+          phx-update="ignore"
+          data-md={@content}
+          class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-cyan-950/50"}
+        >
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+
+  # Dispatches to the appropriate tool call component based on result state.
+  # Four states:
+  #   :error key present  → error (runtime failure)
+  #   :result key present → success (runtime completed)
+  #   :index key present  → pending (streaming in-progress)
+  #   none of the above   → called (DB-loaded completed call; result is a separate message)
+  attr :tool_call, :map, required: true
+
+  defp tool_call_item(%{tool_call: tool_call} = assigns) do
+    cond do
+      Map.has_key?(tool_call, :error) ->
+        assigns =
+          assigns
+          |> assign(:name, tool_call.name)
+          |> assign(:arguments, tool_call[:arguments])
+          |> assign(:error, tool_call.error)
+
+        ~H"<.error_tool_call name={@name} arguments={@arguments} error={@error} />"
+
+      Map.has_key?(tool_call, :result) ->
+        assigns =
+          assigns
+          |> assign(:name, tool_call.name)
+          |> assign(:arguments, tool_call[:arguments])
+          |> assign(:result, tool_call.result)
+
+        ~H"<.success_tool_call name={@name} arguments={@arguments} result={@result} />"
+
+      Map.has_key?(tool_call, :index) ->
+        assigns =
+          assigns
+          |> assign(:name, tool_call.name)
+          |> assign(:arguments, tool_call[:arguments])
+
+        ~H"<.pending_tool_call name={@name} arguments={@arguments} />"
+
+      true ->
+        assigns =
+          assigns
+          |> assign(:name, tool_call.name)
+          |> assign(:arguments, tool_call[:arguments])
+
+        ~H"<.called_tool_call name={@name} arguments={@arguments} />"
+    end
+  end
+
+  attr :name, :string, required: true
+  attr :arguments, :any, default: nil
+
+  defp called_tool_call(assigns) do
+    ~H"""
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900/60 bg-cyan-950/40 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900/60 bg-cyan-900/20 text-cyan-400">
+        <.tool_call_icon />
+        <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
+        <span class="flex items-center gap-1 text-cyan-500/50">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <span class="text-[10px]">called</span>
+        </span>
+      </div>
+      <.tool_call_args arguments={@arguments} />
+    </div>
+    """
+  end
+
+  attr :name, :string, required: true
+  attr :arguments, :any, default: nil
+
+  defp pending_tool_call(assigns) do
+    ~H"""
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900 bg-cyan-950/40 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900 bg-cyan-900/30 text-cyan-400">
+        <.tool_call_icon />
+        <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
+        <span class="flex items-center gap-1 text-cyan-600">
+          <span class="w-1.5 h-1.5 rounded-full bg-cyan-600 animate-pulse inline-block"></span>
+          <span class="text-[10px]">running</span>
+        </span>
+      </div>
+      <.tool_call_args arguments={@arguments} />
+    </div>
+    """
+  end
+
+  attr :name, :string, required: true
+  attr :arguments, :any, default: nil
+  attr :result, :any, required: true
+
+  defp success_tool_call(assigns) do
+    assigns =
+      assign(
+        assigns,
+        :result_str,
+        case assigns.result do
+          s when is_binary(s) -> s
+          other -> inspect(other, pretty: true, limit: :infinity)
+        end
+      )
+
+    ~H"""
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900 bg-cyan-950/40 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900 bg-cyan-900/30 text-cyan-400">
+        <.tool_call_icon />
+        <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
+        <span class="flex items-center gap-1 text-emerald-500">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <span class="text-[10px]">done</span>
+        </span>
+      </div>
+      <.tool_call_args arguments={@arguments} />
+      <div class="px-3 py-2">
+        <div class="text-cyan-700 mb-1 uppercase tracking-wider text-[10px]">result</div>
+        <pre class="text-emerald-300/80 whitespace-pre-wrap break-all">{@result_str}</pre>
+      </div>
+    </div>
+    """
+  end
+
+  attr :name, :string, required: true
+  attr :arguments, :any, default: nil
+  attr :error, :string, required: true
+
+  defp error_tool_call(assigns) do
+    ~H"""
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-red-900/50 bg-cyan-950/40 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-red-900/50 bg-red-900/20 text-cyan-400">
+        <.tool_call_icon />
+        <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
+        <span class="flex items-center gap-1 text-red-500">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3"
+          >
+            <path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm0-10a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 5Zm0 6.5a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+          </svg>
+          <span class="text-[10px]">error</span>
+        </span>
+      </div>
+      <.tool_call_args arguments={@arguments} />
+      <div class="px-3 py-2 bg-red-950/20">
+        <div class="text-red-700 mb-1 uppercase tracking-wider text-[10px]">error</div>
+        <pre class="text-red-400 whitespace-pre-wrap break-all">{@error}</pre>
+      </div>
+    </div>
+    """
+  end
+
+  attr :arguments, :any, default: nil
+
+  defp tool_call_args(%{arguments: args} = assigns) when not is_nil(args) and args != "" do
+    assigns =
+      assign(
+        assigns,
+        :pretty_args,
+        case args do
+          s when is_binary(s) ->
+            case Jason.decode(s) do
+              {:ok, decoded} -> Jason.encode!(decoded, pretty: true)
+              _ -> s
+            end
+
+          other ->
+            Jason.encode!(other, pretty: true)
+        end
+      )
+
+    ~H"""
+    <div class="px-3 py-2 border-b border-cyan-900/50">
+      <div class="text-cyan-700 mb-1 uppercase tracking-wider text-[10px]">arguments</div>
+      <pre class="text-cyan-400 whitespace-pre-wrap break-all">{@pretty_args}</pre>
+    </div>
+    """
+  end
+
+  defp tool_call_args(assigns), do: ~H""
+
+  defp tool_call_icon(assigns) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      class="w-3 h-3 shrink-0"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    """
+  end
+end

lib/elixir_ai_web/chat/chat_provider_display.ex

@@ -0,0 +1,33 @@
+defmodule ElixirAiWeb.ChatProviderDisplay do
+  use Phoenix.Component
+
+  attr :provider, :any, default: nil
+
+  def chat_provider_display(%{provider: nil} = assigns) do
+    ~H"""
+    <div class="flex items-center gap-1.5 text-xs text-cyan-900 italic">
+      No provider set
+    </div>
+    """
+  end
+
+  def chat_provider_display(assigns) do
+    ~H"""
+    <div class="flex items-center gap-2 text-xs min-w-0">
+      <div class="flex items-center gap-1.5 px-2 py-1 rounded bg-cyan-950/50 border border-cyan-900/40 min-w-0">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="w-3 h-3 shrink-0 text-cyan-600"
+        >
+          <path d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM1.49 15.326a.78.78 0 0 1-.358-.442 3 3 0 0 1 4.308-3.516 6.484 6.484 0 0 0-1.905 3.959c-.023.222-.014.442.025.654a4.97 4.97 0 0 1-2.07-.655ZM16.44 15.98a4.97 4.97 0 0 0 2.07-.654.78.78 0 0 0 .357-.442 3 3 0 0 0-4.308-3.516 6.484 6.484 0 0 1 1.907 3.96 2.32 2.32 0 0 1-.026.654ZM18 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM5.304 16.19a.844.844 0 0 1-.277-.71 5 5 0 0 1 9.947 0 .843.843 0 0 1-.277.71A6.975 6.975 0 0 1 10 18a6.974 6.974 0 0 1-4.696-1.81Z" />
+        </svg>
+        <span class="text-cyan-400 font-medium truncate">{@provider.name}</span>
+        <span class="text-cyan-800">·</span>
+        <span class="text-cyan-600 truncate">{@provider.model_name}</span>
+      </div>
+    </div>
+    """
+  end
+end