How to make a stream output

[youfun]

Here is my code. I can see that the log shows the AI's response after clicking the generate button, but the page doesn't display the AI's response.

Mix.install([
  {:phoenix_playground, "~> 0.1.6"},
  {:langchain, "~> 0.3.0-rc.0"}
])

alias LangChain.Chains.LLMChain
alias LangChain.ChatModels.ChatOpenAI
alias LangChain.Message
alias LangChain.MessageDelta

defmodule LLMStreamLive do
  use Phoenix.LiveView
  require Logger

  @interval 50 # milliseconds

  def mount(_params, _session, socket) do
    Logger.info("Mounting LLMStreamLive")
    socket = socket
    |> stream(:content, [])
    |> assign(:id_counter, 0)
    |> assign(:generating, false)

    {:ok, socket}
  end

  def render(assigns) do
    Logger.info("Rendering with stream content: #{inspect(assigns.streams.content)}")
    ~H"""
    <div>
      <button phx-click="generate" {if @generating, do: [disabled: true], else: []}>
        <%= if @generating, do: "Generating...", else: "Generate AI Response" %>
      </button>
      <div id="llm-output" phx-update="stream">
        <%= for {dom_id, item} <- @streams.content do %>
          <span id={dom_id}><%= item.text %></span>
        <% end %>
      </div>
    </div>

    <style type="text/css">
      body { padding: 1em; font-family: monospace; font-size: 18px; }
      #llm-output { line-height: 1.5; white-space: pre-wrap; margin-top: 1em; }
      button { font-size: 16px; padding: 10px 20px; }
    </style>
    """
  end

  def handle_event("generate", _params, socket) do
    Logger.info("Generate button clicked")
    if not socket.assigns.generating do
      Task.start(fn -> run_llm_request(self()) end)
      {:noreply, assign(socket, generating: true)}
    else
      {:noreply, socket}
    end
  end

  def handle_info({:add_content, content}, socket) do
    Logger.info("Adding content: #{inspect(content)}")
    id = socket.assigns.id_counter + 1
    new_item = %{id: "content-#{id}", text: content}

    Logger.info("Current stream content: #{inspect(socket.assigns.streams.content)}")

    socket = socket
    |> stream_insert(:content, new_item)
    |> assign(:id_counter, id)

    Logger.info("Updated stream content: #{inspect(socket.assigns.streams.content)}")

    {:noreply, socket}
  end

  def handle_info(:generation_complete, socket) do
    Logger.info("Generation complete")
    {:noreply, assign(socket, generating: false)}
  end

  defp run_llm_request(pid) do
    Logger.info("Starting LLM request")
    callback = fn
      %MessageDelta{} = data ->
        Logger.info("Received delta: #{inspect(data.content)}")
        send(pid, {:add_content, data.content})
        Process.sleep(@interval)

      %Message{} = data ->
        Logger.info("Received complete message: #{inspect(data.content)}")
        send(pid, {:add_content, "\n\nGeneration complete."})
        send(pid, :generation_complete)

      other ->
        Logger.warn("Received unexpected data in callback: #{inspect(other)}")
    end

    result = LLMChain.new!(%{
      llm: ChatOpenAI.new!(%{
         endpoint: "https://api.fireworks.ai/inference/v1/chat/completions",
        model: "accounts/fireworks/models/llama-v3-70b-instruct",
        api_key: "sk-4Z9UiWB511111CBm",
        temperature: 0.5,
        stream: true
      })
    })
    |> LLMChain.add_messages([
      Message.new_system!("You are a helpful assistant."),
      Message.new_user!("Please write a short essay in English describing the four seasons in New York")
    ])
    |> LLMChain.run(callback_fn: callback)

    case result do
      {:ok, updated_chain, response} ->
        Logger.info("LLM request completed successfully")
        Logger.info("Updated chain: #{inspect(updated_chain)}")
        Logger.info("Response: #{inspect(response)}")
        send(pid, {:add_content, "\n\nFinal response: #{response.content}"})
      {:error, error} ->
        Logger.error("LLM request failed: #{inspect(error)}")
        send(pid, {:add_content, "Generation failed, please try again. Error: #{inspect(error)}"})
        send(pid, :generation_complete)
    end
  end
end

PhoenixPlayground.start(live: LLMStreamLive)