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

working on colors
Some checks failed
CI/CD Pipeline / build (push) Failing after 4s
Details

Browse Source
This commit is contained in:
Alex Mickelson
2026-03-23 16:57:55 -06:00
parent c0b1e408bf
commit f514012396
2 changed files with 71 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/app.css
View File

@@ -10,17 +10,17 @@
@theme {
--color-brand: #fd4f00;
--color-seafoam-50: #ecfeff;
--color-seafoam-100: #cffafe;
--color-seafoam-200: #a5f3fc;
--color-seafoam-300: #67e8f9;
--color-seafoam-400: #22d3ee;
--color-seafoam-500: #06b6d4;
--color-seafoam-600: #0891b2;
--color-seafoam-700: #0e7490;
--color-seafoam-800: #155e75;
--color-seafoam-900: #164e63;
--color-seafoam-950: #083344;
--color-seafoam-50: hsl(183.16 90% 96.27%);
--color-seafoam-100: hsl(185.11 85.92% 90.39%);
--color-seafoam-200: hsl(186.21 83.55% 81.76%);
--color-seafoam-300: hsl(186.99 82.41% 69.02%);
--color-seafoam-400: hsl(187.94 75.71% 53.33%);
--color-seafoam-500: hsl(188.74 84.5% 42.75%);
--color-seafoam-600: hsl(191.65 81.4% 36.47%);
--color-seafoam-700: hsl(192.92 72.28% 30.98%);
--color-seafoam-800: hsl(194.38 59.57% 27.06%);
--color-seafoam-900: hsl(198.18 73.33% 17.65%);
--color-seafoam-950: hsl(198.26 58.97% 7.65%);
}
@variant phx-click-loading (&.phx-click-loading, .phx-click-loading &);

270
lib/elixir_ai_web/chat/chat_message.ex
View File

@@ -199,64 +199,72 @@ defmodule ElixirAiWeb.ChatMessage do
"""
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)
# 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) ->
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
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 called_tool_call(assigns) do
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 class={"mb-1 #{max_width_class()} rounded-lg border border-seafoam-900/60 bg-seafoam-950/40 text-xs font-mono overflow-hidden"}>
<div class="flex items-center gap-2 px-3 py-1.5 border-b border-seafoam-900/60 bg-seafoam-900/20 text-seafoam-400">
<div 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",
@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"
]}>
<.tool_call_icon />
<span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
<span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
@@ -286,7 +294,7 @@ defmodule ElixirAiWeb.ChatMessage do
/>
</svg>
</button>
<span class="flex items-center gap-1 text-seafoam-500/50 shrink-0">
<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"
@@ -301,117 +309,11 @@ defmodule ElixirAiWeb.ChatMessage do
</svg>
<span class="text-[10px]">called</span>
</span>
</div>
<div id={"#{@_id}-args"} class="hidden">
<.tool_call_args arguments={@arguments} />
</div>
</div>
"""
end
attr :name, :string, required: true
attr :arguments, :any, default: nil
defp pending_tool_call(assigns) do
assigns =
assigns
|> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
|> assign(:_truncated, truncate_args(assigns.arguments))
~H"""
<div class={"mb-1 #{max_width_class()} rounded-lg border border-seafoam-900 bg-seafoam-950/40 text-xs font-mono overflow-hidden"}>
<div class="flex items-center gap-2 px-3 py-1.5 border-b border-seafoam-900 bg-seafoam-900/30 text-seafoam-400">
<.tool_call_icon />
<span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
<span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
{@_truncated}
</span>
<span :if={!@_truncated} class="flex-1" />
<button
:if={@_truncated}
type="button"
phx-click={
JS.toggle_class("hidden", to: "##{@_id}-args")
|> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
}
class="shrink-0 text-seafoam-700 hover:text-seafoam-400 transition-colors mx-1"
>
<svg
id={"#{@_id}-chevron"}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-3 h-3 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>
</button>
<span class="flex items-center gap-1 text-seafoam-600 shrink-0">
<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>
</div>
<div id={"#{@_id}-args"} class="hidden">
<.tool_call_args arguments={@arguments} />
</div>
</div>
"""
end
attr :name, :string, required: true
attr :arguments, :any, default: nil
attr :result, :any, required: true
defp success_tool_call(assigns) do
assigns =
assigns
|> assign(
:result_str,
case assigns.result do
s when is_binary(s) -> s
other -> inspect(other, pretty: true, limit: :infinity)
end
)
|> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
|> assign(:_truncated, truncate_args(assigns.arguments))
~H"""
<div class={"mb-1 #{max_width_class()} rounded-lg border border-seafoam-900 bg-seafoam-950/40 text-xs font-mono overflow-hidden"}>
<div class="flex items-center gap-2 px-3 py-1.5 border-b border-seafoam-900 bg-seafoam-900/30 text-seafoam-400">
<.tool_call_icon />
<span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
<span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
{@_truncated}
</span>
<span :if={!@_truncated} class="flex-1" />
<button
:if={@_truncated}
type="button"
phx-click={
JS.toggle_class("hidden", to: "##{@_id}-args")
|> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
}
class="shrink-0 text-seafoam-700 hover:text-seafoam-400 transition-colors mx-1"
>
<svg
id={"#{@_id}-chevron"}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-3 h-3 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>
</button>
<span class="flex items-center gap-1 text-emerald-500 shrink-0">
<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"
@@ -426,61 +328,7 @@ defmodule ElixirAiWeb.ChatMessage do
</svg>
<span class="text-[10px]">done</span>
</span>
</div>
<div id={"#{@_id}-args"} class="hidden">
<.tool_call_args arguments={@arguments} />
</div>
<div 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>
"""
end
attr :name, :string, required: true
attr :arguments, :any, default: nil
attr :error, :string, required: true
defp error_tool_call(assigns) do
assigns =
assigns
|> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
|> assign(:_truncated, truncate_args(assigns.arguments))
~H"""
<div class={"mb-1 #{max_width_class()} rounded-lg border border-red-900/50 bg-seafoam-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-seafoam-400">
<.tool_call_icon />
<span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
<span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
{@_truncated}
</span>
<span :if={!@_truncated} class="flex-1" />
<button
:if={@_truncated}
type="button"
phx-click={
JS.toggle_class("hidden", to: "##{@_id}-args")
|> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
}
class="shrink-0 text-seafoam-700 hover:text-seafoam-400 transition-colors mx-1"
>
<svg
id={"#{@_id}-chevron"}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-3 h-3 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>
</button>
<span class="flex items-center gap-1 text-red-500 shrink-0">
<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"
@@ -495,7 +343,11 @@ defmodule ElixirAiWeb.ChatMessage do
<div id={"#{@_id}-args"} class="hidden">
<.tool_call_args arguments={@arguments} />
</div>
<div class="px-3 py-2 bg-red-950/20">
<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>
@@ -542,7 +394,7 @@ defmodule ElixirAiWeb.ChatMessage do
~H"""
<div class="px-3 py-2 border-b border-seafoam-900/50">
<div class="text-seafoam-700 mb-1 uppercase tracking-wider text-[10px]">arguments</div>
<div class="text-seafoam-500 mb-1 uppercase tracking-wider text-[10px]">arguments</div>
<pre class="text-seafoam-400 whitespace-pre-wrap break-all">{@pretty_args}</pre>
</div>
"""