140 lines
5.0 KiB
Elixir
140 lines
5.0 KiB
Elixir
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
|
|
attr :tool_calls, :list, default: []
|
|
|
|
def assistant_message(assigns) do
|
|
assigns =
|
|
assigns
|
|
|> assign(:_reasoning_id, "reasoning-#{:erlang.phash2(assigns.content)}")
|
|
|> 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: []
|
|
|
|
def streaming_assistant_message(assigns) do
|
|
assigns =
|
|
assigns
|
|
|> assign(:_reasoning_id, "reasoning-stream")
|
|
|> assign(:_expanded, true)
|
|
|
|
~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: []
|
|
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}
|
|
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",
|
|
!@expanded && "collapsed"
|
|
]}
|
|
>
|
|
{Markdown.render(@reasoning_content)}
|
|
</div>
|
|
<% end %>
|
|
<%= for tool_call <- @tool_calls do %>
|
|
<div class="mb-1 max-w-prose 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 border-b border-cyan-900 bg-cyan-900/30 text-cyan-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3">
|
|
<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>
|
|
<span class="text-cyan-300 font-semibold">{tool_call.name}</span>
|
|
</div>
|
|
<%= if tool_call[:arguments] && tool_call[:arguments] != "" do %>
|
|
<div class="px-3 py-2 text-cyan-500 border-b border-cyan-900/50">
|
|
<span class="text-cyan-700 mr-1">args</span>{tool_call.arguments}
|
|
</div>
|
|
<% end %>
|
|
<%= if Map.has_key?(tool_call, :result) do %>
|
|
<div class="px-3 py-2 text-cyan-200">
|
|
<span class="text-cyan-700 mr-1">result</span>{inspect(tool_call.result)}
|
|
</div>
|
|
<% end %>
|
|
<%= if Map.has_key?(tool_call, :error) do %>
|
|
<div class="px-3 py-2 text-red-400">
|
|
<span class="text-red-600 mr-1">error</span>{tool_call.error}
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<%= if @content && @content != "" do %>
|
|
<div class="inline-block px-3 py-2 rounded-lg max-w-prose markdown bg-cyan-950/50">
|
|
{Markdown.render(@content)}
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|