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

seafoam color migration started
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:38:51 -06:00
parent 10d6583a67
commit c0b1e408bf
14 changed files with 309 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
assets/css/app.css
View File

@@ -3,10 +3,24 @@
@source "../js/**/*.js"; @source "../js/**/*.js";
@source "../../lib/elixir_ai_web.ex"; @source "../../lib/elixir_ai_web.ex";
@source "../../lib/elixir_ai_web/**/*.*ex"; @source "../../lib/elixir_ai_web/**/*.*ex";
@source inline("{bg-seafoam-950/30,bg-red-950/30,bg-green-950/30,bg-blue-950/30,bg-yellow-950/30,bg-purple-950/30,bg-pink-950/30}");
@plugin "@tailwindcss/forms"; @plugin "@tailwindcss/forms";
@plugin "../heroicons_plugin.js"; @plugin "../heroicons_plugin.js";
@theme { @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;
} }
@variant phx-click-loading (&.phx-click-loading, .phx-click-loading &); @variant phx-click-loading (&.phx-click-loading, .phx-click-loading &);
@@ -17,7 +31,7 @@
/* Form Elements */ /* Form Elements */
label { label {
@apply block text-sm font-medium text-cyan-300 mb-1; @apply block text-sm font-medium text-seafoam-300 mb-1;
} }
input[type="text"], input[type="text"],
@@ -29,11 +43,11 @@ input[type="url"],
textarea, textarea,
select { select {
@apply w-full rounded-md px-3 py-2 text-sm @apply w-full rounded-md px-3 py-2 text-sm
bg-cyan-950 text-cyan-50 placeholder-cyan-600 bg-seafoam-950 text-seafoam-50 placeholder-seafoam-600
border border-cyan-800 border border-seafoam-800
outline-none outline-none
transition-colors duration-150 transition-colors duration-150
focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500; focus:border-seafoam-500 focus:ring-1 focus:ring-seafoam-500;
} }
textarea { textarea {
@@ -43,19 +57,19 @@ textarea {
button[type="submit"], button[type="submit"],
input[type="submit"] { input[type="submit"] {
@apply px-4 py-2 rounded-md text-sm font-medium @apply px-4 py-2 rounded-md text-sm font-medium
bg-cyan-600 text-white bg-seafoam-600 text-white
border border-cyan-500 border border-seafoam-500
transition-colors duration-150 transition-colors duration-150
hover:bg-cyan-500 hover:bg-seafoam-500
disabled:opacity-40 disabled:cursor-not-allowed; disabled:opacity-40 disabled:cursor-not-allowed;
} }
fieldset { fieldset {
@apply border border-cyan-800 rounded-md px-4 py-3; @apply border border-seafoam-800 rounded-md px-4 py-3;
} }
legend { legend {
@apply text-sm font-semibold text-cyan-400 px-1; @apply text-sm font-semibold text-seafoam-400 px-1;
} }
button { button {
@@ -72,8 +86,3 @@ button {
.reasoning-content.collapsed { .reasoning-content.collapsed {
@apply opacity-0 max-h-0 pt-0 pb-0 mb-0; @apply opacity-0 max-h-0 pt-0 pb-0 mb-0;
} }

46
assets/css/markdown.css
View File

@@ -1,7 +1,7 @@
/* Rendered Markdown */ /* Rendered Markdown */
.markdown { .markdown {
@apply text-cyan-50 leading-7 text-base; @apply text-seafoam-50 leading-7 text-base;
} }
/* Headings */ /* Headings */
@@ -11,26 +11,26 @@
.markdown h4, .markdown h4,
.markdown h5, .markdown h5,
.markdown h6 { .markdown h6 {
@apply font-semibold text-cyan-300 mt-6 mb-2 leading-tight; @apply font-semibold text-seafoam-300 mt-6 mb-2 leading-tight;
} }
.markdown h1 { .markdown h1 {
@apply text-3xl border-b border-cyan-900 pb-1; @apply text-3xl border-b border-seafoam-900 pb-1;
} }
.markdown h2 { .markdown h2 {
@apply text-2xl border-b border-cyan-900 pb-1; @apply text-2xl border-b border-seafoam-900 pb-1;
} }
.markdown h3 { .markdown h3 {
@apply text-xl text-cyan-200; @apply text-xl text-seafoam-200;
} }
.markdown h4 { .markdown h4 {
@apply text-lg text-cyan-200; @apply text-lg text-seafoam-200;
} }
.markdown h5 { .markdown h5 {
@apply text-base text-cyan-100; @apply text-base text-seafoam-100;
} }
.markdown h6 { .markdown h6 {
@apply text-sm text-cyan-100; @apply text-sm text-seafoam-100;
} }
.markdown p { .markdown p {
@@ -38,33 +38,33 @@
} }
.markdown a { .markdown a {
@apply text-cyan-400 underline underline-offset-2 transition-colors duration-150 hover:text-cyan-300; @apply text-seafoam-400 underline underline-offset-2 transition-colors duration-150 hover:text-seafoam-300;
} }
.markdown strong { .markdown strong {
@apply font-bold text-cyan-100; @apply font-bold text-seafoam-100;
} }
.markdown em { .markdown em {
@apply italic text-cyan-200; @apply italic text-seafoam-200;
} }
.markdown code { .markdown code {
@apply font-mono text-sm bg-cyan-950 text-cyan-300 px-1 py-0.5 rounded border border-cyan-900; @apply font-mono text-sm bg-seafoam-950 text-seafoam-300 px-1 py-0.5 rounded border border-seafoam-900;
} }
.markdown pre { .markdown pre {
@apply bg-cyan-950 border border-cyan-900 rounded-lg px-5 py-4 overflow-x-auto my-4; @apply bg-seafoam-950 border border-seafoam-900 rounded-lg px-5 py-4 overflow-x-auto my-4;
} }
.markdown pre code { .markdown pre code {
@apply bg-transparent border-0 p-0 text-sm text-cyan-100; @apply bg-transparent border-0 p-0 text-sm text-seafoam-100;
} }
.markdown blockquote { .markdown blockquote {
@apply border-l-2 border-cyan-700 my-4 px-4 py-2 bg-cyan-950 text-cyan-200 rounded-r italic; @apply border-l-2 border-seafoam-700 my-4 px-4 py-2 bg-seafoam-950 text-seafoam-200 rounded-r italic;
} }
.markdown hr { .markdown hr {
@apply border-0 border-t border-cyan-900 my-6; @apply border-0 border-t border-seafoam-900 my-6;
} }
.markdown ul, .markdown ul,
.markdown ol { .markdown ol {
@@ -80,7 +80,7 @@
@apply my-1; @apply my-1;
} }
.markdown li::marker { .markdown li::marker {
@apply text-cyan-700; @apply text-seafoam-700;
} }
.markdown ul ul, .markdown ul ul,
@@ -95,22 +95,22 @@
@apply block w-full border-collapse my-4 text-sm overflow-x-auto; @apply block w-full border-collapse my-4 text-sm overflow-x-auto;
} }
.markdown thead { .markdown thead {
@apply bg-cyan-950; @apply bg-seafoam-950;
} }
.markdown th { .markdown th {
@apply text-left px-3 py-2 text-cyan-300 font-semibold border-b-2 border-cyan-700; @apply text-left px-3 py-2 text-seafoam-300 font-semibold border-b-2 border-seafoam-700;
} }
.markdown td { .markdown td {
@apply px-3 py-2 border-b border-cyan-900 text-cyan-100; @apply px-3 py-2 border-b border-seafoam-900 text-seafoam-100;
} }
.markdown tbody tr:hover { .markdown tbody tr:hover {
@apply bg-cyan-950; @apply bg-seafoam-950;
} }
.markdown img { .markdown img {
@apply max-w-full rounded-md border border-cyan-900 my-2; @apply max-w-full rounded-md border border-seafoam-900 my-2;
} }
.markdown input[type="checkbox"] { .markdown input[type="checkbox"] {
@apply accent-cyan-700 mr-1; @apply accent-seafoam-700 mr-1;
} }

104
assets/tailwind.config.js
View File

@@ -1,104 +0,0 @@
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
const plugin = require("tailwindcss/plugin");
const fs = require("fs");
const path = require("path");
module.exports = {
content: [
"./js/**/*.js",
"../lib/elixir_ai_web.ex",
"../lib/elixir_ai_web/**/*.*ex",
],
safelist: [
"bg-cyan-950/30",
"bg-red-950/30",
"bg-green-950/30",
"bg-blue-950/30",
"bg-yellow-950/30",
"bg-purple-950/30",
"bg-pink-950/30",
],
theme: {
extend: {
colors: {
brand: "#FD4F00",
},
},
},
plugins: [
require("@tailwindcss/forms"),
// Allows prefixing tailwind classes with LiveView classes to add rules
// only when LiveView classes are applied, for example:
//
// <div class="phx-click-loading:animate-ping">
//
plugin(({ addVariant }) =>
addVariant("phx-click-loading", [
".phx-click-loading&",
".phx-click-loading &",
]),
),
plugin(({ addVariant }) =>
addVariant("phx-submit-loading", [
".phx-submit-loading&",
".phx-submit-loading &",
]),
),
plugin(({ addVariant }) =>
addVariant("phx-change-loading", [
".phx-change-loading&",
".phx-change-loading &",
]),
),
// Embeds Heroicons (https://heroicons.com) into your app.css bundle
// See your `CoreComponents.icon/1` for more information.
//
plugin(function ({ matchComponents, theme }) {
let iconsDir = path.join(__dirname, "../deps/heroicons/optimized");
let values = {};
let icons = [
["", "/24/outline"],
["-solid", "/24/solid"],
["-mini", "/20/solid"],
["-micro", "/16/solid"],
];
icons.forEach(([suffix, dir]) => {
fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
let name = path.basename(file, ".svg") + suffix;
values[name] = { name, fullPath: path.join(iconsDir, dir, file) };
});
});
matchComponents(
{
hero: ({ name, fullPath }) => {
let content = fs
.readFileSync(fullPath)
.toString()
.replace(/\r?\n|\r/g, "");
let size = theme("spacing.6");
if (name.endsWith("-mini")) {
size = theme("spacing.5");
} else if (name.endsWith("-micro")) {
size = theme("spacing.4");
}
return {
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
"-webkit-mask": `var(--hero-${name})`,
mask: `var(--hero-${name})`,
"mask-repeat": "no-repeat",
"background-color": "currentColor",
"vertical-align": "middle",
display: "inline-block",
width: size,
height: size,
};
},
},
{ values },
);
}),
],
};

2
config/config.exs
View File

@@ -25,7 +25,7 @@ config :esbuild,
] ]
config :tailwind, config :tailwind,
version: "4.0.9", version: "4.2.2",
elixir_ai: [ elixir_ai: [
args: ~w( args: ~w(
--input=css/app.css --input=css/app.css

2
lib/elixir_ai/ai_tools.ex
View File

@@ -83,7 +83,7 @@ defmodule ElixirAi.AiTools do
"color" => %{ "color" => %{
"type" => "string", "type" => "string",
"enum" => [ "enum" => [
"bg-cyan-950/30", "bg-seafoam-950/30",
"bg-red-950/30", "bg-red-950/30",
"bg-green-950/30", "bg-green-950/30",
"bg-blue-950/30", "bg-blue-950/30",

34
lib/elixir_ai_web/admin/admin_live.ex
View File

@@ -108,7 +108,7 @@ defmodule ElixirAiWeb.AdminLive do
def render(assigns) do def render(assigns) do
~H""" ~H"""
<div class="p-6 space-y-4"> <div class="p-6 space-y-4">
<h1 class="text-lg font-semibold text-cyan-200 tracking-wide">Cluster Admin</h1> <h1 class="text-lg font-semibold text-seafoam-200 tracking-wide">Cluster Admin</h1>
<div class="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3"> <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
<%= for {node, status} <- @cluster_info.nodes do %> <%= for {node, status} <- @cluster_info.nodes do %>
@@ -121,12 +121,12 @@ defmodule ElixirAiWeb.AdminLive do
|> Enum.filter(fn {_, n} -> n == node end) |> Enum.filter(fn {_, n} -> n == node end)
|> Enum.group_by(fn {view, _} -> view end) %> |> Enum.group_by(fn {view, _} -> view end) %>
<div class="rounded-lg border border-cyan-800/50 bg-cyan-950/30 overflow-hidden"> <div class="rounded-lg border border-seafoam-800/50 bg-seafoam-950/30 overflow-hidden">
<div class="flex items-center justify-between px-4 py-3 bg-cyan-900/40 border-b border-cyan-800/50"> <div class="flex items-center justify-between px-4 py-3 bg-seafoam-900/40 border-b border-seafoam-800/50">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="font-mono text-sm font-semibold text-cyan-200">{node}</span> <span class="font-mono text-sm font-semibold text-seafoam-200">{node}</span>
<%= if node == Node.self() do %> <%= if node == Node.self() do %>
<span class="text-xs bg-cyan-800/50 text-cyan-400 px-1.5 py-0.5 rounded">self</span> <span class="text-xs bg-seafoam-800/50 text-seafoam-400 px-1.5 py-0.5 rounded">self</span>
<% end %> <% end %>
</div> </div>
<.status_badge status={status} /> <.status_badge status={status} />
@@ -135,12 +135,12 @@ defmodule ElixirAiWeb.AdminLive do
<div class="p-4 space-y-4"> <div class="p-4 space-y-4">
<%= if node_singletons != [] do %> <%= if node_singletons != [] do %>
<div> <div>
<p class="text-xs font-semibold uppercase tracking-widest text-cyan-600 mb-1.5"> <p class="text-xs font-semibold uppercase tracking-widest text-seafoam-600 mb-1.5">
Singletons Singletons
</p> </p>
<div class="space-y-1"> <div class="space-y-1">
<%= for {module, _} <- node_singletons do %> <%= for {module, _} <- node_singletons do %>
<div class="px-2 py-1.5 rounded bg-cyan-900/30 font-mono text-xs text-cyan-300"> <div class="px-2 py-1.5 rounded bg-seafoam-900/30 font-mono text-xs text-seafoam-300">
{inspect(module)} {inspect(module)}
</div> </div>
<% end %> <% end %>
@@ -150,15 +150,15 @@ defmodule ElixirAiWeb.AdminLive do
<%= if node_runners != [] do %> <%= if node_runners != [] do %>
<div> <div>
<p class="text-xs font-semibold uppercase tracking-widest text-cyan-600 mb-1.5"> <p class="text-xs font-semibold uppercase tracking-widest text-seafoam-600 mb-1.5">
Chat Runners Chat Runners
<span class="normal-case font-normal text-cyan-700 ml-1"> <span class="normal-case font-normal text-seafoam-700 ml-1">
{length(node_runners)} {length(node_runners)}
</span> </span>
</p> </p>
<div class="space-y-1"> <div class="space-y-1">
<%= for {name, _, _} <- node_runners do %> <%= for {name, _, _} <- node_runners do %>
<div class="px-2 py-1.5 rounded bg-cyan-900/30 font-mono text-xs text-cyan-200"> <div class="px-2 py-1.5 rounded bg-seafoam-900/30 font-mono text-xs text-seafoam-200">
{name} {name}
</div> </div>
<% end %> <% end %>
@@ -168,14 +168,14 @@ defmodule ElixirAiWeb.AdminLive do
<%= if node_liveviews != %{} do %> <%= if node_liveviews != %{} do %>
<div> <div>
<p class="text-xs font-semibold uppercase tracking-widest text-cyan-600 mb-1.5"> <p class="text-xs font-semibold uppercase tracking-widest text-seafoam-600 mb-1.5">
LiveViews LiveViews
</p> </p>
<div class="space-y-1"> <div class="space-y-1">
<%= for {view, instances} <- node_liveviews do %> <%= for {view, instances} <- node_liveviews do %>
<div class="px-2 py-1.5 rounded bg-cyan-900/30 flex justify-between items-center gap-2"> <div class="px-2 py-1.5 rounded bg-seafoam-900/30 flex justify-between items-center gap-2">
<span class="font-mono text-xs text-cyan-200">{short_module(view)}</span> <span class="font-mono text-xs text-seafoam-200">{short_module(view)}</span>
<span class="text-xs text-cyan-600">×{length(instances)}</span> <span class="text-xs text-seafoam-600">×{length(instances)}</span>
</div> </div>
<% end %> <% end %>
</div> </div>
@@ -183,7 +183,7 @@ defmodule ElixirAiWeb.AdminLive do
<% end %> <% end %>
<%= if node_singletons == [] and node_runners == [] and node_liveviews == %{} do %> <%= if node_singletons == [] and node_runners == [] and node_liveviews == %{} do %>
<p class="text-xs text-cyan-700 italic">No active processes</p> <p class="text-xs text-seafoam-700 italic">No active processes</p>
<% end %> <% end %>
</div> </div>
</div> </div>
@@ -207,7 +207,7 @@ defmodule ElixirAiWeb.AdminLive do
</section> </section>
<% end %> <% end %>
<p class="text-xs text-cyan-800">Refreshes every 1s or on node events.</p> <p class="text-xs text-seafoam-800">Refreshes every 1s or on node events.</p>
</div> </div>
""" """
end end
@@ -236,7 +236,7 @@ defmodule ElixirAiWeb.AdminLive do
unreachable unreachable
</span> </span>
<% other -> %> <% other -> %>
<span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-cyan-900 text-cyan-300"> <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-seafoam-900 text-seafoam-300">
{inspect(other)} {inspect(other)}
</span> </span>
<% end %> <% end %>

6
lib/elixir_ai_web/chat/chat_live.ex
View File

@@ -24,7 +24,7 @@ defmodule ElixirAiWeb.ChatLive do
|> assign(user_input: "") |> assign(user_input: "")
|> assign(messages: conversation.messages) |> assign(messages: conversation.messages)
|> assign(streaming_response: conversation.streaming_response) |> assign(streaming_response: conversation.streaming_response)
|> assign(background_color: "bg-cyan-950/30") |> assign(background_color: "bg-seafoam-950/30")
|> assign(provider: conversation.provider) |> assign(provider: conversation.provider)
|> assign(providers: AiProvider.all()) |> assign(providers: AiProvider.all())
|> assign(db_error: nil) |> assign(db_error: nil)
@@ -42,7 +42,7 @@ defmodule ElixirAiWeb.ChatLive do
|> assign(user_input: "") |> assign(user_input: "")
|> assign(messages: []) |> assign(messages: [])
|> assign(streaming_response: nil) |> assign(streaming_response: nil)
|> assign(background_color: "bg-cyan-950/30") |> assign(background_color: "bg-seafoam-950/30")
|> assign(provider: nil) |> assign(provider: nil)
|> assign(providers: AiProvider.all()) |> assign(providers: AiProvider.all())
|> assign(db_error: Exception.format(:error, reason)) |> assign(db_error: Exception.format(:error, reason))
@@ -54,7 +54,7 @@ defmodule ElixirAiWeb.ChatLive do
~H""" ~H"""
<div class="flex flex-col h-full rounded-lg"> <div class="flex flex-col h-full rounded-lg">
<div class="px-4 py-3 font-semibold flex items-center gap-3"> <div class="px-4 py-3 font-semibold flex items-center gap-3">
<.link navigate={~p"/"} class="text-cyan-700 hover:text-cyan-400 transition-colors"> <.link navigate={~p"/"} class="text-seafoam-700 hover:text-seafoam-400 transition-colors">
← ←
</.link> </.link>
<span class="flex-1">{@conversation_name}</span> <span class="flex-1">{@conversation_name}</span>

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

@@ -9,8 +9,8 @@ defmodule ElixirAiWeb.ChatMessage do
def tool_result_message(assigns) do def tool_result_message(assigns) do
~H""" ~H"""
<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={"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-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-seafoam-900/40 bg-seafoam-900/10 text-seafoam-600">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@@ -23,11 +23,11 @@ defmodule ElixirAiWeb.ChatMessage do
clip-rule="evenodd" clip-rule="evenodd"
/> />
</svg> </svg>
<span class="text-cyan-600/70 flex-1 truncate">tool result</span> <span class="text-seafoam-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-seafoam-800 text-[10px] truncate max-w-[12rem]">{@tool_call_id}</span>
</div> </div>
<div class="px-3 py-2"> <div class="px-3 py-2">
<pre class="text-cyan-500/70 whitespace-pre-wrap break-all">{@content}</pre> <pre class="text-seafoam-500/70 whitespace-pre-wrap break-all">{@content}</pre>
</div> </div>
</div> </div>
""" """
@@ -38,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_width_class()} text-left"}> <div class={"inline-block px-3 py-2 rounded-lg bg-seafoam-950 text-seafoam-50 #{max_width_class()} text-left"}>
{@content} {@content}
</div> </div>
</div> </div>
@@ -85,14 +85,14 @@ defmodule ElixirAiWeb.ChatMessage do
<%= if @reasoning_content && @reasoning_content != "" do %> <%= if @reasoning_content && @reasoning_content != "" do %>
<button <button
type="button" type="button"
class="flex items-center text-cyan-500/60 hover:text-cyan-300 transition-colors duration-150 cursor-pointer" class="flex items-center text-seafoam-500/60 hover:text-seafoam-300 transition-colors duration-150 cursor-pointer"
phx-click={ phx-click={
JS.toggle_class("collapsed", to: "#reasoning-stream") JS.toggle_class("collapsed", to: "#reasoning-stream")
|> JS.toggle_class("rotate-180", to: "#reasoning-stream-chevron") |> JS.toggle_class("rotate-180", to: "#reasoning-stream-chevron")
} }
aria-label="Toggle reasoning" aria-label="Toggle reasoning"
> >
<div class="flex items-center gap-1 text-cyan-100/40 ps-2 mb-1"> <div class="flex items-center gap-1 text-seafoam-100/40 ps-2 mb-1">
<span class="text-xs">reasoning</span> <span class="text-xs">reasoning</span>
<svg <svg
id="reasoning-stream-chevron" id="reasoning-stream-chevron"
@@ -115,7 +115,7 @@ 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_width_class()} mb-1 markdown"} 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>
</div> </div>
@@ -127,7 +127,7 @@ 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_width_class()} markdown bg-cyan-950/50"} class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50"}
> >
</div> </div>
</div> </div>
@@ -146,14 +146,14 @@ defmodule ElixirAiWeb.ChatMessage do
<%= if @reasoning_content && @reasoning_content != "" do %> <%= if @reasoning_content && @reasoning_content != "" do %>
<button <button
type="button" type="button"
class="flex items-center text-cyan-500/60 hover:text-cyan-300 transition-colors duration-150 cursor-pointer" class="flex items-center text-seafoam-500/60 hover:text-seafoam-300 transition-colors duration-150 cursor-pointer"
phx-click={ phx-click={
JS.toggle_class("collapsed", to: "##{@reasoning_id}") JS.toggle_class("collapsed", to: "##{@reasoning_id}")
|> JS.toggle_class("rotate-180", to: "##{@reasoning_id}-chevron") |> JS.toggle_class("rotate-180", to: "##{@reasoning_id}-chevron")
} }
aria-label="Toggle reasoning" aria-label="Toggle reasoning"
> >
<div class="flex items-center gap-1 text-cyan-100/40 ps-2 mb-1"> <div class="flex items-center gap-1 text-seafoam-100/40 ps-2 mb-1">
<span class="text-xs">reasoning</span> <span class="text-xs">reasoning</span>
<svg <svg
id={"#{@reasoning_id}-chevron"} id={"#{@reasoning_id}-chevron"}
@@ -176,7 +176,7 @@ 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_width_class()} mb-1 markdown", "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" !@expanded && "collapsed"
]} ]}
> >
@@ -191,7 +191,7 @@ 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_width_class()} markdown bg-cyan-950/50"} class={"inline-block px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50"}
> >
</div> </div>
<% end %> <% end %>
@@ -249,12 +249,44 @@ defmodule ElixirAiWeb.ChatMessage do
attr :arguments, :any, default: nil attr :arguments, :any, default: nil
defp called_tool_call(assigns) do defp called_tool_call(assigns) do
assigns =
assigns
|> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
|> assign(:_truncated, truncate_args(assigns.arguments))
~H""" ~H"""
<div class={"mb-1 #{max_width_class()} rounded-lg border border-cyan-900/60 bg-cyan-950/40 text-xs font-mono overflow-hidden"}> <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-cyan-900/60 bg-cyan-900/20 text-cyan-400"> <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">
<.tool_call_icon /> <.tool_call_icon />
<span class="text-cyan-300 font-semibold flex-1">{@name}</span> <span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
<span class="flex items-center gap-1 text-cyan-500/50"> <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-500/50 shrink-0">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
@@ -270,7 +302,9 @@ defmodule ElixirAiWeb.ChatMessage do
<span class="text-[10px]">called</span> <span class="text-[10px]">called</span>
</span> </span>
</div> </div>
<.tool_call_args arguments={@arguments} /> <div id={"#{@_id}-args"} class="hidden">
<.tool_call_args arguments={@arguments} />
</div>
</div> </div>
""" """
end end
@@ -279,17 +313,51 @@ defmodule ElixirAiWeb.ChatMessage do
attr :arguments, :any, default: nil attr :arguments, :any, default: nil
defp pending_tool_call(assigns) do defp pending_tool_call(assigns) do
assigns =
assigns
|> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
|> assign(:_truncated, truncate_args(assigns.arguments))
~H""" ~H"""
<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={"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-cyan-900 bg-cyan-900/30 text-cyan-400"> <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 /> <.tool_call_icon />
<span class="text-cyan-300 font-semibold flex-1">{@name}</span> <span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
<span class="flex items-center gap-1 text-cyan-600"> <span :if={@_truncated} class="text-seafoam-600/50 truncate flex-1 min-w-0 ml-1">
<span class="w-1.5 h-1.5 rounded-full bg-cyan-600 animate-pulse inline-block"></span> {@_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 class="w-1.5 h-1.5 rounded-full bg-seafoam-600 animate-pulse inline-block"></span>
<span class="text-[10px]">running</span> <span class="text-[10px]">running</span>
</span> </span>
</div> </div>
<.tool_call_args arguments={@arguments} /> <div id={"#{@_id}-args"} class="hidden">
<.tool_call_args arguments={@arguments} />
</div>
</div> </div>
""" """
end end
@@ -300,21 +368,50 @@ defmodule ElixirAiWeb.ChatMessage do
defp success_tool_call(assigns) do defp success_tool_call(assigns) do
assigns = assigns =
assign( assigns
assigns, |> assign(
:result_str, :result_str,
case assigns.result do case assigns.result do
s when is_binary(s) -> s s when is_binary(s) -> s
other -> inspect(other, pretty: true, limit: :infinity) other -> inspect(other, pretty: true, limit: :infinity)
end end
) )
|> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
|> assign(:_truncated, truncate_args(assigns.arguments))
~H""" ~H"""
<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={"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-cyan-900 bg-cyan-900/30 text-cyan-400"> <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 /> <.tool_call_icon />
<span class="text-cyan-300 font-semibold flex-1">{@name}</span> <span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
<span class="flex items-center gap-1 text-emerald-500"> <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">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
@@ -330,9 +427,11 @@ defmodule ElixirAiWeb.ChatMessage do
<span class="text-[10px]">done</span> <span class="text-[10px]">done</span>
</span> </span>
</div> </div>
<.tool_call_args arguments={@arguments} /> <div id={"#{@_id}-args"} class="hidden">
<.tool_call_args arguments={@arguments} />
</div>
<div class="px-3 py-2"> <div class="px-3 py-2">
<div class="text-cyan-700 mb-1 uppercase tracking-wider text-[10px]">result</div> <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> <pre class="text-emerald-300/80 whitespace-pre-wrap break-all">{@result_str}</pre>
</div> </div>
</div> </div>
@@ -344,12 +443,44 @@ defmodule ElixirAiWeb.ChatMessage do
attr :error, :string, required: true attr :error, :string, required: true
defp error_tool_call(assigns) do defp error_tool_call(assigns) do
assigns =
assigns
|> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
|> assign(:_truncated, truncate_args(assigns.arguments))
~H""" ~H"""
<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={"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-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-seafoam-400">
<.tool_call_icon /> <.tool_call_icon />
<span class="text-cyan-300 font-semibold flex-1">{@name}</span> <span class="text-seafoam-300 font-semibold shrink-0">{@name}</span>
<span class="flex items-center gap-1 text-red-500"> <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">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" viewBox="0 0 16 16"
@@ -361,7 +492,9 @@ defmodule ElixirAiWeb.ChatMessage do
<span class="text-[10px]">error</span> <span class="text-[10px]">error</span>
</span> </span>
</div> </div>
<.tool_call_args arguments={@arguments} /> <div id={"#{@_id}-args"} class="hidden">
<.tool_call_args arguments={@arguments} />
</div>
<div class="px-3 py-2 bg-red-950/20"> <div class="px-3 py-2 bg-red-950/20">
<div class="text-red-700 mb-1 uppercase tracking-wider text-[10px]">error</div> <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> <pre class="text-red-400 whitespace-pre-wrap break-all">{@error}</pre>
@@ -370,6 +503,24 @@ defmodule ElixirAiWeb.ChatMessage do
""" """
end 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 attr :arguments, :any, default: nil
defp tool_call_args(%{arguments: args} = assigns) when not is_nil(args) and args != "" do defp tool_call_args(%{arguments: args} = assigns) when not is_nil(args) and args != "" do
@@ -390,9 +541,9 @@ defmodule ElixirAiWeb.ChatMessage do
) )
~H""" ~H"""
<div class="px-3 py-2 border-b border-cyan-900/50"> <div class="px-3 py-2 border-b border-seafoam-900/50">
<div class="text-cyan-700 mb-1 uppercase tracking-wider text-[10px]">arguments</div> <div class="text-seafoam-700 mb-1 uppercase tracking-wider text-[10px]">arguments</div>
<pre class="text-cyan-400 whitespace-pre-wrap break-all">{@pretty_args}</pre> <pre class="text-seafoam-400 whitespace-pre-wrap break-all">{@pretty_args}</pre>
</div> </div>
""" """
end end

22
lib/elixir_ai_web/chat/chat_provider_display.ex
View File

@@ -13,27 +13,27 @@ defmodule ElixirAiWeb.ChatProviderDisplay do
phx-click={JS.toggle(to: "#provider-dropdown")} 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" 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-cyan-950/50 border border-cyan-900/40 min-w-0 select-none"> <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
class="w-3 h-3 shrink-0 text-cyan-600" 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" /> <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> </svg>
<%= if @provider do %> <%= if @provider do %>
<span class="text-cyan-400 font-medium truncate">{@provider.name}</span> <span class="text-seafoam-400 font-medium truncate">{@provider.name}</span>
<span class="text-cyan-800">·</span> <span class="text-seafoam-800">·</span>
<span class="text-cyan-600 truncate">{@provider.model_name}</span> <span class="text-seafoam-600 truncate">{@provider.model_name}</span>
<% else %> <% else %>
<span class="text-cyan-800 italic">No provider</span> <span class="text-seafoam-800 italic">No provider</span>
<% end %> <% end %>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
class="w-2.5 h-2.5 text-cyan-700 ml-0.5 shrink-0" class="w-2.5 h-2.5 text-seafoam-700 ml-0.5 shrink-0"
> >
<path <path
fill-rule="evenodd" fill-rule="evenodd"
@@ -45,7 +45,7 @@ defmodule ElixirAiWeb.ChatProviderDisplay do
</button> </button>
<div <div
id="provider-dropdown" id="provider-dropdown"
class="hidden absolute right-0 top-full mt-1 z-50 min-w-max bg-gray-950 border border-cyan-900/40 rounded shadow-xl overflow-hidden" 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")} phx-click-away={JS.hide(to: "#provider-dropdown")}
> >
<%= if @providers == [] do %> <%= if @providers == [] do %>
@@ -59,9 +59,9 @@ defmodule ElixirAiWeb.ChatProviderDisplay do
|> JS.push("change_provider", value: %{id: p.id}) |> JS.push("change_provider", value: %{id: p.id})
} }
class={[ class={[
"flex flex-col px-3 py-2 text-left w-full text-xs hover:bg-cyan-950/60 transition-colors", "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, if(@provider && @provider.name == p.name,
do: "text-cyan-400", do: "text-seafoam-400",
else: "text-gray-300" else: "text-gray-300"
) )
]} ]}
@@ -69,7 +69,7 @@ defmodule ElixirAiWeb.ChatProviderDisplay do
<span class="font-medium">{p.name}</span> <span class="font-medium">{p.name}</span>
<span class={ <span class={
if @provider && @provider.name == p.name, if @provider && @provider.name == p.name,
do: "text-cyan-700", do: "text-seafoam-700",
else: "text-gray-500" else: "text-gray-500"
}> }>
{p.model_name} {p.model_name}

6
lib/elixir_ai_web/components/form_components.ex
View File

@@ -19,14 +19,14 @@ defmodule ElixirAiWeb.FormComponents do
def input(assigns) do def input(assigns) do
~H""" ~H"""
<div> <div>
<label for={@name} class="block text-sm text-cyan-300 mb-1">{@label}</label> <label for={@name} class="block text-sm text-seafoam-300 mb-1">{@label}</label>
<input <input
type={@type} type={@type}
name={@name} name={@name}
id={@name} id={@name}
value={@value} value={@value}
autocomplete={@autocomplete} autocomplete={@autocomplete}
class="w-full rounded px-3 py-2 text-sm bg-cyan-950/20 border border-cyan-900/40 text-cyan-100 focus:outline-none focus:ring-1 focus:ring-cyan-700" class="w-full rounded px-3 py-2 text-sm bg-seafoam-950/20 border border-seafoam-900/40 text-seafoam-100 focus:outline-none focus:ring-1 focus:ring-seafoam-700"
{@rest} {@rest}
/> />
</div> </div>
@@ -47,7 +47,7 @@ defmodule ElixirAiWeb.FormComponents do
def modal(assigns) do def modal(assigns) do
~H""" ~H"""
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"> <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
<div class="w-full max-w-sm rounded-lg border border-cyan-900/40 bg-cyan-950 p-6 shadow-xl"> <div class="w-full max-w-sm rounded-lg border border-seafoam-900/40 bg-seafoam-950 p-6 shadow-xl">
{render_slot(@inner_block)} {render_slot(@inner_block)}
</div> </div>
</div> </div>

2
lib/elixir_ai_web/components/layouts/root.html.heex
View File

@@ -17,7 +17,7 @@
window.DOMPurify = DOMPurify window.DOMPurify = DOMPurify
</script> </script>
</head> </head>
<body class="bg-cyan-900 text-cyan-50"> <body class="bg-seafoam-900 text-seafoam-50">
{live_render(@conn, ElixirAiWeb.VoiceLive, id: "voice-control")} {live_render(@conn, ElixirAiWeb.VoiceLive, id: "voice-control")}
{@inner_content} {@inner_content}
</body> </body>

22
lib/elixir_ai_web/home/ai_providers_live.ex
View File

@@ -27,11 +27,11 @@ defmodule ElixirAiWeb.AiProvidersLive do
~H""" ~H"""
<div> <div>
<div class="flex items-center justify-between mb-8"> <div class="flex items-center justify-between mb-8">
<h1 class="text-lg font-semibold text-cyan-300">AI Providers</h1> <h1 class="text-lg font-semibold text-seafoam-300">AI Providers</h1>
<button <button
phx-click="toggle_form" phx-click="toggle_form"
phx-target={@myself} phx-target={@myself}
class="px-3 py-1 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors" class="px-3 py-1 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
> >
{if @show_form, do: "Cancel", else: "Add Provider"} {if @show_form, do: "Cancel", else: "Add Provider"}
</button> </button>
@@ -41,7 +41,7 @@ defmodule ElixirAiWeb.AiProvidersLive do
<form <form
phx-submit="create_provider" phx-submit="create_provider"
phx-target={@myself} phx-target={@myself}
class="mb-8 space-y-2 p-4 rounded-lg border border-cyan-900/40 bg-cyan-950/10" class="mb-8 space-y-2 p-4 rounded-lg border border-seafoam-900/40 bg-seafoam-950/10"
> >
<.input type="text" name="name" value={@form_data["name"]} label="Provider Name" /> <.input type="text" name="name" value={@form_data["name"]} label="Provider Name" />
<.input type="text" name="model_name" value={@form_data["model_name"]} label="Model Name" /> <.input type="text" name="model_name" value={@form_data["model_name"]} label="Model Name" />
@@ -54,7 +54,7 @@ defmodule ElixirAiWeb.AiProvidersLive do
/> />
<button <button
type="submit" type="submit"
class="w-full px-4 py-2 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors" class="w-full px-4 py-2 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
> >
Create Provider Create Provider
</button>r </button>r
@@ -67,14 +67,14 @@ defmodule ElixirAiWeb.AiProvidersLive do
<ul class="space-y-2"> <ul class="space-y-2">
<%= if @providers == [] do %> <%= if @providers == [] do %>
<li class="text-sm text-cyan-700">No providers configured yet.</li> <li class="text-sm text-seafoam-700">No providers configured yet.</li>
<% end %> <% end %>
<%= for provider <- @providers do %> <%= for provider <- @providers do %>
<li class="p-4 rounded-lg border border-cyan-900/40 bg-cyan-950/20"> <li class="p-4 rounded-lg border border-seafoam-900/40 bg-seafoam-950/20">
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
<div class="flex-1"> <div class="flex-1">
<h3 class="text-sm font-medium text-cyan-300">{provider.name}</h3> <h3 class="text-sm font-medium text-seafoam-300">{provider.name}</h3>
<p class="text-xs text-cyan-500 mt-1">Model: {provider.model_name}</p> <p class="text-xs text-seafoam-500 mt-1">Model: {provider.model_name}</p>
</div> </div>
<button <button
phx-click="delete_provider" phx-click="delete_provider"
@@ -91,15 +91,15 @@ defmodule ElixirAiWeb.AiProvidersLive do
<%= if @confirm_delete_id do %> <%= if @confirm_delete_id do %>
<.modal> <.modal>
<h2 class="text-sm font-semibold text-cyan-300 mb-2">Delete Provider</h2> <h2 class="text-sm font-semibold text-seafoam-300 mb-2">Delete Provider</h2>
<p class="text-sm text-cyan-500 mb-6"> <p class="text-sm text-seafoam-500 mb-6">
Are you sure you want to delete this provider? This action cannot be undone. Are you sure you want to delete this provider? This action cannot be undone.
</p> </p>
<div class="flex gap-3 justify-end"> <div class="flex gap-3 justify-end">
<button <button
phx-click="cancel_delete" phx-click="cancel_delete"
phx-target={@myself} phx-target={@myself}
class="px-4 py-2 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors" class="px-4 py-2 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
> >
Cancel Cancel
</button> </button>

10
lib/elixir_ai_web/home/home_live.ex
View File

@@ -24,7 +24,7 @@ defmodule ElixirAiWeb.HomeLive do
~H""" ~H"""
<div class="max-w-lg mx-auto mt-16 px-4 space-y-16"> <div class="max-w-lg mx-auto mt-16 px-4 space-y-16">
<div> <div>
<h1 class="text-lg font-semibold text-cyan-300 mb-8">Conversations</h1> <h1 class="text-lg font-semibold text-seafoam-300 mb-8">Conversations</h1>
<.conversation_list conversations={@conversations} /> <.conversation_list conversations={@conversations} />
@@ -50,13 +50,13 @@ defmodule ElixirAiWeb.HomeLive do
~H""" ~H"""
<ul class="mb-8 space-y-2"> <ul class="mb-8 space-y-2">
<%= if @conversations == [] do %> <%= if @conversations == [] do %>
<li class="text-sm text-cyan-700">No conversations yet.</li> <li class="text-sm text-seafoam-700">No conversations yet.</li>
<% end %> <% end %>
<%= for name <- @conversations do %> <%= for name <- @conversations do %>
<li> <li>
<.link <.link
navigate={~p"/chat/#{name}"} navigate={~p"/chat/#{name}"}
class="block px-4 py-2 rounded-lg border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors text-sm" class="block px-4 py-2 rounded-lg border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors text-sm"
> >
{name} {name}
</.link> </.link>
@@ -72,7 +72,7 @@ defmodule ElixirAiWeb.HomeLive do
<.input type="text" name="name" value={@new_name} label="Conversation Name" /> <.input type="text" name="name" value={@new_name} label="Conversation Name" />
<select <select
name="ai_provider_id" name="ai_provider_id"
class="w-full rounded px-3 py-2 text-sm bg-cyan-950/20 border border-cyan-900/40 text-cyan-100 focus:outline-none focus:ring-1 focus:ring-cyan-700" class="w-full rounded px-3 py-2 text-sm bg-seafoam-950/20 border border-seafoam-900/40 text-seafoam-100 focus:outline-none focus:ring-1 focus:ring-seafoam-700"
> >
<%= for {provider, index} <- Enum.with_index(@ai_providers) do %> <%= for {provider, index} <- Enum.with_index(@ai_providers) do %>
<option value={provider.id} selected={index == 0}> <option value={provider.id} selected={index == 0}>
@@ -82,7 +82,7 @@ defmodule ElixirAiWeb.HomeLive do
</select> </select>
<button <button
type="submit" type="submit"
class="w-full px-4 py-2 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors" class="w-full px-4 py-2 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
> >
Create Create
</button> </button>

36
lib/elixir_ai_web/voice/voice_live.ex
View File

@@ -14,7 +14,7 @@ defmodule ElixirAiWeb.VoiceLive do
<button <button
phx-click="expand" phx-click="expand"
title="Voice input (Ctrl+Space)" title="Voice input (Ctrl+Space)"
class="fixed top-4 right-4 z-50 p-2.5 rounded-full bg-cyan-900/50 hover:bg-cyan-800/80 border border-cyan-700/50 hover:border-cyan-600 text-cyan-500/70 hover:text-cyan-300 transition-all duration-200 opacity-50 hover:opacity-100" class="fixed top-4 right-4 z-50 p-2.5 rounded-full bg-seafoam-900/50 hover:bg-seafoam-800/80 border border-seafoam-700/50 hover:border-seafoam-600 text-seafoam-500/70 hover:text-seafoam-300 transition-all duration-200 opacity-50 hover:opacity-100"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -27,19 +27,19 @@ defmodule ElixirAiWeb.VoiceLive do
</button> </button>
<% else %> <% else %>
<%!-- Expanded panel --%> <%!-- Expanded panel --%>
<div class="fixed top-4 right-4 w-72 bg-cyan-950/95 border border-cyan-800 rounded-2xl shadow-2xl z-50 p-4 flex flex-col gap-3 backdrop-blur"> <div class="fixed top-4 right-4 w-72 bg-seafoam-950/95 border border-seafoam-800 rounded-2xl shadow-2xl z-50 p-4 flex flex-col gap-3 backdrop-blur">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<%= if @state == :idle do %> <%= if @state == :idle do %>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 text-cyan-500 shrink-0" class="h-4 w-4 text-seafoam-500 shrink-0"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="currentColor" fill="currentColor"
> >
<path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 9a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V23h-2v-2.06A9 9 0 0 1 3 12H5z" /> <path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 9a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V23h-2v-2.06A9 9 0 0 1 3 12H5z" />
</svg> </svg>
<span class="text-cyan-400 font-semibold text-sm">Voice Input</span> <span class="text-seafoam-400 font-semibold text-sm">Voice Input</span>
<% end %> <% end %>
<%= if @state == :recording do %> <%= if @state == :recording do %>
<span class="relative flex h-3 w-3 shrink-0"> <span class="relative flex h-3 w-3 shrink-0">
@@ -47,25 +47,25 @@ defmodule ElixirAiWeb.VoiceLive do
</span> </span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span> <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span> </span>
<span class="text-cyan-50 font-semibold text-sm">Recording</span> <span class="text-seafoam-50 font-semibold text-sm">Recording</span>
<% end %> <% end %>
<%= if @state == :processing do %> <%= if @state == :processing do %>
<span class="relative flex h-3 w-3 shrink-0"> <span class="relative flex h-3 w-3 shrink-0">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-seafoam-400 opacity-75">
</span> </span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-cyan-400"></span> <span class="relative inline-flex rounded-full h-3 w-3 bg-seafoam-400"></span>
</span> </span>
<span class="text-cyan-50 font-semibold text-sm">Processing…</span> <span class="text-seafoam-50 font-semibold text-sm">Processing…</span>
<% end %> <% end %>
<%= if @state == :transcribed do %> <%= if @state == :transcribed do %>
<span class="text-cyan-300 font-semibold text-sm">Transcription</span> <span class="text-seafoam-300 font-semibold text-sm">Transcription</span>
<% end %> <% end %>
</div> </div>
<%!-- Minimize button --%> <%!-- Minimize button --%>
<button <button
phx-click="minimize" phx-click="minimize"
title="Minimize" title="Minimize"
class="p-1 rounded-lg text-cyan-600 hover:text-cyan-300 hover:bg-cyan-800/50 transition-colors" class="p-1 rounded-lg text-seafoam-600 hover:text-seafoam-300 hover:bg-seafoam-800/50 transition-colors"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -83,7 +83,7 @@ defmodule ElixirAiWeb.VoiceLive do
</div> </div>
<%= if @state in [:recording, :processing] do %> <%= if @state in [:recording, :processing] do %>
<div id="voice-viz-wrapper" phx-update="ignore"> <div id="voice-viz-wrapper" phx-update="ignore">
<canvas id="voice-viz-canvas" height="72" class="w-full rounded-lg bg-cyan-950 block"> <canvas id="voice-viz-canvas" height="72" class="w-full rounded-lg bg-seafoam-950 block">
</canvas> </canvas>
</div> </div>
<% end %> <% end %>
@@ -93,10 +93,10 @@ defmodule ElixirAiWeb.VoiceLive do
<%= if @state == :idle do %> <%= if @state == :idle do %>
<button <button
phx-click={JS.dispatch("voice:start", to: "#voice-control-hook")} phx-click={JS.dispatch("voice:start", to: "#voice-control-hook")}
class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-cyan-700 hover:bg-cyan-600 text-cyan-50 text-xs font-medium transition-colors" class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-700 hover:bg-seafoam-600 text-seafoam-50 text-xs font-medium transition-colors"
> >
<span>Start Recording</span> <span>Start Recording</span>
<kbd class="text-cyan-300 bg-cyan-800 border border-cyan-600 px-1.5 py-0.5 rounded font-mono"> <kbd class="text-seafoam-300 bg-seafoam-800 border border-seafoam-600 px-1.5 py-0.5 rounded font-mono">
Ctrl+Space Ctrl+Space
</kbd> </kbd>
</button> </button>
@@ -104,10 +104,10 @@ defmodule ElixirAiWeb.VoiceLive do
<%= if @state == :recording do %> <%= if @state == :recording do %>
<button <button
phx-click={JS.dispatch("voice:stop", to: "#voice-control-hook")} phx-click={JS.dispatch("voice:stop", to: "#voice-control-hook")}
class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-cyan-800 hover:bg-cyan-700 text-cyan-50 text-xs font-medium transition-colors border border-cyan-700" class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-800 hover:bg-seafoam-700 text-seafoam-50 text-xs font-medium transition-colors border border-seafoam-700"
> >
<span>Stop Recording</span> <span>Stop Recording</span>
<kbd class="text-cyan-300 bg-cyan-900 border border-cyan-700 px-1.5 py-0.5 rounded font-mono"> <kbd class="text-seafoam-300 bg-seafoam-900 border border-seafoam-700 px-1.5 py-0.5 rounded font-mono">
Space Space
</kbd> </kbd>
</button> </button>
@@ -115,7 +115,7 @@ defmodule ElixirAiWeb.VoiceLive do
<%= if @state == :transcribed do %> <%= if @state == :transcribed do %>
<button <button
phx-click="dismiss_transcription" phx-click="dismiss_transcription"
class="text-xs text-cyan-500 hover:text-cyan-300 transition-colors text-center w-full" class="text-xs text-seafoam-500 hover:text-seafoam-300 transition-colors text-center w-full"
> >
Dismiss Dismiss
</button> </button>
@@ -128,8 +128,8 @@ defmodule ElixirAiWeb.VoiceLive do
defp transcription_display(assigns) do defp transcription_display(assigns) do
~H""" ~H"""
<div class="rounded-xl bg-cyan-900/60 border border-cyan-700 px-3 py-2"> <div class="rounded-xl bg-seafoam-900/60 border border-seafoam-700 px-3 py-2">
<p class="text-sm text-cyan-50 leading-relaxed">{@transcription}</p> <p class="text-sm text-seafoam-50 leading-relaxed">{@transcription}</p>
</div> </div>
""" """
end end