identified performance issues with streamed markdown

lib/elixir_ai_web/live/chat_live.ex

@@ -4,8 +4,7 @@ defmodule ElixirAiWeb.ChatLive do
   import ElixirAiWeb.Spinner
   import ElixirAiWeb.ChatMessage
   alias ElixirAi.ChatRunner
-
-  @topic "ai_chat"
+  alias ElixirAi.ConversationManager
 
   def valid_background_colors do
     [
@@ -19,23 +18,35 @@ defmodule ElixirAiWeb.ChatLive do
     ]
   end
 
-  def mount(_params, _session, socket) do
-    if connected?(socket), do: Phoenix.PubSub.subscribe(ElixirAi.PubSub, @topic)
-    conversation = ChatRunner.get_conversation()
+  def mount(%{"name" => name}, _session, socket) do
+    case ConversationManager.open_conversation(name) do
+      {:ok, _pid} ->
+        if connected?(socket),
+          do: Phoenix.PubSub.subscribe(ElixirAi.PubSub, "ai_chat:#{name}")
 
-    {:ok,
-     socket
-     |> assign(user_input: "")
-     |> assign(messages: conversation.messages)
-     |> assign(streaming_response: nil)
-     |> assign(background_color: "bg-cyan-950/30")}
+        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")}
+
+      {:error, :not_found} ->
+        {:ok, push_navigate(socket, to: "/")}
+    end
   end
 
   def render(assigns) do
     ~H"""
     <div class="flex flex-col h-full  rounded-lg">
-      <div class="px-4 py-3 font-semibold ">
-        Live Chat
+      <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>
+        {@conversation_name}
       </div>
       <div
         id="chat-messages"
@@ -88,7 +99,7 @@ defmodule ElixirAiWeb.ChatLive do
   end
 
   def handle_event("submit", %{"user_input" => user_input}, socket) when user_input != "" do
-    ChatRunner.new_user_message(user_input)
+    ChatRunner.new_user_message(socket.assigns.conversation_name, user_input)
     {:noreply, assign(socket, user_input: "")}
   end
 
@@ -104,6 +115,15 @@ defmodule ElixirAiWeb.ChatLive 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
@@ -114,6 +134,14 @@ defmodule ElixirAiWeb.ChatLive do
     {:noreply, assign(socket, streaming_response: updated_response)}
   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
@@ -158,4 +186,12 @@ defmodule ElixirAiWeb.ChatLive 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/live/home_live.ex

@@ -0,0 +1,80 @@
+defmodule ElixirAiWeb.HomeLive do
+  use ElixirAiWeb, :live_view
+  alias ElixirAi.ConversationManager
+
+  def mount(_params, _session, socket) do
+    {:ok,
+     socket
+     |> assign(conversations: ConversationManager.list_conversations())
+     |> assign(new_name: "")
+     |> assign(error: nil)}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div class="max-w-lg mx-auto mt-16 px-4">
+      <h1 class="text-lg font-semibold text-cyan-300 mb-8">Conversations</h1>
+
+      <ul class="mb-8 space-y-2">
+        <%= if @conversations == [] do %>
+          <li class="text-sm text-cyan-700">No conversations yet.</li>
+        <% end %>
+        <%= for name <- @conversations do %>
+          <li>
+            <.link
+              navigate={~p"/chat/#{name}"}
+              class="block px-4 py-2 rounded-lg border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors text-sm"
+            >
+              {name}
+            </.link>
+          </li>
+        <% end %>
+      </ul>
+
+      <form phx-submit="create" class="flex gap-2">
+        <input
+          type="text"
+          name="name"
+          value={@new_name}
+          placeholder="New conversation name"
+          class="flex-1 rounded px-3 py-2 text-sm bg-cyan-950/20 border border-cyan-900/40 text-cyan-100 placeholder-cyan-800 focus:outline-none focus:ring-1 focus:ring-cyan-700"
+          autocomplete="off"
+        />
+        <button
+          type="submit"
+          class="px-4 py-2 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors"
+        >
+          Create
+        </button>
+      </form>
+
+      <%= if @error do %>
+        <p class="mt-2 text-sm text-red-400">{@error}</p>
+      <% end %>
+    </div>
+    """
+  end
+
+  @spec handle_event(<<_::48>>, map(), any()) :: {:noreply, any()}
+  def handle_event("create", %{"name" => name}, socket) do
+    name = String.trim(name)
+
+    if name == "" do
+      {:noreply, assign(socket, error: "Name can't be blank")}
+    else
+      case ConversationManager.create_conversation(name) do
+        {:ok, _pid} ->
+          {:noreply,
+           socket
+           |> push_navigate(to: ~p"/chat/#{name}")
+           |> assign(error: nil)}
+
+        {:error, :already_exists} ->
+          {:noreply, assign(socket, error: "A conversation with that name already exists")}
+
+        _ ->
+          {:noreply, assign(socket, error: "Failed to create conversation")}
+      end
+    end
+  end
+end

lib/elixir_ai_web/router.ex

@@ -17,7 +17,8 @@ defmodule ElixirAiWeb.Router do
   scope "/", ElixirAiWeb do
     pipe_through :browser
 
-    get "/", PageController, :home
+    live "/", HomeLive
+    live "/chat/:name", ChatLive
   end
 
   # Other scopes may use custom stacks.