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

better layout

Browse Source
This commit is contained in:
Alex Mickelson
2026-03-05 16:55:16 -07:00
parent ea2b6d4cbf
commit cacae19f74
8 changed files with 274 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
assets/css/app.css
View File

@@ -58,55 +58,17 @@ legend {
@apply text-sm font-semibold text-cyan-400 px-1;
}
/* Spinner */
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
transform: rotate(45deg);
}
.loader::before {
content: '';
box-sizing: border-box;
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: -24px;
animation: animloader 4s ease infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
animation: animloader2 2s ease infinite;
}
@import "./spinner.css";
@import "./markdown.css";
@keyframes animloader {
0% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px rgba(255,255,255,0), 24px 48px rgba(255,255,255,0), 0px 48px rgba(255,255,255,0); }
12% { box-shadow: 0 24px white, 24px 24px rgba(255,255,255,0), 24px 48px rgba(255,255,255,0), 0px 48px rgba(255,255,255,0); }
25% { box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255,255,255,0), 0px 48px rgba(255,255,255,0); }
37% { box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255,255,255,0); }
50% { box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white; }
62% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px white, 24px 48px white, 0px 48px white; }
75% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px rgba(255,255,255,0), 24px 48px white, 0px 48px white; }
87% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px rgba(255,255,255,0), 24px 48px rgba(255,255,255,0), 0px 48px white; }
100% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px rgba(255,255,255,0), 24px 48px rgba(255,255,255,0), 0px 48px rgba(255,255,255,0); }
/* Reasoning content collapse animation */
.reasoning-content {
@apply overflow-hidden opacity-100 max-h-[1000px] [transition:max-height_0.35s_ease,opacity_0.25s_ease,padding_0.25s_ease,margin_0.25s_ease];
}
@keyframes animloader2 {
0% { transform: translate(0, 0) rotateX(0) rotateY(0); }
25% { transform: translate(100%, 0) rotateX(0) rotateY(180deg); }
50% { transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); }
75% { transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg); }
100% { transform: translate(0, 0) rotateX(0) rotateY(360deg); }
.reasoning-content.collapsed {
@apply opacity-0 max-h-0 pt-0 pb-0 mb-0;
}

129
assets/css/markdown.css Normal file
View File

@@ -0,0 +1,129 @@
/* Rendered Markdown */
.markdown {
@apply text-cyan-50 leading-7 text-base;
}
/* Headings */
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
@apply font-semibold text-cyan-300 mt-6 mb-2 leading-tight;
}
.markdown h1 {
@apply text-3xl border-b border-cyan-900 pb-1;
}
.markdown h2 {
@apply text-2xl border-b border-cyan-900 pb-1;
}
.markdown h3 {
@apply text-xl text-cyan-200;
}
.markdown h4 {
@apply text-lg text-cyan-200;
}
.markdown h5 {
@apply text-base text-cyan-100;
}
.markdown h6 {
@apply text-sm text-cyan-100;
}
/* Paragraphs */
.markdown p {
@apply my-3;
}
/* Links */
.markdown a {
@apply text-cyan-400 underline underline-offset-2 transition-colors duration-150 hover:text-cyan-300;
}
/* Strong / Em */
.markdown strong {
@apply font-bold text-cyan-100;
}
.markdown em {
@apply italic text-cyan-200;
}
/* Inline code */
.markdown code {
@apply font-mono text-sm bg-cyan-950 text-cyan-300 px-1 py-0.5 rounded border border-cyan-900;
}
/* Code blocks */
.markdown pre {
@apply bg-cyan-950 border border-cyan-900 rounded-lg px-5 py-4 overflow-x-auto my-4;
}
.markdown pre code {
@apply bg-transparent border-0 p-0 text-sm text-cyan-100;
}
/* 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;
}
/* Horizontal rule */
.markdown hr {
@apply border-0 border-t border-cyan-900 my-6;
}
/* Lists */
.markdown ul,
.markdown ol {
@apply my-3 pl-6;
}
.markdown ul {
@apply list-disc;
}
.markdown ol {
@apply list-decimal;
}
.markdown li {
@apply my-1;
}
.markdown li::marker {
@apply text-cyan-700;
}
/* Nested lists */
.markdown ul ul,
.markdown ol ul {
list-style-type: circle;
}
.markdown ul ul ul {
list-style-type: square;
}
/* Tables */
.markdown table {
@apply w-full border-collapse my-4 text-sm;
}
.markdown thead {
@apply bg-cyan-950;
}
.markdown th {
@apply text-left px-3 py-2 text-cyan-300 font-semibold border-b-2 border-cyan-700;
}
.markdown td {
@apply px-3 py-2 border-b border-cyan-900 text-cyan-100;
}
.markdown tbody tr:hover {
@apply bg-cyan-950;
}
/* Images */
.markdown img {
@apply max-w-full rounded-md border border-cyan-900 my-2;
}
/* Task list checkboxes (GitHub-flavored) */
.markdown input[type="checkbox"] {
@apply accent-cyan-700 mr-1;
}

50
assets/css/spinner.css Normal file
View File

@@ -0,0 +1,50 @@
/* Spinner */
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
transform: rotate(45deg);
}
.loader::before {
content: '';
box-sizing: border-box;
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: -24px;
animation: animloader 4s ease infinite;
}
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
animation: animloader2 2s ease infinite;
}
@keyframes animloader {
0% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px rgba(255,255,255,0), 24px 48px rgba(255,255,255,0), 0px 48px rgba(255,255,255,0); }
12% { box-shadow: 0 24px white, 24px 24px rgba(255,255,255,0), 24px 48px rgba(255,255,255,0), 0px 48px rgba(255,255,255,0); }
25% { box-shadow: 0 24px white, 24px 24px white, 24px 48px rgba(255,255,255,0), 0px 48px rgba(255,255,255,0); }
37% { box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px rgba(255,255,255,0); }
50% { box-shadow: 0 24px white, 24px 24px white, 24px 48px white, 0px 48px white; }
62% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px white, 24px 48px white, 0px 48px white; }
75% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px rgba(255,255,255,0), 24px 48px white, 0px 48px white; }
87% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px rgba(255,255,255,0), 24px 48px rgba(255,255,255,0), 0px 48px white; }
100% { box-shadow: 0 24px rgba(255,255,255,0), 24px 24px rgba(255,255,255,0), 24px 48px rgba(255,255,255,0), 0px 48px rgba(255,255,255,0); }
}
@keyframes animloader2 {
0% { transform: translate(0, 0) rotateX(0) rotateY(0); }
25% { transform: translate(100%, 0) rotateX(0) rotateY(180deg); }
50% { transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); }
75% { transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg); }
100% { transform: translate(0, 0) rotateX(0) rotateY(360deg); }
}

1
assets/js/app.js
View File

@@ -24,7 +24,6 @@ import topbar from "../vendor/topbar"
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
longPollFallbackMs: 2500,
params: {_csrf_token: csrfToken}
})

66
lib/elixir_ai_web/components/chat_message.ex Normal file
View File

@@ -0,0 +1,66 @@
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
def assistant_message(assigns) do
assigns = assign(assigns, :_reasoning_id, "reasoning-#{:erlang.phash2(assigns.content)}")
~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"
>
<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"
>
{Markdown.render(@reasoning_content)}
</div>
<% end %>
<div class="inline-block px-3 py-2 rounded-lg max-w-prose markdown bg-cyan-950/50">
{Markdown.render(@content)}
</div>
</div>
"""
end
end

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

@@ -1,3 +1,3 @@
<main class="px-4 py-8 sm:px-6 lg:px-8">
<main class="px-4 py-8 sm:px-6 lg:px-8 h-screen w-screen">
{@inner_content}
</main>

6
lib/elixir_ai_web/controllers/page_html/home.html.heex
View File

@@ -1,3 +1,3 @@
<div class="">
<%= live_render(@conn, ElixirAiWeb.ChatLive) %>
</div>
<%= live_render(@conn, ElixirAiWeb.ChatLive) %>

41
lib/elixir_ai_web/live/chat_live.ex
View File

@@ -1,8 +1,8 @@
defmodule ElixirAiWeb.ChatLive do
use ElixirAiWeb, :live_view
import ElixirAiWeb.Spinner
import ElixirAiWeb.ChatMessage
import ElixirAi.ChatRunner
alias ElixirAiWeb.Markdown
@topic "ai_chat"
@@ -19,44 +19,35 @@ defmodule ElixirAiWeb.ChatLive do
def render(assigns) do
~H"""
<div class="flex flex-col h-96 border rounded-lg overflow-hidden">
<div class="px-4 py-3 font-semibold">
<div class="flex flex-col h-full rounded-lg">
<div class="px-4 py-3 font-semibold ">
Live Chat
</div>
<div class="flex-1 overflow-y-auto p-4">
<div class="flex-1 overflow-y-auto p-4 bg-cyan-950/30 rounded-lg">
<%= if @messages == [] do %>
<p class="text-sm text-center mt-4">No messages yet.</p>
<% end %>
<%= for msg <- @messages do %>
<div class={["mb-2 text-sm", if(msg.role == :user, do: "text-right", else: "text-left")]}>
<%= if msg.role == :assistant do %>
<span class="inline-block px-3 py-1 rounded-lg border">
{Markdown.render(msg.reasoning_content)}
</span>
<% end %>
<span class="inline-block px-3 py-1 rounded-lg border">
{Markdown.render(msg.content)}
</span>
</div>
<%= if msg.role == :user do %>
<.user_message content={msg.content} />
<% else %>
<.assistant_message content={msg.content} reasoning_content={msg.reasoning_content} />
<% end %>
<% end %>
<%= if @streaming_response do %>
<div class="mb-2 text-sm text-left">
<span class="inline-block px-3 py-1 rounded-lg border">
{Markdown.render(@streaming_response.reasoning_content)}
</span>
<span class="inline-block px-3 py-1 rounded-lg border">
{Markdown.render(@streaming_response.content)}
</span>
<.spinner />
</div>
<.assistant_message
content={@streaming_response.content}
reasoning_content={@streaming_response.reasoning_content}
/>
<.spinner />
<% end %>
</div>
<form class="border-t p-3 flex gap-2" phx-submit="submit" phx-change="update_user_input">
<form class="p-3 flex gap-2" phx-submit="submit" phx-change="update_user_input">
<input
type="text"
name="user_input"
value={@user_input}
class="flex-1 border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2"
class="flex-1 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2"
/>
<button type="submit" class="px-4 py-2 rounded text-sm border">
Send