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

docker compose dev environment
Some checks failed
CI/CD Pipeline / build (push) Failing after 4s
Details

Browse Source
This commit is contained in:
Alex Mickelson
2026-03-10 10:09:27 -06:00
parent d01ae816d2
commit b3619a145f
6 changed files with 211 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
assets/js/app.js
View File

@@ -15,27 +15,25 @@
// import "some-package" // import "some-package"
// //
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons. import "phoenix_html";
import "phoenix_html" import { Socket } from "phoenix";
// Establish Phoenix Socket and LiveView configuration. import { LiveSocket } from "phoenix_live_view";
import {Socket} from "phoenix" import topbar from "../vendor/topbar";
import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar"
let Hooks = {} let Hooks = {};
// Renders a complete markdown string client-side on mount. // Renders a complete markdown string client-side on mount.
// The raw markdown is passed as the data-md attribute. // The raw markdown is passed as the data-md attribute.
Hooks.MarkdownRender = { Hooks.MarkdownRender = {
mounted() { mounted() {
const smd = window.smd const smd = window.smd;
const content = this.el.dataset.md const content = this.el.dataset.md;
if (!content) return if (!content) return;
const parser = smd.parser(smd.default_renderer(this.el)) const parser = smd.parser(smd.default_renderer(this.el));
smd.parser_write(parser, content) smd.parser_write(parser, content);
smd.parser_end(parser) smd.parser_end(parser);
} },
} };
// Streams markdown chunks into the element using the streaming-markdown parser. // Streams markdown chunks into the element using the streaming-markdown parser.
// The server sends push_event(socket, eventName, %{chunk: "..."}) for each chunk. // The server sends push_event(socket, eventName, %{chunk: "..."}) for each chunk.
@@ -44,82 +42,78 @@ Hooks.MarkdownRender = {
// data-event on the element controls which event this hook listens for. // data-event on the element controls which event this hook listens for.
Hooks.MarkdownStream = { Hooks.MarkdownStream = {
mounted() { mounted() {
const smd = window.smd const smd = window.smd;
const DOMPurify = window.DOMPurify const DOMPurify = window.DOMPurify;
this._chunks = "" this._chunks = "";
this._parser = smd.parser(smd.default_renderer(this.el)) this._parser = smd.parser(smd.default_renderer(this.el));
const eventName = this.el.dataset.event const eventName = this.el.dataset.event;
this.handleEvent(eventName, ({chunk}) => { this.handleEvent(eventName, ({ chunk }) => {
this._chunks += chunk this._chunks += chunk;
// Sanitize all accumulated chunks to detect injection attacks. // Sanitize all accumulated chunks to detect injection attacks.
DOMPurify.sanitize(this._chunks) DOMPurify.sanitize(this._chunks);
if (DOMPurify.removed.length > 0) { if (DOMPurify.removed.length > 0) {
// Insecure content detected — stop rendering immediately. // Insecure content detected — stop rendering immediately.
smd.parser_end(this._parser) smd.parser_end(this._parser);
this._parser = null this._parser = null;
return return;
} }
if (this._parser) smd.parser_write(this._parser, chunk) if (this._parser) smd.parser_write(this._parser, chunk);
}) });
}, },
destroyed() { destroyed() {
if (this._parser) { if (this._parser) {
window.smd.parser_end(this._parser) window.smd.parser_end(this._parser);
this._parser = null this._parser = null;
} }
} },
} };
Hooks.ScrollBottom = { Hooks.ScrollBottom = {
mounted() { mounted() {
requestAnimationFrame(() => this.scrollToBottom()) requestAnimationFrame(() => this.scrollToBottom());
this.observer = new MutationObserver(() => { this.observer = new MutationObserver(() => {
if (this.isNearBottom()) this.scrollToBottom() if (this.isNearBottom()) this.scrollToBottom();
}) });
this.observer.observe(this.el, {childList: true, subtree: true}) this.observer.observe(this.el, { childList: true, subtree: true });
this.handleEvent("scroll_to_bottom", () => { this.handleEvent("scroll_to_bottom", () => {
this.scrollToBottom() this.scrollToBottom();
}) });
}, },
updated() { updated() {
if (this.isNearBottom()) this.scrollToBottom() if (this.isNearBottom()) this.scrollToBottom();
}, },
destroyed() { destroyed() {
this.observer.disconnect() this.observer.disconnect();
}, },
isNearBottom() { isNearBottom() {
const closeToBottomThreshold = 200 const closeToBottomThreshold = 200;
return this.el.scrollHeight - this.el.scrollTop - this.el.clientHeight <= closeToBottomThreshold return (
this.el.scrollHeight - this.el.scrollTop - this.el.clientHeight <=
closeToBottomThreshold
);
}, },
scrollToBottom() { scrollToBottom() {
this.el.scrollTop = this.el.scrollHeight this.el.scrollTop = this.el.scrollHeight;
} },
} };
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") let csrfToken = document
.querySelector("meta[name='csrf-token']")
.getAttribute("content");
// Retry very aggressively: 100ms, 250ms, 500ms, then cap at 1s indefinitely. const reconnectAfterMs = (tries) => [100, 250, 500][tries - 1] || 1000;
const reconnectAfterMs = (tries) => [100, 250, 500][tries - 1] || 1000 const rejoinAfterMs = (tries) => [100, 250, 500][tries - 1] || 1000;
const rejoinAfterMs = (tries) => [100, 250, 500][tries - 1] || 1000
let liveSocket = new LiveSocket("/live", Socket, { let liveSocket = new LiveSocket("/live", Socket, {
params: {_csrf_token: csrfToken}, params: { _csrf_token: csrfToken },
hooks: Hooks, hooks: Hooks,
reconnectAfterMs, reconnectAfterMs,
rejoinAfterMs rejoinAfterMs,
}) });
// Show progress bar on live navigation and form submits topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"}) window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
window.addEventListener("phx:page-loading-start", _info => topbar.show(300)) window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
// connect if there are any LiveViews on the page
liveSocket.connect()
// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
liveSocket.connect();
window.liveSocket = liveSocket;

5
config/dev.exs
View File

@@ -16,9 +16,7 @@ config :elixir_ai, ElixirAi.Repo,
# watchers to your application. For example, we can use it # watchers to your application. For example, we can use it
# to bundle .js and .css sources. # to bundle .js and .css sources.
config :elixir_ai, ElixirAiWeb.Endpoint, config :elixir_ai, ElixirAiWeb.Endpoint,
# Binding to loopback ipv4 address prevents access from other machines. http: [ip: {0, 0, 0, 0}, port: 4000],
# Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
http: [ip: {127, 0, 0, 1}, port: 4000],
check_origin: false, check_origin: false,
code_reloader: true, code_reloader: true,
debug_errors: true, debug_errors: true,
@@ -28,7 +26,6 @@ config :elixir_ai, ElixirAiWeb.Endpoint,
tailwind: {Tailwind, :install_and_run, [:elixir_ai, ~w(--watch)]} tailwind: {Tailwind, :install_and_run, [:elixir_ai, ~w(--watch)]}
] ]
# Watch static and templates for browser reloading. # Watch static and templates for browser reloading.
config :elixir_ai, ElixirAiWeb.Endpoint, config :elixir_ai, ElixirAiWeb.Endpoint,
live_reload: [ live_reload: [

9
config/runtime.exs
View File

@@ -28,6 +28,15 @@ if System.get_env("PHX_SERVER") do
config :elixir_ai, ElixirAiWeb.Endpoint, server: true config :elixir_ai, ElixirAiWeb.Endpoint, server: true
end end
# In dev mode, if DATABASE_URL is set (e.g., in Docker), use it instead of defaults
if config_env() == :dev do
if database_url = System.get_env("DATABASE_URL") do
config :elixir_ai, ElixirAi.Repo,
url: database_url,
pool_size: String.to_integer(System.get_env("POOL_SIZE") || "10")
end
end
if config_env() == :prod do if config_env() == :prod do
secret_key_base = secret_key_base =
System.get_env("SECRET_KEY_BASE") || System.get_env("SECRET_KEY_BASE") ||

17
dev.Dockerfile Normal file
View File

@@ -0,0 +1,17 @@
FROM elixir:1.19.5-otp-28-alpine
RUN apk add --no-cache build-base git bash wget nodejs npm inotify-tools
WORKDIR /app
ENV USER="elixir"
RUN addgroup -g 1000 $USER && \
adduser -D -u 1000 -G $USER $USER
RUN mkdir -p /app/_build && \
chown -R elixir:elixir /app
USER elixir
RUN mix local.hex --force && \
mix local.rebar --force

50
docker-compose.yml
View File

@@ -18,39 +18,83 @@ services:
retries: 10 retries: 10
node1: node1:
build: . build:
context: .
dockerfile: dev.Dockerfile
container_name: node1
hostname: node1 hostname: node1
env_file: .env env_file: .env
environment: environment:
DATABASE_URL: ecto://elixir_ai:elixir_ai@db/elixir_ai_dev DATABASE_URL: ecto://elixir_ai:elixir_ai@db/elixir_ai_dev
PHX_HOST: localhost PHX_HOST: localhost
PHX_SERVER: "true"
PORT: 4000 PORT: 4000
MIX_ENV: dev
RELEASE_NODE: elixir_ai@node1 RELEASE_NODE: elixir_ai@node1
RELEASE_COOKIE: secret_cluster_cookie RELEASE_COOKIE: secret_cluster_cookie
SECRET_KEY_BASE: F1nY5uSyD0HfoWejcuuQiaQoMQrjrlFigb3bJ7p4hTXwpTza6sPLpmd+jLS7p0Sh SECRET_KEY_BASE: F1nY5uSyD0HfoWejcuuQiaQoMQrjrlFigb3bJ7p4hTXwpTza6sPLpmd+jLS7p0Sh
user: root
command: |
sh -c '
chown -R elixir:elixir /app/_build
chown -R elixir:elixir /app/deps
su elixir -c "elixir --sname elixir_ai@node1 --cookie secret_cluster_cookie -S mix phx.server"
'
volumes:
- .:/app
- /app/_build
ports:
- "4001:4000"
depends_on: depends_on:
db: db:
condition: service_healthy condition: service_healthy
healthcheck:
test: ["CMD", "wget", "-qO-", "http://localhost:4000/health"]
interval: 10s
timeout: 5s
retries: 5
node2: node2:
build: . build:
context: .
dockerfile: dev.Dockerfile
container_name: node2
hostname: node2 hostname: node2
env_file: .env env_file: .env
environment: environment:
DATABASE_URL: ecto://elixir_ai:elixir_ai@db/elixir_ai_dev DATABASE_URL: ecto://elixir_ai:elixir_ai@db/elixir_ai_dev
PHX_HOST: localhost PHX_HOST: localhost
PHX_SERVER: "true"
PORT: 4000 PORT: 4000
MIX_ENV: dev
RELEASE_NODE: elixir_ai@node2 RELEASE_NODE: elixir_ai@node2
RELEASE_COOKIE: secret_cluster_cookie RELEASE_COOKIE: secret_cluster_cookie
SECRET_KEY_BASE: F1nY5uSyD0HfoWejcuuQiaQoMQrjrlFigb3bJ7p4hTXwpTza6sPLpmd+jLS7p0Sh SECRET_KEY_BASE: F1nY5uSyD0HfoWejcuuQiaQoMQrjrlFigb3bJ7p4hTXwpTza6sPLpmd+jLS7p0Sh
user: root
command: |
sh -c '
chown -R elixir:elixir /app/_build
chown -R elixir:elixir /app/deps
su elixir -c "elixir --sname elixir_ai@node2 --cookie secret_cluster_cookie -S mix phx.server"
'
volumes:
- .:/app
- /app/_build
ports:
- "4002:4000"
depends_on: depends_on:
db: db:
condition: service_healthy condition: service_healthy
healthcheck:
test: ["CMD", "wget", "-qO-", "http://localhost:4000/health"]
interval: 10s
timeout: 5s
retries: 5
nginx: nginx:
image: nginx:alpine image: nginx:alpine
ports: ports:
- "80:80" - "8080:80"
volumes: volumes:
- ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf:ro - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf:ro
depends_on: depends_on:

107
lib/elixir_ai_web/components/chat_message.ex
View File

@@ -2,15 +2,26 @@ defmodule ElixirAiWeb.ChatMessage do
use Phoenix.Component use Phoenix.Component
alias Phoenix.LiveView.JS alias Phoenix.LiveView.JS
defp max_width_class, do: "max-w-300"
attr :content, :string, required: true attr :content, :string, required: true
attr :tool_call_id, :string, required: true attr :tool_call_id, :string, required: true
def tool_result_message(assigns) do def tool_result_message(assigns) do
~H""" ~H"""
<div class="mb-1 max-w-prose rounded-lg border border-cyan-900/40 bg-cyan-950/20 text-xs font-mono overflow-hidden"> <div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900/40 bg-cyan-950/20 text-xs font-mono overflow-hidden"}>
<div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900/40 bg-cyan-900/10 text-cyan-600"> <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900/40 bg-cyan-900/10 text-cyan-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3 shrink-0"> <svg
<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" /> 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> </svg>
<span class="text-cyan-600/70 flex-1 truncate">tool result</span> <span class="text-cyan-600/70 flex-1 truncate">tool result</span>
<span class="text-cyan-800 text-[10px] truncate max-w-[12rem]">{@tool_call_id}</span> <span class="text-cyan-800 text-[10px] truncate max-w-[12rem]">{@tool_call_id}</span>
@@ -27,7 +38,7 @@ defmodule ElixirAiWeb.ChatMessage do
def user_message(assigns) do def user_message(assigns) do
~H""" ~H"""
<div class="mb-2 text-sm text-right"> <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"> <div class={"inline-block px-3 py-2 rounded-lg bg-cyan-950 text-cyan-50 #{max_width_class()} text-left"}>
{@content} {@content}
</div> </div>
</div> </div>
@@ -41,7 +52,10 @@ defmodule ElixirAiWeb.ChatMessage do
def assistant_message(assigns) do def assistant_message(assigns) do
assigns = assigns =
assigns assigns
|> assign(:_reasoning_id, "reasoning-#{:erlang.phash2({assigns.content, assigns.reasoning_content, assigns.tool_calls})}") |> assign(
:_reasoning_id,
"reasoning-#{:erlang.phash2({assigns.content, assigns.reasoning_content, assigns.tool_calls})}"
)
|> assign(:_expanded, false) |> assign(:_expanded, false)
~H""" ~H"""
@@ -101,8 +115,9 @@ defmodule ElixirAiWeb.ChatMessage do
phx-hook="MarkdownStream" phx-hook="MarkdownStream"
phx-update="ignore" phx-update="ignore"
data-event="reasoning_chunk" data-event="reasoning_chunk"
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" class={"reasoning-content block px-3 py-2 rounded-lg bg-cyan-950/50 text-cyan-400 italic text-xs #{max_width_class()} mb-1 markdown"}
></div> >
</div>
</div> </div>
<%= for tool_call <- @tool_calls do %> <%= for tool_call <- @tool_calls do %>
<.tool_call_item tool_call={tool_call} /> <.tool_call_item tool_call={tool_call} />
@@ -112,8 +127,9 @@ defmodule ElixirAiWeb.ChatMessage do
phx-hook="MarkdownStream" phx-hook="MarkdownStream"
phx-update="ignore" phx-update="ignore"
data-event="md_chunk" data-event="md_chunk"
class="inline-block px-3 py-2 rounded-lg max-w-prose markdown bg-cyan-950/50" class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-cyan-950/50"}
></div> >
</div>
</div> </div>
""" """
end end
@@ -160,10 +176,11 @@ defmodule ElixirAiWeb.ChatMessage do
phx-update="ignore" phx-update="ignore"
data-md={@reasoning_content} data-md={@reasoning_content}
class={[ 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", "reasoning-content block px-3 py-2 rounded-lg bg-cyan-950/50 text-cyan-400 italic text-xs #{max_width_class()} mb-1 markdown",
!@expanded && "collapsed" !@expanded && "collapsed"
]} ]}
></div> >
</div>
<% end %> <% end %>
<%= for tool_call <- @tool_calls do %> <%= for tool_call <- @tool_calls do %>
<.tool_call_item tool_call={tool_call} /> <.tool_call_item tool_call={tool_call} />
@@ -174,8 +191,9 @@ defmodule ElixirAiWeb.ChatMessage do
phx-hook="MarkdownRender" phx-hook="MarkdownRender"
phx-update="ignore" phx-update="ignore"
data-md={@content} data-md={@content}
class="inline-block px-3 py-2 rounded-lg max-w-prose markdown bg-cyan-950/50" class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-cyan-950/50"}
></div> >
</div>
<% end %> <% end %>
</div> </div>
""" """
@@ -219,7 +237,7 @@ defmodule ElixirAiWeb.ChatMessage do
defp pending_tool_call(assigns) do defp pending_tool_call(assigns) do
~H""" ~H"""
<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={"mb-1 #{max_width_class()} 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.5 border-b border-cyan-900 bg-cyan-900/30 text-cyan-400"> <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900 bg-cyan-900/30 text-cyan-400">
<.tool_call_icon /> <.tool_call_icon />
<span class="text-cyan-300 font-semibold flex-1">{@name}</span> <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
@@ -239,19 +257,32 @@ defmodule ElixirAiWeb.ChatMessage do
defp success_tool_call(assigns) do defp success_tool_call(assigns) do
assigns = assigns =
assign(assigns, :result_str, case assigns.result do assign(
s when is_binary(s) -> s assigns,
other -> inspect(other, pretty: true, limit: :infinity) :result_str,
end) case assigns.result do
s when is_binary(s) -> s
other -> inspect(other, pretty: true, limit: :infinity)
end
)
~H""" ~H"""
<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={"mb-1 #{max_width_class()} 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.5 border-b border-cyan-900 bg-cyan-900/30 text-cyan-400"> <div class="flex items-center gap-2 px-3 py-1.5 border-b border-cyan-900 bg-cyan-900/30 text-cyan-400">
<.tool_call_icon /> <.tool_call_icon />
<span class="text-cyan-300 font-semibold flex-1">{@name}</span> <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
<span class="flex items-center gap-1 text-emerald-500"> <span class="flex items-center gap-1 text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3"> <svg
<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" /> 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> </svg>
<span class="text-[10px]">done</span> <span class="text-[10px]">done</span>
</span> </span>
@@ -271,12 +302,17 @@ defmodule ElixirAiWeb.ChatMessage do
defp error_tool_call(assigns) do defp error_tool_call(assigns) do
~H""" ~H"""
<div class="mb-1 max-w-prose rounded-lg border border-red-900/50 bg-cyan-950/40 text-xs font-mono overflow-hidden"> <div class={"mb-1 #{max_width_class()} rounded-lg border border-red-900/50 bg-cyan-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-cyan-400"> <div class="flex items-center gap-2 px-3 py-1.5 border-b border-red-900/50 bg-red-900/20 text-cyan-400">
<.tool_call_icon /> <.tool_call_icon />
<span class="text-cyan-300 font-semibold flex-1">{@name}</span> <span class="text-cyan-300 font-semibold flex-1">{@name}</span>
<span class="flex items-center gap-1 text-red-500"> <span class="flex items-center gap-1 text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3"> <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" /> <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> </svg>
<span class="text-[10px]">error</span> <span class="text-[10px]">error</span>
@@ -295,10 +331,14 @@ defmodule ElixirAiWeb.ChatMessage do
defp tool_call_args(%{arguments: args} = assigns) when args != "" do defp tool_call_args(%{arguments: args} = assigns) when args != "" do
assigns = assigns =
assign(assigns, :pretty_args, case Jason.decode(args) do assign(
{:ok, decoded} -> Jason.encode!(decoded, pretty: true) assigns,
_ -> args :pretty_args,
end) case Jason.decode(args) do
{:ok, decoded} -> Jason.encode!(decoded, pretty: true)
_ -> args
end
)
~H""" ~H"""
<div class="px-3 py-2 border-b border-cyan-900/50"> <div class="px-3 py-2 border-b border-cyan-900/50">
@@ -312,8 +352,17 @@ defmodule ElixirAiWeb.ChatMessage do
defp tool_call_icon(assigns) do defp tool_call_icon(assigns) do
~H""" ~H"""
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3 shrink-0"> <svg
<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" /> 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> </svg>
""" """
end end