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

refactoring folders
Some checks failed
CI/CD Pipeline / build (push) Failing after 8s
Details

Browse Source
This commit is contained in:
Alex Mickelson
2026-03-25 12:05:56 -06:00
parent d857e91241
commit 0041c25f19
32 changed files with 139 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

354
lib/elixir_ai_web/features/chat/chat_live.ex Normal file
View File

@@ -0,0 +1,354 @@
defmodule ElixirAiWeb.ChatLive do
use ElixirAiWeb, :live_view
use ElixirAi.AiControllable
require Logger
import ElixirAiWeb.Spinner
import ElixirAiWeb.ChatMessage
import ElixirAiWeb.ChatProviderDisplay
alias ElixirAi.{AiProvider, ChatRunner, ConversationManager}
import ElixirAi.PubsubTopics
@impl ElixirAi.AiControllable
def ai_tools do
[
%{
name: "set_user_input",
description:
"Set the text in the chat input field. Use this to pre-fill a message for the user. " <>
"The user will still need to press Send (or you can describe what you filled in).",
parameters: %{
"type" => "object",
"properties" => %{
"text" => %{
"type" => "string",
"description" => "The text to place in the chat input field"
}
},
"required" => ["text"]
}
}
]
end
@impl ElixirAi.AiControllable
def handle_ai_tool_call("set_user_input", %{"text" => text}, socket) do
{"user input set to: #{text}", assign(socket, user_input: text)}
end
def handle_ai_tool_call(_tool_name, _args, socket) do
{"unknown tool", socket}
end
@impl Phoenix.LiveView
def mount(%{"name" => name}, _session, socket) do
case ConversationManager.open_conversation(name) do
{:ok, conversation} ->
if connected?(socket) do
Phoenix.PubSub.subscribe(ElixirAi.PubSub, chat_topic(name))
:pg.join(ElixirAi.LiveViewPG, {:liveview, __MODULE__}, self())
ChatRunner.register_liveview_pid(name, self())
send(self(), :sync_streaming)
end
{:ok,
socket
|> assign(conversation_name: name)
|> assign(runner_pid: Map.get(conversation, :runner_pid))
|> assign(user_input: "")
|> assign(messages: conversation.messages)
|> assign(streaming_response: conversation.streaming_response)
|> assign(background_color: "bg-seafoam-950/30")
|> assign(provider: conversation.provider)
|> assign(providers: AiProvider.all())
|> assign(db_error: nil)
|> assign(ai_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-seafoam-950/30")
|> assign(provider: nil)
|> assign(providers: AiProvider.all())
|> assign(db_error: Exception.format(:error, reason))
|> assign(ai_error: nil)}
end
end
@impl Phoenix.LiveView
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-seafoam-700 hover:text-seafoam-400 transition-colors">
←
</.link>
<span class="flex-1">{@conversation_name}</span>
<.chat_provider_display provider={@provider} providers={@providers} />
</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 %>
<%= if @ai_error do %>
<div class="mx-4 mt-2 px-3 py-2 rounded text-sm text-red-400 bg-red-950/40" role="alert">
AI error: {@ai_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
@impl Phoenix.LiveView
def handle_event("update_user_input", %{"user_input" => user_input}, socket) do
{:noreply, assign(socket, user_input: user_input)}
end
def handle_event("change_provider", %{"id" => provider_id}, socket) do
case ChatRunner.set_provider(socket.assigns.conversation_name, provider_id) do
{:ok, provider} -> {:noreply, assign(socket, provider: provider)}
_error -> {:noreply, socket}
end
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(:recovery_restart, socket) do
{:noreply, assign(socket, streaming_response: nil, ai_error: nil)}
end
def handle_info(:sync_streaming, %{assigns: %{runner_pid: pid}} = socket)
when is_pid(pid) do
case GenServer.call(pid, {:conversation, :get_streaming_response}) do
nil ->
{:noreply, assign(socket, streaming_response: nil)}
%{content: content, reasoning_content: reasoning_content} = snapshot ->
socket =
socket
|> assign(streaming_response: snapshot)
|> then(fn s ->
if content != "", do: push_event(s, "md_chunk", %{chunk: content}), else: s
end)
|> then(fn s ->
if reasoning_content != "",
do: push_event(s, "reasoning_chunk", %{chunk: reasoning_content}),
else: s
end)
|> push_event("scroll_to_bottom", %{})
{:noreply, socket}
end
end
def handle_info(:sync_streaming, socket), do: {:noreply, socket}
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({:ai_request_error, reason}, socket) do
error_message =
case reason do
"proxy error" <> _ ->
"Could not connect to AI provider. Please check your proxy and provider settings."
%{__struct__: mod, reason: r} ->
"#{inspect(mod)}: #{inspect(r)}"
msg when is_binary(msg) ->
msg
_ ->
inspect(reason)
end
{:noreply, assign(socket, ai_error: error_message, streaming_response: nil)}
end
def handle_info({:liveview_tool_call, "set_background_color", %{"color" => color}}, socket) do
{:noreply, assign(socket, background_color: color)}
end
def handle_info({:liveview_tool_call, "navigate_to", %{"path" => path}}, socket) do
{:noreply, push_navigate(socket, to: path)}
end
def handle_info({:liveview_tool_call, _tool_name, _args}, socket) do
{:noreply, socket}
end
def handle_info({:set_background_color, color}, socket) do
Logger.info("setting background color to #{color}")
{:noreply, assign(socket, background_color: color)}
end
@impl Phoenix.LiveView
def terminate(_reason, %{assigns: %{conversation_name: name}} = socket) do
if connected?(socket) do
ChatRunner.deregister_liveview_pid(name, self())
end
:ok
end
defp get_snapshot(%{assigns: %{runner_pid: pid}} = _socket) when is_pid(pid) do
case GenServer.call(pid, {:conversation, :get_streaming_response}) do
nil -> %{id: nil, content: "", reasoning_content: "", tool_calls: []}
snapshot -> snapshot
end
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

408
lib/elixir_ai_web/features/chat/chat_message.ex Normal file
View File

@@ -0,0 +1,408 @@
defmodule ElixirAiWeb.ChatMessage do
use Phoenix.Component
alias Phoenix.LiveView.JS
import ElixirAiWeb.JsonDisplay
defp max_width_class, do: "max-w-full xl: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-seafoam-900/40 bg-seafoam-950/20 text-xs font-mono overflow-hidden"}>
<div class="flex items-center gap-2 px-3 py-1.5 border-b border-seafoam-900/40 bg-seafoam-900/10 text-seafoam-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-seafoam-600/70 flex-1 truncate">tool result</span>
<span class="text-seafoam-800 text-[10px] truncate max-w-[12rem]">{@tool_call_id}</span>
</div>
<div class="px-3 py-2">
<pre class="text-seafoam-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={"ml-auto w-fit px-3 py-2 rounded-lg bg-seafoam-950 text-seafoam-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 min-w-0">
<!-- 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-seafoam-500/60 hover:text-seafoam-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-seafoam-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-seafoam-950/50 text-seafoam-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={"w-fit px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50 overflow-x-auto"}
>
</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 min-w-0">
<%= if @reasoning_content && @reasoning_content != "" do %>
<button
type="button"
class="flex items-center text-seafoam-500/60 hover:text-seafoam-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-seafoam-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-seafoam-950/50 text-seafoam-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={"w-fit px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50 overflow-x-auto"}
>
</div>
<% end %>
</div>
"""
end
# Dispatches to the unified tool_call_card component, determining state from the map keys:
# :error key → :error (runtime failure)
# :result key → :success (completed)
# :index key → :pending (streaming in-progress)
# none → :called (DB-loaded; result is a separate message)
attr :tool_call, :map, required: true
defp tool_call_item(%{tool_call: tool_call} = assigns) do
state =
cond do
Map.has_key?(tool_call, :error) -> :error
Map.has_key?(tool_call, :result) -> :success
Map.has_key?(tool_call, :index) -> :pending
true -> :called
end
assigns =
assigns
|> assign(:_state, state)
|> assign(:_name, tool_call.name)
|> assign(:_arguments, tool_call[:arguments])
|> assign(:_result, tool_call[:result])
|> assign(:_error, tool_call[:error])
~H"<.tool_call_card
state={@_state}
name={@_name}
arguments={@_arguments}
result={@_result}
error={@_error}
/>"
end
attr :state, :atom, required: true
attr :name, :string, required: true
attr :arguments, :any, default: nil
attr :result, :any, default: nil
attr :error, :string, default: nil
defp tool_call_card(assigns) do
assigns =
assigns
|> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
|> assign(:_truncated, truncate_args(assigns.arguments))
|> assign(
:_result_str,
case assigns.result do
nil -> nil
s when is_binary(s) -> s
other -> inspect(other, pretty: true, limit: :infinity)
end
)
~H"""
<div
id={@_id}
class={[
"mb-1 #{max_width_class()} rounded-lg border text-xs font-mono overflow-hidden bg-seafoam-950/40",
@state == :error && "border-red-900/50",
@state == :called && "border-seafoam-900/60",
@state in [:pending, :success] && "border-seafoam-900"
]}
>
<div
class={[
"flex items-center gap-2 px-3 py-1.5 border-b text-seafoam-400",
@_truncated && "cursor-pointer select-none",
@state == :error && "border-red-900/50 bg-red-900/20",
@state == :called && "border-seafoam-900/60 bg-seafoam-900/20",
@state in [:pending, :success] && "border-seafoam-900 bg-seafoam-900/30"
]}
phx-click={
@_truncated &&
JS.toggle_class("hidden", to: "##{@_id}-args")
|> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
}
>
<.tool_call_icon />
<span class="text-seafoam-400 font-semibold shrink-0">{@name}</span>
<span :if={@_truncated} class="text-seafoam-500 truncate flex-1 min-w-0 ml-1">
<.json_display json={@_truncated} inline />
</span>
<span :if={!@_truncated} class="flex-1" />
<svg
:if={@_truncated}
id={"#{@_id}-chevron"}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-3 h-3 shrink-0 mx-1 text-seafoam-700 transition-transform duration-200"
>
<path
fill-rule="evenodd"
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
<span :if={@state == :called} class="flex items-center gap-1 text-seafoam-500/50 shrink-0">
<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>
<span :if={@state == :pending} class="flex items-center gap-1 text-seafoam-600 shrink-0">
<span class="w-1.5 h-1.5 rounded-full bg-seafoam-600 animate-pulse inline-block"></span>
<span class="text-[10px]">running</span>
</span>
<span :if={@state == :success} class="flex items-center gap-1 text-emerald-500 shrink-0">
<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>
<span :if={@state == :error} class="flex items-center gap-1 text-red-500 shrink-0">
<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>
<div id={"#{@_id}-args"} class="hidden">
<.tool_call_args arguments={@arguments} />
</div>
<div :if={@state == :success} class="px-3 py-2">
<div class="text-seafoam-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 :if={@state == :error} 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
defp truncate_args(nil), do: nil
defp truncate_args(""), do: nil
defp truncate_args(args) when is_binary(args) do
compact =
case Jason.decode(args) do
{:ok, decoded} -> Jason.encode!(decoded)
_ -> args
end
if String.length(compact) > 72, do: String.slice(compact, 0, 69) <> "\u2026", else: compact
end
defp truncate_args(args) do
compact = Jason.encode!(args)
if String.length(compact) > 72, do: String.slice(compact, 0, 69) <> "\u2026", else: compact
end
attr :arguments, :any, default: nil
defp tool_call_args(%{arguments: args} = assigns) when not is_nil(args) and args != "" do
~H"""
<div class="px-3 py-2 border-b border-seafoam-900/50">
<div class="text-seafoam-500 mb-1 uppercase tracking-wider text-[10px]">arguments</div>
<.json_display json={@arguments} />
</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

84
lib/elixir_ai_web/features/chat/chat_provider_display.ex Normal file
View File

@@ -0,0 +1,84 @@
defmodule ElixirAiWeb.ChatProviderDisplay do
use Phoenix.Component
alias Phoenix.LiveView.JS
attr :provider, :any, default: nil
attr :providers, :list, default: []
def chat_provider_display(assigns) do
~H"""
<div class="relative" id="provider-display">
<button
type="button"
phx-click={JS.toggle(to: "#provider-dropdown")}
class="flex items-center gap-2 text-xs min-w-0 cursor-pointer hover:opacity-80 transition-opacity"
>
<div class="flex items-center gap-1.5 px-2 py-1 rounded bg-seafoam-950/50 border border-seafoam-900/40 min-w-0 select-none">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-3 h-3 shrink-0 text-seafoam-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>
<%= if @provider do %>
<span class="text-seafoam-400 font-medium truncate">{@provider.name}</span>
<span class="text-seafoam-800">·</span>
<span class="text-seafoam-600 truncate">{@provider.model_name}</span>
<% else %>
<span class="text-seafoam-800 italic">No provider</span>
<% end %>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-2.5 h-2.5 text-seafoam-700 ml-0.5 shrink-0"
>
<path
fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</div>
</button>
<div
id="provider-dropdown"
class="hidden absolute right-0 top-full mt-1 z-50 min-w-max bg-gray-950 border border-seafoam-900/40 rounded shadow-xl overflow-hidden"
phx-click-away={JS.hide(to: "#provider-dropdown")}
>
<%= if @providers == [] do %>
<div class="px-3 py-2 text-xs text-gray-500 italic">No providers configured</div>
<% else %>
<%= for p <- @providers do %>
<button
type="button"
phx-click={
JS.hide(to: "#provider-dropdown")
|> JS.push("change_provider", value: %{id: p.id})
}
class={[
"flex flex-col px-3 py-2 text-left w-full text-xs hover:bg-seafoam-950/60 transition-colors",
if(@provider && @provider.name == p.name,
do: "text-seafoam-400",
else: "text-gray-300"
)
]}
>
<span class="font-medium">{p.name}</span>
<span class={
if @provider && @provider.name == p.name,
do: "text-seafoam-700",
else: "text-gray-500"
}>
{p.model_name}
</span>
</button>
<% end %>
<% end %>
</div>
</div>
"""
end
end

132
lib/elixir_ai_web/features/chat/json_display.ex Normal file
View File

@@ -0,0 +1,132 @@
defmodule ElixirAiWeb.JsonDisplay do
use Phoenix.Component
attr :json, :any, required: true
attr :class, :string, default: nil
attr :inline, :boolean, default: false
def json_display(%{json: json, inline: inline} = assigns) do
formatted =
case json do
nil ->
""
"" ->
""
s when is_binary(s) ->
case Jason.decode(s) do
{:ok, decoded} -> Jason.encode!(decoded, pretty: !inline)
_ -> s
end
other ->
Jason.encode!(other, pretty: !inline)
end
assigns = assign(assigns, :_highlighted, json_to_html(formatted))
~H"""
<pre
:if={!@inline}
class={["whitespace-pre-wrap break-all text-xs font-mono leading-relaxed", @class]}
><%= @_highlighted %></pre>
<span :if={@inline} class={["text-xs font-mono truncate", @class]}>{@_highlighted}</span>
"""
end
@token_colors %{
key: "text-sky-300",
string: "text-emerald-400/80",
keyword: "text-violet-400",
number: "text-orange-300/80",
colon: "text-seafoam-500/50",
punctuation: "text-seafoam-500/50",
quote: "text-seafoam-500/50"
}
# Converts a plain JSON string into a Phoenix.HTML.safe value with
# <span> tokens coloured by token type.
defp json_to_html(""), do: Phoenix.HTML.raw("")
defp json_to_html(str) do
# Capture groups (in order):
# 1 string literal "..."
# 2 keyword true | false | null
# 3 number -?digits with optional frac/exp
# 4 punctuation { } [ ] , :
# 5 whitespace spaces / newlines / tabs
# 6 fallback any other single char
token_re =
~r/(".(?:[^"\\]|\\.)*")|(true|false|null)|(-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?)|([{}\[\],:])|(\s+)|(.)/s
tokens = Regex.scan(token_re, str, capture: :all_but_first)
{parts, _, _} =
Enum.reduce(tokens, {[], :val, []}, fn groups, {acc, state, ctx} ->
[string_tok, keyword_tok, number_tok, punct_tok, whitespace_tok, fallback_tok] =
pad_groups(groups, 6)
cond do
string_tok != "" ->
{color, next_state} =
if state == :key,
do: {@token_colors.key, :after_key},
else: {@token_colors.string, :after_val}
content = string_tok |> String.slice(1..-2//1) |> html_escape()
quote_span = color_span(@token_colors.quote, "&quot;")
{[quote_span <> color_span(color, content) <> quote_span | acc], next_state, ctx}
keyword_tok != "" ->
{[color_span(@token_colors.keyword, keyword_tok) | acc], :after_val, ctx}
number_tok != "" ->
{[color_span(@token_colors.number, number_tok) | acc], :after_val, ctx}
punct_tok != "" ->
{next_state, next_ctx} = advance_state(punct_tok, state, ctx)
color = if punct_tok == ":", do: @token_colors.colon, else: @token_colors.punctuation
{[color_span(color, punct_tok) | acc], next_state, next_ctx}
whitespace_tok != "" ->
{[whitespace_tok | acc], state, ctx}
fallback_tok != "" ->
{[html_escape(fallback_tok) | acc], state, ctx}
true ->
{acc, state, ctx}
end
end)
Phoenix.HTML.raw(parts |> Enum.reverse() |> Enum.join())
end
# State transitions driven by punctuation tokens.
# State :key → we are about to read an object key.
# State :val → we are about to read a value.
# State :after_key / :after_val → consumed the token; awaiting : or ,.
defp advance_state("{", _, ctx), do: {:key, [:obj | ctx]}
defp advance_state("[", _, ctx), do: {:val, [:arr | ctx]}
defp advance_state("}", _, [_ | ctx]), do: {:after_val, ctx}
defp advance_state("}", _, []), do: {:after_val, []}
defp advance_state("]", _, [_ | ctx]), do: {:after_val, ctx}
defp advance_state("]", _, []), do: {:after_val, []}
defp advance_state(":", _, ctx), do: {:val, ctx}
defp advance_state(",", _, [:obj | _] = ctx), do: {:key, ctx}
defp advance_state(",", _, ctx), do: {:val, ctx}
defp advance_state(_, state, ctx), do: {state, ctx}
defp pad_groups(list, n), do: list ++ List.duplicate("", max(0, n - length(list)))
defp color_span(class, content), do: ~s|<span class="#{class}">#{content}</span>|
defp html_escape(str) do
str
|> String.replace("&", "&amp;")
|> String.replace("<", "&lt;")
|> String.replace(">", "&gt;")
end
end

183
lib/elixir_ai_web/features/chat/stream_handler.ex Normal file
View File

@@ -0,0 +1,183 @@
defmodule ElixirAi.ChatRunner.StreamHandler do
require Logger
import ElixirAi.ChatRunner.OutboundHelpers
def handle({:start_new_ai_response, id}, state) do
starting_response = %{id: id, reasoning_content: "", content: "", tool_calls: []}
broadcast_ui(state.name, {:start_ai_response_stream, starting_response})
{:noreply, %{state | streaming_response: starting_response}}
end
def handle({:ai_reasoning_chunk, _id, reasoning_content}, state) do
broadcast_ui(state.name, {:reasoning_chunk_content, reasoning_content})
{:noreply,
%{
state
| streaming_response: %{
state.streaming_response
| reasoning_content: state.streaming_response.reasoning_content <> reasoning_content
}
}}
end
def handle({:ai_text_chunk, _id, text_content}, state) do
broadcast_ui(state.name, {:text_chunk_content, text_content})
{:noreply,
%{
state
| streaming_response: %{
state.streaming_response
| content: state.streaming_response.content <> text_content
}
}}
end
def handle({:ai_text_stream_finish, _id}, state) do
Logger.info(
"AI stream finished for id #{state.streaming_response.id}, broadcasting end of AI response"
)
final_message = %{
role: :assistant,
content: state.streaming_response.content,
reasoning_content: state.streaming_response.reasoning_content,
tool_calls: state.streaming_response.tool_calls
}
broadcast_ui(state.name, {:end_ai_response, final_message})
store_message(state.name, final_message)
{:noreply,
%{
state
| streaming_response: nil,
messages: state.messages ++ [final_message]
}}
end
def handle(
{:ai_tool_call_start, _id, {tool_name, tool_args_start, tool_index, tool_call_id}},
state
) do
Logger.info("AI started tool call #{tool_name}")
new_streaming_response = %{
state.streaming_response
| tool_calls:
state.streaming_response.tool_calls ++
[
%{
name: tool_name,
arguments: tool_args_start,
index: tool_index,
id: tool_call_id
}
]
}
{:noreply, %{state | streaming_response: new_streaming_response}}
end
def handle({:ai_tool_call_middle, _id, {tool_args_diff, tool_index}}, state) do
new_streaming_response = %{
state.streaming_response
| tool_calls:
Enum.map(state.streaming_response.tool_calls, fn
%{arguments: existing_args, index: ^tool_index} = tool_call ->
%{tool_call | arguments: existing_args <> tool_args_diff}
other ->
other
end)
}
{:noreply, %{state | streaming_response: new_streaming_response}}
end
def handle({:ai_tool_call_end, id}, state) do
tool_request_message = %{
role: :assistant,
content: state.streaming_response.content,
reasoning_content: state.streaming_response.reasoning_content,
tool_calls: state.streaming_response.tool_calls
}
broadcast_ui(state.name, {:tool_request_message, tool_request_message})
{failed_call_messages, pending_call_ids} =
Enum.reduce(state.streaming_response.tool_calls, {[], []}, fn tool_call,
{failed, pending} ->
with {:ok, decoded_args} <- Jason.decode(tool_call.arguments),
tool when not is_nil(tool) <-
Enum.find(state.server_tools ++ state.liveview_tools ++ state.page_tools, fn t ->
t.name == tool_call.name
end) do
tool.run_function.(id, tool_call.id, decoded_args)
{failed, [tool_call.id | pending]}
else
{:error, e} ->
error_msg = "Failed to decode tool arguments: #{inspect(e)}"
Logger.error("Tool call #{tool_call.name} failed: #{error_msg}")
{[%{role: :tool, content: error_msg, tool_call_id: tool_call.id} | failed], pending}
nil ->
error_msg = "No tool definition found for #{tool_call.name}"
Logger.error(error_msg)
{[%{role: :tool, content: error_msg, tool_call_id: tool_call.id} | failed], pending}
end
end)
store_message(state.name, [tool_request_message] ++ failed_call_messages)
{:noreply,
%{
state
| messages: state.messages ++ [tool_request_message] ++ failed_call_messages,
pending_tool_calls: pending_call_ids
}}
end
def handle({:tool_response, _id, tool_call_id, result}, state) do
new_message = %{role: :tool, content: inspect(result), tool_call_id: tool_call_id}
broadcast_ui(state.name, {:one_tool_finished, new_message})
store_message(state.name, new_message)
new_pending_tool_calls =
Enum.filter(state.pending_tool_calls, fn id -> id != tool_call_id end)
new_streaming_response =
case new_pending_tool_calls do
[] -> nil
_ -> state.streaming_response
end
if new_pending_tool_calls == [] do
broadcast_ui(state.name, :tool_calls_finished)
ElixirAi.ChatUtils.request_ai_response(
self(),
messages_with_system_prompt(state.messages ++ [new_message], state.system_prompt),
state.server_tools ++ state.liveview_tools ++ state.page_tools,
state.provider,
state.tool_choice
)
end
{:noreply,
%{
state
| pending_tool_calls: new_pending_tool_calls,
streaming_response: new_streaming_response,
messages: state.messages ++ [new_message]
}}
end
def handle({:ai_request_error, reason}, state) do
Logger.error("AI request error: #{inspect(reason)}")
broadcast_ui(state.name, {:ai_request_error, reason})
{:noreply, %{state | streaming_response: nil, pending_tool_calls: []}}
end
end