ai: Migrate to assistant-ui.

* Patched for Hugging Face Spaces deployment support

* Patched for Demo Playground with proper multimodal support

https://huggingface.co/spaces/umint/ai/blob/main/CREDITS

Signed-off-by: Hadad <hadad@linuxmail.org>

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

COPYING

@@ -0,0 +1,7 @@
+The Demo Playground project is provided under the terms of the MIT License, as stated in:  
+	LICENSE
+
+This project includes and modifies components from assistant-ui (https://github.com/assistant-ui/assistant-ui),  
+which are also licensed under the MIT License.
+
+All contributions to the Demo Playground project are subject to this COPYING file.

CREDITS

@@ -0,0 +1,5 @@
+CREDITS FOR DEMO PLAYGROUND
+
+THIS PROJECT IS BASED ON ASSISTANT-UI (https://github.com/assistant-ui/assistant-ui), WITH EXTENSIVE MODIFICATIONS TO ENHANCE STABILITY, ENSURE COMPATIBILITY WITH HUGGING FACE SPACES, AND ADAPT IT FOR USE IN THE DEMO PLAYGROUND ENVIRONMENT.
+
+COPYRIGHT FOR THE ORIGINAL WORK BELONGS ENTIRELY TO THE ASSISTANT-UI PROJECT AND ITS CONTRIBUTORS.

Dockerfile

@@ -1,22 +1,24 @@
 #
 # SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
-# SPDX-License-Identifier: Apache-2.0
+# SPDX-License-Identifier: MIT
 #
 
 # Use a specific container image for the sever
 FROM hadadrjt/playground:public-latest
 
 # Set the main working directory inside the container
-WORKDIR /node
+WORKDIR /app
 
 # Copy all files into the container
 COPY . .
 
 # Install all dependencies
-RUN npm install
+RUN npx assistant-ui@latest add syntax-highlighter \
+    && npm install \
+    && npm run build
 
 # Open the port so the web can be accessed
-EXPOSE 7860
+EXPOSE 3000
 
 # Start the server
 CMD ["npm", "start"]

LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 AgentbaseAI Inc.
+Copyright (c) 2025 Hadad <hadad@linuxmail.org>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,14 @@
 ---
 title: Demo Playground
-license: apache-2.0
+short_description: The first journey begins here
+license: mit
+license_link: https://huggingface.co/spaces/umint/ai/blob/main/LICENSE
 emoji: ⚡
 colorFrom: purple
 colorTo: green
 sdk: docker
-app_port: 7860
-pinned: false
+app_port: 3000
+pinned: true
 thumbnail: >-
   https://cdn-uploads.huggingface.co/production/uploads/686e28b405d4ddcdd96adeb2/i9iufR3L-rgj39mk_B9QW.jpeg
 # Used to promote this Hugging Face Space
@@ -85,7 +87,25 @@ models:
 - Wan-AI/Wan2.2-Animate-14B
 - decart-ai/Lucy-Edit-Dev
 - ibm-granite/granite-docling-258M
+- Qwen/Qwen3-Omni-30B-A3B-Instruct
+- Qwen/Qwen-Image-Edit-2509
+- deepseek-ai/DeepSeek-V3.1-Terminus
+- Qwen/Qwen3-VL-235B-A22B-Thinking
+- Qwen/Qwen3-VL-235B-A22B-Instruct
+- Qwen/Qwen3-Omni-30B-A3B-Thinking
+- deepseek-ai/DeepSeek-V3.2-Exp
+- inclusionAI/Ring-1T-preview
+- zai-org/GLM-4.6
+- neuphonic/neutts-air
+- ibm-granite/granite-4.0-h-small
+- ServiceNow-AI/Apriel-1.5-15b-Thinker
+- Qwen/Qwen3-VL-30B-A3B-Instruct
+- ibm-granite/granite-4.0-micro
+- chetwinlow1/Ovi
+- inclusionAI/Ling-1T
+- microsoft/UserLM-8b
 # Used to promote this Hugging Face Space
 datasets:
 - fka/awesome-chatgpt-prompts
+- openai/gdpval
 ---

app/api/chat/route.ts

@@ -0,0 +1,26 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: MIT
+//
+
+import { createOpenAI } from "@ai-sdk/openai";
+import { streamText, convertToModelMessages } from "ai";
+import config from '../../../config';
+
+export async function POST(req: Request) {
+  if (!config.api.baseUrl || !config.api.key) {
+    throw new Error("API configuration missing");
+  }
+  
+  const { messages } = await req.json();
+  
+  const result = streamText({
+    model: createOpenAI({
+      baseURL: config.api.baseUrl,
+      apiKey: config.api.key
+    }).chat(config.api.model),
+    messages: convertToModelMessages(messages),
+  });
+  
+  return result.toUIMessageStreamResponse();
+}

app/assistant.tsx

@@ -0,0 +1,85 @@
+//  
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>  
+// SPDX-License-Identifier: MIT  
+//  
+  
+"use client";  
+  
+import { AssistantRuntimeProvider } from "@assistant-ui/react";  
+import {  
+  useChatRuntime,  
+  AssistantChatTransport,  
+} from "@assistant-ui/react-ai-sdk";  
+import { Thread } from "@/components/assistant-ui/thread";  
+import {  
+  SidebarInset,  
+  SidebarProvider,  
+  SidebarTrigger,  
+} from "@/components/ui/sidebar";  
+import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";  
+import { Separator } from "@/components/ui/separator";  
+import {  
+  Breadcrumb,  
+  BreadcrumbItem,  
+  BreadcrumbList,  
+  BreadcrumbPage,  
+} from "@/components/ui/breadcrumb";  
+  
+export const Assistant = () => {  
+  const runtime = useChatRuntime({  
+    transport: new AssistantChatTransport({  
+      api: "/api/chat",  
+    }),  
+  });  
+  
+  return (  
+    <AssistantRuntimeProvider runtime={runtime}>  
+      <SidebarProvider>  
+        <div className="flex h-dvh w-full pr-0.5">  
+          <ThreadListSidebar />  
+          <SidebarInset>  
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">  
+              <SidebarTrigger />  
+              <Separator orientation="vertical" className="mr-2 h-4" />  
+              <Breadcrumb>  
+                <BreadcrumbList>  
+                  <BreadcrumbItem>  
+                    <BreadcrumbPage>  
+                      <a  
+                        href="https://huggingface.co/spaces/umint/ai/discussions"  
+                        target="_blank"  
+                        rel="noopener noreferrer"  
+                        className="inline-flex items-center gap-1"  
+                      >  
+                        Changelogs  
+                        <svg   
+                          width="7.5"   
+                          height="7.5"   
+                          viewBox="0 0 12 12"   
+                          fill="none"   
+                          xmlns="http://www.w3.org/2000/svg"  
+                          className="inline-block"  
+                        >  
+                          <path   
+                            d="M3.5 1.5L8.5 1.5L8.5 6.5M8.5 1.5L1.5 8.5L8.5 1.5Z"   
+                            stroke="currentColor"   
+                            strokeWidth="1.5"   
+                            strokeLinecap="round"   
+                            strokeLinejoin="round"  
+                          />  
+                        </svg>  
+                      </a>  
+                    </BreadcrumbPage>  
+                  </BreadcrumbItem>  
+                </BreadcrumbList>  
+              </Breadcrumb>  
+            </header>  
+            <div className="flex-1 overflow-hidden">  
+              <Thread />  
+            </div>  
+          </SidebarInset>  
+        </div>  
+      </SidebarProvider>  
+    </AssistantRuntimeProvider>  
+  );  
+};

app/globals.css

@@ -0,0 +1,131 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  :root {
+    color-scheme: light;
+  }
+
+  :root.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/layout.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "UltimaX Intelligence",
+  description:
+    "UltimaX Intelligence is a free AI platform unifying multiple premium AI models "        +
+    "with an intuitive ChatGPT-like interface. Powered by Pollinations open-source AI "      +
+    "and integrated with OpenWebUI, it offers advanced features, no cost, no registration, " +
+    "and ensures user privacy with temporary, unsaved conversations.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,5 @@
+import { Assistant } from "./assistant";
+
+export default function Home() {
+  return <Assistant />;
+}

assets/css/animation/style.css

@@ -1,1628 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.loading {
-  display: inline-block;
-  width: 1.1rem;
-  height: 1.1rem;
-  border: 2px solid #999;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.pulse-animation {
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
-  }
-}
-
-.floating-animation {
-  animation: floating 3s ease-in-out infinite;
-}
-
-@keyframes floating {
-  0% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
-
-.gradient-text {
-  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.typing-animation::after {
-  content: "|";
-  animation: blink 1s infinite;
-  margin-left: 2px;
-}
-
-@keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-
-.shine-effect {
-  position: relative;
-  overflow: hidden;
-}
-
-.shine-effect::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: 0.5s;
-}
-
-.shine-effect:hover::before {
-  left: 100%;
-}
-
-.bounce-in {
-  animation: bounceIn 0.6s ease-out;
-}
-
-@keyframes bounceIn {
-  0% {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.slide-in-left {
-  animation: slideInLeft 0.5s ease-out;
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.slide-in-right {
-  animation: slideInRight 0.5s ease-out;
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.zoom-in {
-  animation: zoomIn 0.4s ease-out;
-}
-
-@keyframes zoomIn {
-  from {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.flip-in {
-  animation: flipIn 0.6s ease-out;
-}
-
-@keyframes flipIn {
-  from {
-    transform: rotateY(90deg);
-    opacity: 0;
-  }
-  to {
-    transform: rotateY(0deg);
-    opacity: 1;
-  }
-}
-
-.fade-in-up {
-  animation: fadeInUp 0.5s ease-out;
-}
-
-@keyframes fadeInUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.fade-in-down {
-  animation: fadeInDown 0.5s ease-out;
-}
-
-@keyframes fadeInDown {
-  from {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.rotate-in {
-  animation: rotateIn 0.6s ease-out;
-}
-
-@keyframes rotateIn {
-  from {
-    transform: rotate(15deg);
-    opacity: 0;
-  }
-  to {
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-}
-
-.scale-pulse {
-  animation: scalePulse 1.5s infinite;
-}
-
-@keyframes scalePulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-}
-
-.wave-animation {
-  animation: wave 2s infinite linear;
-}
-
-@keyframes wave {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 100% 0;
-  }
-}
-
-.glow-effect {
-  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
-  transition: box-shadow 0.3s ease;
-}
-
-.glow-effect:hover {
-  box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
-}
-
-.neon-glow {
-  text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6;
-  animation: neonPulse 2s infinite alternate;
-}
-
-@keyframes neonPulse {
-  from {
-    text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6;
-  }
-  to {
-    text-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6, 0 0 30px #3b82f6, 0 0 40px #3b82f6;
-  }
-}
-
-.rainbow-text {
-  background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
-  background-size: 200% 200%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  animation: rainbow 3s linear infinite;
-}
-
-@keyframes rainbow {
-  0% {
-    background-position: 0% 50%;
-  }
-  100% {
-    background-position: 200% 50%;
-  }
-}
-
-.hologram-effect {
-  position: relative;
-  overflow: hidden;
-}
-
-.hologram-effect::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent);
-  background-size: 20px 20px;
-  animation: hologram 1s linear infinite;
-  pointer-events: none;
-}
-
-@keyframes hologram {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 20px 20px;
-  }
-}
-
-.matrix-effect {
-  position: relative;
-  overflow: hidden;
-}
-
-.matrix-effect::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(rgba(0, 255, 0, 0.1) 50%, transparent 50%);
-  background-size: 100% 4px;
-  animation: matrix 0.5s linear infinite;
-  pointer-events: none;
-}
-
-@keyframes matrix {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 0 4px;
-  }
-}
-
-.glass-effect {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.card-hover {
-  transition: all 0.3s ease;
-  transform: translateY(0);
-}
-
-.card-hover:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-}
-
-.text-glow {
-  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
-  transition: text-shadow 0.3s ease;
-}
-
-.text-glow:hover {
-  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
-}
-
-.border-glow {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  transition: border-color 0.3s ease;
-}
-
-.border-glow:hover {
-  border-color: rgba(59, 130, 246, 0.5);
-}
-
-.shadow-glow {
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: box-shadow 0.3s ease;
-}
-
-.shadow-glow:hover {
-  box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3);
-}
-
-.pulse-glow {
-  animation: pulseGlow 2s infinite;
-}
-
-@keyframes pulseGlow {
-  0% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
-  }
-}
-
-.floating-glow {
-  animation: floatingGlow 3s ease-in-out infinite;
-}
-
-@keyframes floatingGlow {
-  0% {
-    transform: translateY(0);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  }
-  50% {
-    transform: translateY(-10px);
-    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
-  }
-  100% {
-    transform: translateY(0);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.rotate-glow {
-  animation: rotateGlow 4s linear infinite;
-}
-
-@keyframes rotateGlow {
-  0% {
-    transform: rotate(0deg);
-    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
-  }
-  25% {
-    box-shadow: 5px 0 5px rgba(59, 130, 246, 0.5);
-  }
-  50% {
-    box-shadow: 0 -5px 5px rgba(59, 130, 246, 0.5);
-  }
-  75% {
-    box-shadow: -5px 0 5px rgba(59, 130, 246, 0.5);
-  }
-  100% {
-    transform: rotate(360deg);
-    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
-  }
-}
-
-.wave-glow {
-  position: relative;
-  overflow: hidden;
-}
-
-.wave-glow::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
-  animation: waveGlow 2s linear infinite;
-}
-
-@keyframes waveGlow {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-
-.sparkle {
-  position: relative;
-}
-
-.sparkle::before {
-  content: "";
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  width: 6px;
-  height: 6px;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
-  animation: sparkle 1.5s infinite;
-}
-
-@keyframes sparkle {
-  0%, 100% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-.shimmer {
-  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
-  background-size: 200% 100%;
-  animation: shimmer 2s infinite;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-.ripple {
-  position: relative;
-  overflow: hidden;
-}
-
-.ripple::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  transform: translate(-50%, -50%);
-  opacity: 0;
-}
-
-.ripple:active::after {
-  width: 200px;
-  height: 200px;
-  opacity: 1;
-  transition: width 0.3s, height 0.3s, opacity 0.3s;
-}
-
-.morph {
-  transition: all 0.3s ease;
-  border-radius: 10px;
-}
-
-.morph:hover {
-  border-radius: 20px;
-}
-
-.tilt {
-  transition: transform 0.3s ease;
-  transform-style: preserve-3d;
-}
-
-.tilt:hover {
-  transform: rotateY(10deg) rotateX(10deg);
-}
-
-.pop {
-  transition: all 0.2s ease;
-}
-
-.pop:active {
-  transform: scale(0.95);
-}
-
-.skew {
-  transition: transform 0.3s ease;
-}
-
-.skew:hover {
-  transform: skew(-5deg);
-}
-
-.stretch {
-  transition: all 0.3s ease;
-}
-
-.stretch:hover {
-  transform: scaleX(1.05);
-}
-
-.compress {
-  transition: all 0.3s ease;
-}
-
-.compress:hover {
-  transform: scaleY(0.95);
-}
-
-.swing {
-  transition: transform 0.3s ease;
-  transform-origin: top center;
-}
-
-.swing:hover {
-  transform: rotate(5deg);
-}
-
-.wobble {
-  animation: wobble 1s ease-in-out;
-}
-
-@keyframes wobble {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-10px);
-  }
-  75% {
-    transform: translateX(10px);
-  }
-}
-
-.jello {
-  animation: jello 0.6s ease;
-}
-
-@keyframes jello {
-  0%, 100% {
-    transform: scale(1, 1);
-  }
-  25% {
-    transform: scale(1.1, 0.9);
-  }
-  50% {
-    transform: scale(0.9, 1.1);
-  }
-  75% {
-    transform: scale(1.05, 0.95);
-  }
-}
-
-.heartbeat {
-  animation: heartbeat 1.5s ease-in-out infinite;
-}
-
-@keyframes heartbeat {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-}
-
-.bounce {
-  animation: bounce 1s infinite;
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-20px);
-  }
-}
-
-.flip {
-  animation: flip 1s ease;
-}
-
-@keyframes flip {
-  0% {
-    transform: rotateY(0deg);
-  }
-  100% {
-    transform: rotateY(360deg);
-  }
-}
-
-.roll {
-  animation: roll 1s ease;
-}
-
-@keyframes roll {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.rubberBand {
-  animation: rubberBand 1s ease;
-}
-
-@keyframes rubberBand {
-  0%, 100% {
-    transform: scale(1, 1);
-  }
-  30% {
-    transform: scaleX(1.25) scaleY(0.75);
-  }
-  40% {
-    transform: scaleX(0.75) scaleY(1.25);
-  }
-  60% {
-    transform: scaleX(1.15) scaleY(0.85);
-  }
-}
-
-.shake {
-  animation: shake 0.5s ease;
-}
-
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-5px);
-  }
-  75% {
-    transform: translateX(5px);
-  }
-}
-
-.tada {
-  animation: tada 1s ease;
-}
-
-@keyframes tada {
-  0%, 100% {
-    transform: scale(1);
-  }
-  10%, 20% {
-    transform: scale(0.9) rotate(-3deg);
-  }
-  30%, 50%, 70%, 90% {
-    transform: scale(1.1) rotate(3deg);
-  }
-  40%, 60%, 80% {
-    transform: scale(1.1) rotate(-3deg);
-  }
-}
-
-.lightSpeedIn {
-  animation: lightSpeedIn 0.5s ease-out;
-}
-
-@keyframes lightSpeedIn {
-  0% {
-    transform: translateX(100%) skewX(-30deg);
-    opacity: 0;
-  }
-  60% {
-    transform: translateX(-20%) skewX(30deg);
-    opacity: 1;
-  }
-  80% {
-    transform: translateX(0%) skewX(-15deg);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(0%) skewX(0deg);
-    opacity: 1;
-  }
-}
-
-.lightSpeedOut {
-  animation: lightSpeedOut 0.5s ease-in;
-}
-
-@keyframes lightSpeedOut {
-  0% {
-    transform: translateX(0%) skewX(0deg);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(100%) skewX(-30deg);
-    opacity: 0;
-  }
-}
-
-.rotateInDownLeft {
-  animation: rotateInDownLeft 0.6s ease-out;
-}
-
-@keyframes rotateInDownLeft {
-  0% {
-    transform-origin: left bottom;
-    transform: rotate(-90deg);
-    opacity: 0;
-  }
-  100% {
-    transform-origin: left bottom;
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-}
-
-.rotateInDownRight {
-  animation: rotateInDownRight 0.6s ease-out;
-}
-
-@keyframes rotateInDownRight {
-  0% {
-    transform-origin: right bottom;
-    transform: rotate(90deg);
-    opacity: 0;
-  }
-  100% {
-    transform-origin: right bottom;
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-}
-
-.rotateInUpLeft {
-  animation: rotateInUpLeft 0.6s ease-out;
-}
-
-@keyframes rotateInUpLeft {
-  0% {
-    transform-origin: left bottom;
-    transform: rotate(90deg);
-    opacity: 0;
-  }
-  100% {
-    transform-origin: left bottom;
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-}
-
-.rotateInUpRight {
-  animation: rotateInUpRight 0.6s ease-out;
-}
-
-@keyframes rotateInUpRight {
-  0% {
-    transform-origin: right bottom;
-    transform: rotate(-90deg);
-    opacity: 0;
-  }
-  100% {
-    transform-origin: right bottom;
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-}
-
-.hinge {
-  animation: hinge 2s ease;
-}
-
-@keyframes hinge {
-  0% {
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-  }
-  20%, 60% {
-    transform: rotate(80deg);
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-  }
-  40%, 80% {
-    transform: rotate(60deg);
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(700px);
-    opacity: 0;
-  }
-}
-
-.jackInTheBox {
-  animation: jackInTheBox 0.7s ease;
-}
-
-@keyframes jackInTheBox {
-  0% {
-    opacity: 0;
-    transform: scale(0.1) rotate(30deg);
-    transform-origin: center bottom;
-  }
-  50% {
-    transform: rotate(-10deg);
-  }
-  70% {
-    transform: rotate(3deg);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.rollIn {
-  animation: rollIn 0.7s ease;
-}
-
-@keyframes rollIn {
-  0% {
-    opacity: 0;
-    transform: translateX(-100%) rotate(-120deg);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0) rotate(0deg);
-  }
-}
-
-.rollOut {
-  animation: rollOut 0.7s ease;
-}
-
-@keyframes rollOut {
-  0% {
-    opacity: 1;
-    transform: translateX(0) rotate(0deg);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(100%) rotate(120deg);
-  }
-}
-
-.zoomInDown {
-  animation: zoomInDown 0.6s ease;
-}
-
-@keyframes zoomInDown {
-  0% {
-    opacity: 0;
-    transform: scale(0.1) translateY(-1000px);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    transform: scale(0.475) translateY(60px);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.zoomInLeft {
-  animation: zoomInLeft 0.6s ease;
-}
-
-@keyframes zoomInLeft {
-  0% {
-    opacity: 0;
-    transform: scale(0.1) translateX(-1000px);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    transform: scale(0.475) translateX(10px);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.zoomInRight {
-  animation: zoomInRight 0.6s ease;
-}
-
-@keyframes zoomInRight {
-  0% {
-    opacity: 0;
-    transform: scale(0.1) translateX(1000px);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    transform: scale(0.475) translateX(-10px);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.zoomInUp {
-  animation: zoomInUp 0.6s ease;
-}
-
-@keyframes zoomInUp {
-  0% {
-    opacity: 0;
-    transform: scale(0.1) translateY(1000px);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    transform: scale(0.475) translateY(-60px);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.zoomOut {
-  animation: zoomOut 0.6s ease;
-}
-
-@keyframes zoomOut {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0;
-    transform: scale(0.3);
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.zoomOutDown {
-  animation: zoomOutDown 0.6s ease;
-}
-
-@keyframes zoomOutDown {
-  40% {
-    opacity: 1;
-    transform: scale(0.475) translateY(-60px);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.1) translateY(2000px);
-    transform-origin: center bottom;
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.zoomOutLeft {
-  animation: zoomOutLeft 0.6s ease;
-}
-
-@keyframes zoomOutLeft {
-  40% {
-    opacity: 1;
-    transform: scale(0.475) translateX(42px);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.1) translateX(-2000px);
-    transform-origin: left center;
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.zoomOutRight {
-  animation: zoomOutRight 0.6s ease;
-}
-
-@keyframes zoomOutRight {
-  40% {
-    opacity: 1;
-    transform: scale(0.475) translateX(-42px);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.1) translateX(2000px);
-    transform-origin: right center;
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.zoomOutUp {
-  animation: zoomOutUp 0.6s ease;
-}
-
-@keyframes zoomOutUp {
-  40% {
-    opacity: 1;
-    transform: scale(0.475) translateY(60px);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0.1) translateY(-2000px);
-    transform-origin: center top;
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-
-.slideInDown {
-  animation: slideInDown 0.5s ease-out;
-}
-
-@keyframes slideInDown {
-  from {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.slideInLeft {
-  animation: slideInLeft 0.5s ease-out;
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.slideInRight {
-  animation: slideInRight 0.5s ease-out;
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.slideInUp {
-  animation: slideInUp 0.5s ease-out;
-}
-
-@keyframes slideInUp {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.slideOutDown {
-  animation: slideOutDown 0.5s ease-out;
-}
-
-@keyframes slideOutDown {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-}
-
-.slideOutLeft {
-  animation: slideOutLeft 0.5s ease-out;
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}
-
-.slideOutRight {
-  animation: slideOutRight 0.5s ease-out;
-}
-
-@keyframes slideOutRight {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-.slideOutUp {
-  animation: slideOutUp 0.5s ease-out;
-}
-
-@keyframes slideOutUp {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-}
-
-.fadeIn {
-  animation: fadeIn 0.5s ease-out;
-}
-
-.fadeOut {
-  animation: fadeOut 0.5s ease-out;
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-.fadeInDown {
-  animation: fadeInDown 0.5s ease-out;
-}
-
-.fadeOutDown {
-  animation: fadeOutDown 0.5s ease-out;
-}
-
-@keyframes fadeOutDown {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}
-
-.fadeInDownBig {
-  animation: fadeInDownBig 0.5s ease-out;
-}
-
-@keyframes fadeInDownBig {
-  from {
-    opacity: 0;
-    transform: translateY(-2000px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.fadeOutDownBig {
-  animation: fadeOutDownBig 0.5s ease-out;
-}
-
-@keyframes fadeOutDownBig {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateY(2000px);
-  }
-}
-
-.fadeInLeft {
-  animation: fadeInLeft 0.5s ease-out;
-}
-
-.fadeOutLeft {
-  animation: fadeOutLeft 0.5s ease-out;
-}
-
-@keyframes fadeOutLeft {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
-
-.fadeInLeftBig {
-  animation: fadeInLeftBig 0.5s ease-out;
-}
-
-@keyframes fadeInLeftBig {
-  from {
-    opacity: 0;
-    transform: translateX(-2000px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.fadeOutLeftBig {
-  animation: fadeOutLeftBig 0.5s ease-out;
-}
-
-@keyframes fadeOutLeftBig {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-2000px);
-  }
-}
-
-.fadeInRight {
-  animation: fadeInRight 0.5s ease-out;
-}
-
-.fadeOutRight {
-  animation: fadeOutRight 0.5s ease-out;
-}
-
-@keyframes fadeOutRight {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-
-.fadeInRightBig {
-  animation: fadeInRightBig 0.5s ease-out;
-}
-
-@keyframes fadeInRightBig {
-  from {
-    opacity: 0;
-    transform: translateX(2000px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.fadeOutRightBig {
-  animation: fadeOutRightBig 0.5s ease-out;
-}
-
-@keyframes fadeOutRightBig {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateX(2000px);
-  }
-}
-
-.fadeInUp {
-  animation: fadeInUp 0.5s ease-out;
-}
-
-.fadeOutUp {
-  animation: fadeOutUp 0.5s ease-out;
-}
-
-@keyframes fadeOutUp {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-}
-
-.fadeInUpBig {
-  animation: fadeInUpBig 0.5s ease-out;
-}
-
-@keyframes fadeInUpBig {
-  from {
-    opacity: 0;
-    transform: translateY(2000px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.fadeOutUpBig {
-  animation: fadeOutUpBig 0.5s ease-out;
-}
-
-@keyframes fadeOutUpBig {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-2000px);
-  }
-}
-
-.flipInX {
-  animation: flipInX 0.6s ease;
-}
-
-@keyframes flipInX {
-  0% {
-    transform: perspective(400px) rotateX(90deg);
-    opacity: 0;
-  }
-  40% {
-    transform: perspective(400px) rotateX(-10deg);
-  }
-  70% {
-    transform: perspective(400px) rotateX(10deg);
-  }
-  100% {
-    transform: perspective(400px) rotateX(0deg);
-    opacity: 1;
-  }
-}
-
-.flipInY {
-  animation: flipInY 0.6s ease;
-}
-
-@keyframes flipInY {
-  0% {
-    transform: perspective(400px) rotateY(90deg);
-    opacity: 0;
-  }
-  40% {
-    transform: perspective(400px) rotateY(-10deg);
-  }
-  70% {
-    transform: perspective(400px) rotateY(10deg);
-  }
-  100% {
-    transform: perspective(400px) rotateY(0deg);
-    opacity: 1;
-  }
-}
-
-.flipOutX {
-  animation: flipOutX 0.6s ease;
-}
-
-@keyframes flipOutX {
-  0% {
-    transform: perspective(400px) rotateX(0deg);
-    opacity: 1;
-  }
-  100% {
-    transform: perspective(400px) rotateX(90deg);
-    opacity: 0;
-  }
-}
-
-.flipOutY {
-  animation: flipOutY 0.6s ease;
-}
-
-@keyframes flipOutY {
-  0% {
-    transform: perspective(400px) rotateY(0deg);
-    opacity: 1;
-  }
-  100% {
-    transform: perspective(400px) rotateY(90deg);
-    opacity: 0;
-  }
-}
-
-.lightSpeedInRight {
-  animation: lightSpeedInRight 0.5s ease-out;
-}
-
-@keyframes lightSpeedInRight {
-  0% {
-    transform: translateX(-100%) skewX(30deg);
-    opacity: 0;
-  }
-  60% {
-    transform: translateX(20%) skewX(-30deg);
-    opacity: 1;
-  }
-  80% {
-    transform: translateX(0%) skewX(15deg);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(0%) skewX(0deg);
-    opacity: 1;
-  }
-}
-
-.lightSpeedOutLeft {
-  animation: lightSpeedOutLeft 0.5s ease-in;
-}
-
-@keyframes lightSpeedOutLeft {
-  0% {
-    transform: translateX(0%) skewX(0deg);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(-100%) skewX(30deg);
-    opacity: 0;
-  }
-}
-
-.lightSpeedOutRight {
-  animation: lightSpeedOutRight 0.5s ease-in;
-}
-
-@keyframes lightSpeedOutRight {
-  0% {
-    transform: translateX(0%) skewX(0deg);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(100%) skewX(-30deg);
-    opacity: 0;
-  }
-}
-
-.rotateOut {
-  animation: rotateOut 0.6s ease;
-}
-
-@keyframes rotateOut {
-  0% {
-    transform-origin: center;
-    opacity: 1;
-  }
-  100% {
-    transform-origin: center;
-    transform: rotate(200deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutDownLeft {
-  animation: rotateOutDownLeft 0.6s ease;
-}
-
-@keyframes rotateOutDownLeft {
-  0% {
-    transform-origin: left bottom;
-    opacity: 1;
-  }
-  100% {
-    transform-origin: left bottom;
-    transform: rotate(45deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutDownRight {
-  animation: rotateOutDownRight 0.6s ease;
-}
-
-@keyframes rotateOutDownRight {
-  0% {
-    transform-origin: right bottom;
-    opacity: 1;
-  }
-  100% {
-    transform-origin: right bottom;
-    transform: rotate(-45deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutUpLeft {
-  animation: rotateOutUpLeft 0.6s ease;
-}
-
-@keyframes rotateOutUpLeft {
-  0% {
-    transform-origin: left bottom;
-    opacity: 1;
-  }
-  100% {
-    transform-origin: left bottom;
-    transform: rotate(-45deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutUpRight {
-  animation: rotateOutUpRight 0.6s ease;
-}
-
-@keyframes rotateOutUpRight {
-  0% {
-    transform-origin: right bottom;
-    opacity: 1;
-  }
-  100% {
-    transform-origin: right bottom;
-    transform: rotate(45deg);
-    opacity: 0;
-  }
-}

assets/css/button.css

@@ -1,65 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-#sendBtn, #stopBtn {
-  width: 2.75rem;
-  height: 2.75rem;
-  border: none;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  flex-shrink: 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-#sendBtn {
-  background: linear-gradient(135deg, var(--color-primary), #2563eb);
-  color: white;
-}
-
-#sendBtn:hover:not(:disabled) {
-  transform: translateY(-2px) scale(1.05);
-  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
-}
-
-#sendBtn:active:not(:disabled) {
-  transform: translateY(0) scale(0.98);
-}
-
-#sendBtn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: scale(0.96);
-}
-
-#stopBtn {
-  background: linear-gradient(135deg, #ef4444, #dc2626);
-  color: white;
-  display: none;
-  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
-}
-
-#stopBtn:hover {
-  transform: translateY(-2px) scale(1.05);
-  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
-}
-
-#stopBtn:active {
-  transform: translateY(0) scale(0.98);
-}
-
-#sendIcon {
-  width: 1.25rem;
-  height: 1.25rem;
-  stroke: #fff;
-  transition: transform 0.2s ease;
-}
-
-#sendBtn:hover:not(:disabled) #sendIcon {
-  transform: translateX(2px);
-}

assets/css/chat/bubble.css

@@ -1,56 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.bubble {
-  display: block;
-  align-self: flex-start;
-  background: #1f1f1f;
-  color: #e8e8e8;
-  border-radius: var(--bubble-radius);
-  line-height: 1.5;
-  white-space: normal;
-  font-family: 'Inter', sans-serif;
-  font-size: 0.95rem;
-  position: relative;
-  opacity: 0;
-  animation: bubbleAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  margin: 0.75rem 0;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  vertical-align: middle;
-  padding: 1rem 1rem;
-  box-sizing: border-box;
-  max-width: 100%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  transition: all 0.3s ease;
-}
-
-.bubble:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  transform: translateY(-1px);
-}
-
-@keyframes bubbleAppear {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.bubble-user {
-  align-self: flex-end;
-  background: #2b2b2b;
-  color: #fff;
-  border-bottom-right-radius: 0.5rem;
-  box-shadow: none;
-}
-
-.bubble-assist {
-  align-self: flex-start;
-  background: transparent;
-  border: none;
-  box-shadow: none;
-}

assets/css/chat/markdown.css

@@ -1,179 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.md-content {
-  color: inherit;
-  font-size: 0.95rem;
-  line-height: 1.6;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-
-.md-content a {
-  color: #fb923c;
-  text-decoration: none;
-  border-bottom: 1px solid rgba(251, 146, 60, 0.3);
-  transition: all 0.2s ease;
-}
-
-.md-content a:hover {
-  color: #ff8c42;
-  border-bottom-color: #ff8c42;
-}
-
-.md-content a:visited {
-  color: #fda85e;
-}
-
-.md-content p {
-  margin: 0.5rem 0;
-}
-
-.md-content pre {
-  overflow: auto;
-  padding: 1rem;
-  border-radius: 0.75rem;
-  margin: 0.75rem 0;
-  max-width: 100%;
-  box-sizing: border-box;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.md-content code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
-  font-size: 0.85em;
-  word-break: break-word;
-  background: rgba(0, 0, 0, 0.2);
-  padding: 0.2em 0.4em;
-  border-radius: 0.3rem;
-}
-
-.md-content pre code {
-  background: transparent;
-  padding: 0;
-}
-
-.md-content table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 0.75rem 0;
-  min-width: 100%;
-  box-sizing: border-box;
-}
-
-.table-wrapper {
-  overflow: auto;
-  border-radius: 0.6rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  margin: 0.5rem 0;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.md-content th, .md-content td {
-  padding: 0.6rem 0.8rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  text-align: left;
-  vertical-align: top;
-  word-break: break-word;
-  max-width: 200px;
-}
-
-.md-content th, tbody tr:nth-child(odd) td {
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.md-content ul {
-  list-style-type: none;
-  padding-left: 0;
-}
-
-.md-content ul ul {
-  list-style-type: none;
-  padding-left: 2em;
-}
-
-.md-content ul ul ul {
-  list-style-type: none;
-  padding-left: 2em;
-}
-
-.md-content ol {
-  list-style-type: none;
-  padding-left: 0;
-  counter-reset: list-counter;
-}
-
-.md-content ol ol {
-  list-style-type: none;
-  padding-left: 2em;
-}
-
-.md-content ol ol ol {
-  list-style-type: none;
-  padding-left: 2em;
-}
-
-.md-content ul > li, .md-content ol > li {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  position: relative;
-  padding-left: 2.8em;
-}
-
-.md-content ul > li::before {
-  content: "•";
-  position: absolute;
-  left: 1em;
-  top: 0;
-  font-size: 1.2em;
-}
-
-.md-content ol > li {
-  counter-increment: list-counter;
-}
-
-.md-content ol > li::before {
-  content: counter(list-counter) ".";
-  position: absolute;
-  left: 0;
-  top: 0;
-  min-width: 2.5em;
-  text-align: right;
-  padding-right: 0.5em;
-  font-weight: 500;
-}
-
-.md-content hr {
-  border: 0;
-  height: 2px;
-  background: #ffffff;
-  margin: 1.2rem 0;
-  border-radius: 2px;
-}
-
-.md-content blockquote {
-  border-left: 4px solid rgba(59, 130, 246, 0.5);
-  padding: 0.75rem 1rem;
-  margin: 0.75rem 0;
-  color: rgba(255, 255, 255, 0.9);
-  background: rgba(59, 130, 246, 0.1);
-  border-radius: 0.5rem;
-  overflow-wrap: break-word;
-}
-
-.md-content img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 0.75rem auto;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.md-content table td pre, .md-content table th pre {
-  overflow: auto;
-}

assets/css/chat/style.css

@@ -1,58 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.chat-title {
-  font-weight: 700;
-  font-size: 1rem;
-  color: #e6eefc;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chat-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.chat-section {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-#chatArea {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  max-width: 100%;
-}
-
-#chatBox {
-  display: none;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  padding: 0.75rem 0.75rem calc(var(--footer-height) + 1rem) 1rem;
-  box-sizing: border-box;
-  max-width: 100%;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-}

assets/css/footer.css

@@ -1,21 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-#footerForm {
-  display: flex;
-  gap: 0.75rem;
-  background-color: transparent;
-  align-items: center;
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  position: fixed;
-  bottom: 5rem;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  animation: slideInUp 0.3s ease-out forwards;
-  height: 0;
-}

assets/css/header.css

@@ -1,30 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.main-header, .chat-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
-  height: var(--header-height);
-  background-color: rgba(15, 15, 15, 0.85);
-}
-
-.main-header {
-  justify-content: space-between;
-}
-
-.chat-header {
-  justify-content: space-between;
-  display: none;
-}

assets/css/icon.css

@@ -1,83 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.icon-btn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  color: #dbe3ff;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  height: 2.5rem;
-  width: 2.5rem;
-}
-
-.icon-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-
-.icon-btn:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.icon {
-  width: 1.2rem;
-  height: 1.2rem;
-  color: #9ca3af;
-  flex-shrink: 0;
-  transition: transform 0.2s ease;
-}
-
-.prompt-item:hover .icon {
-  transform: scale(1.1);
-}
-
-#leftIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.2rem;
-  color: #9ca3af;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-#leftIcon:hover {
-  color: var(--color-primary);
-  transform: scale(1.1);
-}
-
-#rightIconGroup {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.2rem;
-  gap: 0.5rem;
-}
-
-.linkedin {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23dbe3ff' class='bi bi-linkedin' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-  transition: transform 0.2s ease;
-}
-
-.icon-btn:hover .linkedin {
-  transform: scale(1.1);
-}

assets/css/input.css

@@ -1,41 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-#inputContainer {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  background: linear-gradient(145deg, #1a1a1a, #141414);
-  border-radius: 2rem;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 0.25rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  max-width: 100%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-#inputContainer:focus-within {
-  border-color: var(--color-primary);
-  background: linear-gradient(145deg, #1f1f1f, #1a1a1a);
-  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
-  transform: translateY(-1px);
-}
-
-#userInput {
-  flex: 1;
-  padding: 0.75rem 0.75rem;
-  border-radius: 2rem;
-  border: 1px solid transparent;
-  background-color: transparent;
-  color: #e0e0e0;
-  font-size: 1rem;
-  outline: none;
-  transition: border-color 0.2s, background-color 0.2s;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  max-width: 100%;
-  min-width: 0;
-  font-family: 'Inter', sans-serif;
-}

assets/css/logo.css

@@ -1,20 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.logo {
-  font-weight: 800;
-  font-size: 1.125rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #eaeef8;
-  word-break: break-word;
-  transition: transform 0.2s ease;
-  height: 100%;
-}
-
-.logo:hover {
-  transform: scale(1.05);
-}

assets/css/prompts.css

@@ -1,46 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.prompts {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 1rem;
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 1.5rem;
-}
-
-.prompt-item {
-  background: linear-gradient(145deg, #1a1a1a, #141414);
-  padding: 1rem 1.25rem;
-  border-radius: var(--prompt-radius);
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  word-break: break-word;
-  overflow-wrap: break-word;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  animation: fadeIn 0.5s ease-out forwards;
-  transform: translateY(20px);
-  opacity: 0;
-}
-
-.prompt-item:nth-child(1) { animation-delay: 0.1s; }
-.prompt-item:nth-child(2) { animation-delay: 0.2s; }
-.prompt-item:nth-child(3) { animation-delay: 0.3s; }
-.prompt-item:nth-child(4) { animation-delay: 0.4s; }
-
-.prompt-item:hover {
-  background: linear-gradient(145deg, #1f1f1f, #1a1a1a);
-  transform: translateY(-3px) scale(1.02);
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
-}
-
-.prompt-item:active {
-  transform: translateY(0) scale(0.98);
-}

assets/css/screen/1200.css

@@ -1,15 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@media (min-width: 1200px) {
-  .prompts {
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    max-width: 1200px;
-  }
-
-  .title {
-    font-size: clamp(2rem, 3vw, 3rem);
-  }
-}

assets/css/screen/2000.css

@@ -1,50 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@media (min-width: 2000px) {
-  :root {
-    --header-height: 4.5rem;
-    --footer-height: 6rem;
-    --border-radius: 1.25rem;
-    --bubble-radius: 1.25rem;
-    --prompt-radius: 1.25rem;
-    font-size: 1.1rem;
-  }
-
-  .title {
-    font-size: clamp(2.5rem, 2.5vw, 3.5rem);
-  }
-
-  .prompts {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    max-width: 1600px;
-  }
-
-  .prompt-item {
-    padding: 1.25rem 1.5rem;
-    border-radius: 1.25rem;
-  }
-
-  .bubble {
-    padding: 1.25rem 1.5rem;
-    font-size: 1.1rem;
-    border-radius: 1.25rem;
-  }
-
-  #userInput {
-    padding: 1rem 1.25rem;
-    font-size: 1.1rem;
-  }
-
-  #sendBtn, #stopBtn {
-    width: 3.25rem;
-    height: 3.25rem;
-  }
-
-  .icon-btn {
-    width: 3rem;
-    height: 3rem;
-  }
-}

assets/css/screen/320.css

@@ -1,82 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@media (max-width: 320px) {
-  :root {
-    --header-height: 2.25rem;
-    --footer-height: 3.5rem;
-    --border-radius: 0.5rem;
-    --bubble-radius: 0.5rem;
-    --prompt-radius: 0.5rem;
-  }
-
-  .main-header, .chat-header {
-    padding: 0.3rem 0.4rem;
-  }
-
-  #chatBox {
-    padding: 0.3rem 0.4rem calc(var(--footer-height) + 0.4rem) 0.4rem;
-  }
-
-  #footerForm {
-    padding: 0.3rem 0.4rem;
-  }
-
-  #userInput {
-    padding: 0.4rem 0.5rem;
-    font-size: 0.8rem;
-  }
-
-  #sendBtn, #stopBtn {
-    width: 1.75rem;
-    height: 1.75rem;
-  }
-
-  .title {
-    font-size: clamp(1rem, 5vw, 1.4rem);
-    margin-bottom: 0.7rem;
-  }
-
-  .prompts {
-    gap: 0.4rem;
-    margin-bottom: 0.7rem;
-  }
-
-  .prompt-item {
-    padding: 0.5rem 0.7rem;
-    gap: 0.4rem;
-  }
-
-  .icon {
-    width: 0.8rem;
-    height: 0.8rem;
-  }
-
-  .system {
-    font-size: 0.6rem;
-    margin-top: 0.7rem;
-  }
-
-  .bubble {
-    padding: 0.5rem 0.7rem;
-    font-size: 0.75rem;
-    border-radius: 0.5rem;
-    margin: 0.3rem 0;
-  }
-
-  .chat-title {
-    font-size: 0.8rem;
-  }
-
-  .icon-btn {
-    padding: 0.25rem;
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .logo {
-    font-size: 0.85rem;
-  }
-}

assets/css/screen/360.css

@@ -1,82 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@media (max-width: 360px) {
-  :root {
-    --header-height: 2.5rem;
-    --footer-height: 3.75rem;
-    --border-radius: 0.625rem;
-    --bubble-radius: 0.625rem;
-    --prompt-radius: 0.625rem;
-  }
-
-  .main-header, .chat-header {
-    padding: 0.35rem 0.5rem;
-  }
-
-  #chatBox {
-    padding: 0.4rem 0.5rem calc(var(--footer-height) + 0.5rem) 0.5rem;
-  }
-
-  #footerForm {
-    padding: 0.4rem 0.5rem;
-  }
-
-  #userInput {
-    padding: 0.45rem 0.6rem;
-    font-size: 0.85rem;
-  }
-
-  #sendBtn, #stopBtn {
-    width: 2rem;
-    height: 2rem;
-  }
-
-  .title {
-    font-size: clamp(1.1rem, 5vw, 1.6rem);
-    margin-bottom: 0.8rem;
-  }
-
-  .prompts {
-    gap: 0.5rem;
-    margin-bottom: 0.8rem;
-  }
-
-  .prompt-item {
-    padding: 0.6rem 0.8rem;
-    gap: 0.5rem;
-  }
-
-  .icon {
-    width: 0.9rem;
-    height: 0.9rem;
-  }
-
-  .system {
-    font-size: 0.65rem;
-    margin-top: 0.8rem;
-  }
-
-  .bubble {
-    padding: 0.6rem 0.8rem;
-    font-size: 0.8rem;
-    border-radius: 0.625rem;
-    margin: 0.4rem 0;
-  }
-
-  .chat-title {
-    font-size: 0.85rem;
-  }
-
-  .icon-btn {
-    padding: 0.3rem;
-    width: 1.75rem;
-    height: 1.75rem;
-  }
-
-  .logo {
-    font-size: 0.9rem;
-  }
-}

assets/css/screen/3840.css

@@ -1,51 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@media (min-width: 3840px) {
-  :root {
-    --header-height: 5.5rem;
-    --footer-height: 7rem;
-    --border-radius: 1.5rem;
-    --bubble-radius: 1.5rem;
-    --prompt-radius: 1.5rem;
-    font-size: 1.3rem;
-  }
-
-  .title {
-    font-size: clamp(3rem, 2vw, 5rem);
-  }
-
-  .prompts {
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    max-width: 2000px;
-    gap: 1.5rem;
-  }
-
-  .prompt-item {
-    padding: 1.5rem 1.75rem;
-    border-radius: 1.5rem;
-  }
-
-  .bubble {
-    padding: 1.5rem 1.75rem;
-    font-size: 1.2rem;
-    border-radius: 1.5rem;
-  }
-
-  #userInput {
-    padding: 1.25rem 1.5rem;
-    font-size: 1.2rem;
-  }
-
-  #sendBtn, #stopBtn {
-    width: 3.75rem;
-    height: 3.75rem;
-  }
-
-  .icon-btn {
-    width: 3.5rem;
-    height: 3.5rem;
-  }
-}

assets/css/screen/480.css

@@ -1,78 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@media (max-width: 480px) {
-  :root {
-    --header-height: 2.75rem;
-    --footer-height: 4rem;
-    --border-radius: 0.75rem;
-    --bubble-radius: 0.75rem;
-    --prompt-radius: 0.75rem;
-  }
-
-  .main-header, .chat-header {
-    padding: 0.4rem 0.6rem;
-  }
-
-  #chatBox {
-    padding: 0.5rem 0.6rem calc(var(--footer-height) + 0.6rem) 0.6rem;
-  }
-
-  #footerForm {
-    padding: 0.5rem 0.6rem;
-  }
-
-  #userInput {
-    padding: 0.5rem 0.7rem;
-    font-size: 0.9rem;
-  }
-
-  #sendBtn, #stopBtn {
-    width: 2.25rem;
-    height: 2.25rem;
-  }
-
-  .title {
-    font-size: clamp(1.2rem, 5vw, 1.8rem);
-    margin-bottom: 1rem;
-  }
-
-  .prompts {
-    gap: 0.6rem;
-    margin-bottom: 1rem;
-  }
-
-  .prompt-item {
-    padding: 0.7rem 0.9rem;
-    gap: 0.6rem;
-  }
-
-  .icon {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .system {
-    font-size: 0.7rem;
-    margin-top: 1rem;
-  }
-
-  .bubble {
-    padding: 0.7rem 0.9rem;
-    font-size: 0.85rem;
-    border-radius: 0.75rem;
-    margin: 0.5rem 0;
-  }
-
-  .chat-title {
-    font-size: 0.9rem;
-  }
-
-  .icon-btn {
-    padding: 0.35rem;
-    width: 2rem;
-    height: 2rem;
-  }
-}

assets/css/screen/720.css

@@ -1,88 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@media (max-width: 767px) {
-  :root {
-    --header-height: 3rem;
-    --footer-height: 4.5rem;
-    --border-radius: 0.875rem;
-    --bubble-radius: 0.875rem;
-    --prompt-radius: 0.875rem;
-  }
-
-  .main-header, .chat-header {
-    padding: 0.5rem 0.75rem;
-  }
-
-  #chatBox {
-    padding: 0.6rem 0.75rem calc(var(--footer-height) + 0.75rem) 0.75rem;
-  }
-
-  #footerForm {
-    padding: 0.6rem 0.75rem;
-  }
-
-  #inputContainer {
-    padding: 0.2rem;
-  }
-
-  #userInput {
-    padding: 0.6rem 0.8rem;
-    font-size: 0.95rem;
-  }
-
-  #sendBtn, #stopBtn {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-
-  .title {
-    font-size: clamp(1.3rem, 5vw, 2rem);
-    margin-bottom: 1.2rem;
-  }
-
-  .prompts {
-    grid-template-columns: 1fr;
-    gap: 0.75rem;
-    margin-bottom: 1.2rem;
-  }
-
-  .prompt-item {
-    padding: 0.8rem 1rem;
-    gap: 0.7rem;
-  }
-
-  .icon {
-    width: 1.1rem;
-    height: 1.1rem;
-  }
-
-  .system {
-    font-size: 0.75rem;
-    margin-top: 1.2rem;
-    line-height: 1.5;
-  }
-
-  .bubble {
-    padding: 0.8rem 1rem;
-    font-size: 0.9rem;
-    border-radius: 0.875rem;
-    margin: 0.6rem 0;
-  }
-
-  .chat-title {
-    font-size: 0.95rem;
-  }
-
-  .chat-controls {
-    gap: 0.4rem;
-  }
-
-  .icon-btn {
-    padding: 0.4rem;
-    width: 2.25rem;
-    height: 2.25rem;
-  }
-}

assets/css/screen/7680.css

@@ -1,51 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@media (min-width: 7680px) {
-  :root {
-    --header-height: 7rem;
-    --footer-height: 9rem;
-    --border-radius: 2rem;
-    --bubble-radius: 2rem;
-    --prompt-radius: 2rem;
-    font-size: 1.6rem;
-  }
-
-  .title {
-    font-size: clamp(4rem, 1.5vw, 7rem);
-  }
-
-  .prompts {
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-    max-width: 3000px;
-    gap: 2rem;
-  }
-
-  .prompt-item {
-    padding: 2rem 2.25rem;
-    border-radius: 2rem;
-  }
-
-  .bubble {
-    padding: 2rem 2.25rem;
-    font-size: 1.4rem;
-    border-radius: 2rem;
-  }
-
-  #userInput {
-    padding: 1.5rem 2rem;
-    font-size: 1.4rem;
-  }
-
-  #sendBtn, #stopBtn {
-    width: 4.5rem;
-    height: 4.5rem;
-  }
-
-  .icon-btn {
-    width: 4rem;
-    height: 4rem;
-  }
-}

assets/css/screen/common.css

@@ -1,66 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.max-w-screen-xl {
-  max-width: min(1280px, 100%);
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  box-sizing: border-box;
-}
-
-@media (min-width: 640px) {
-  .max-w-screen-xl {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .max-w-screen-xl {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  .max-w-screen-xl {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-}
-
-@media (min-width: 1536px) {
-  .max-w-screen-xl {
-    padding-left: 4rem;
-    padding-right: 4rem;
-  }
-}
-
-@media (min-width: 2000px) {
-  .max-w-screen-xl {
-    max-width: 1600px;
-    padding-left: 5rem;
-    padding-right: 5rem;
-  }
-}
-
-@media (min-width: 3840px) {
-  .max-w-screen-xl {
-    max-width: 2400px;
-    padding-left: 6rem;
-    padding-right: 6rem;
-  }
-}
-
-@media (min-width: 7680px) {
-  .max-w-screen-xl {
-    max-width: 4000px;
-    padding-left: 8rem;
-    padding-right: 8rem;
-  }
-}

assets/css/style.css

@@ -1,94 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html, body {
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  font-family: 'Inter', sans-serif;
-  font-size: 1rem;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--background-dark);
-  color: var(--text-dark);
-  overflow: hidden;
-  word-wrap: break-word;
-}
-
-:root {
-  --color-primary: #3b82f6;
-  --background-dark: #0f0f0f;
-  --background-light: #fff;
-  --text-dark: #e5e7eb;
-  --text-light: #111;
-  --white-line-color: #ffffff;
-  --header-height: 3.5rem;
-  --footer-height: 5rem;
-  --transition-speed: 0.3s;
-  --border-radius: 1rem;
-  --bubble-radius: 1rem;
-  --prompt-radius: 1rem;
-}
-
-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  margin-top: var(--header-height);
-  height: calc(100vh - var(--header-height));
-  overflow: hidden;
-}
-
-#initialContent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  max-width: 100%;
-  width: 100%;
-  height: 100%;
-  padding: 1.5rem 1rem;
-  box-sizing: border-box;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  animation: fadeIn 0.8s ease-out forwards;
-}
-
-.title {
-  font-size: clamp(1.5rem, 4vw, 2.5rem);
-  font-weight: 800;
-  color: #eaeef8;
-  margin-bottom: 1.5rem;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  animation: slideInUp 0.6s ease-out forwards;
-}
-
-.system {
-  text-align: center;
-  margin-top: 5rem;
-  margin-bottom: 5rem;
-  font-size: 0.7rem;
-  color: #9ca3af;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  max-width: 600px;
-  line-height: 1.6;
-  animation: fadeIn 1s ease-out 0.6s forwards;
-  opacity: 0;
-}

assets/css/webkit.css

@@ -1,27 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
- * SPDX-License-Identifier: Apache-2.0
- */
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(59, 130, 246, 0.5);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(59, 130, 246, 0.7);
-}
-
-* {
-  -webkit-tap-highlight-color: transparent;
-}

assets/plugins/loader.js

@@ -1,315 +0,0 @@
-//
-// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// Prism.
-Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';
-
-// WebSocket URL helper.
-function createWebSocket() {
-  return new WebSocket((window.location.protocol === "https:" ? "wss" : "ws") + "//" + window.location.host);
-}
-
-// UI elements.
-const chatArea = document.getElementById('chatArea');
-const chatBox = document.getElementById('chatBox');
-const initialContent = document.getElementById('initialContent');
-const form = document.getElementById('footerForm');
-const input = document.getElementById('userInput');
-const btn = document.getElementById('sendBtn');
-const stopBtn = document.getElementById('stopBtn');
-const promptItems = document.querySelectorAll('.prompt-item');
-const mainHeader = document.getElementById('mainHeader');
-const chatHeader = document.getElementById('chatHeader');
-const homeBtn = document.getElementById('homeBtn');
-const clearBtn = document.getElementById('clearBtn');
-
-// Track state.
-let socket = null;
-let streamMsg = null;
-let conversationHistory = [];
-let currentAssistantText = "";
-let isRequestActive = false;
-let abortController = null;
-
-// Render markdown content.
-function renderMarkdown(el) {
-  const raw = el.dataset.text || "";
-  const html = marked.parse(raw, {
-    gfm: true,
-    breaks: true,
-    smartLists: true,
-    smartypants: false,
-    headerIds: false
-  });
-  el.innerHTML = '<div class="md-content">' + html + '</div>';
-  const wrapper = el.querySelector('.md-content');
-
-  // Wrap tables.
-  const tables = wrapper.querySelectorAll('table');
-  tables.forEach(t => {
-    if (t.parentNode && t.parentNode.classList && t.parentNode.classList.contains('table-wrapper')) return;
-    const div = document.createElement('div');
-    div.className = 'table-wrapper';
-    t.parentNode.insertBefore(div, t);
-    div.appendChild(t);
-  });
-
-  // Style horizontal rules.
-  const hrs = wrapper.querySelectorAll('hr');
-  hrs.forEach(h => {
-    if (!h.classList.contains('styled-hr')) {
-      h.classList.add('styled-hr');
-    }
-  });
-
-  // Highlight code.
-  Prism.highlightAllUnder(wrapper);
-}
-
-// Chat view.
-function enterChatView() {
-  mainHeader.style.display = 'none';
-  chatHeader.style.display = 'flex';
-  chatHeader.setAttribute('aria-hidden', 'false');
-  chatBox.style.display = 'flex';
-  initialContent.style.display = 'none';
-}
-
-// Home view.
-function leaveChatView() {
-  mainHeader.style.display = 'flex';
-  chatHeader.style.display = 'none';
-  chatHeader.setAttribute('aria-hidden', 'true');
-  chatBox.style.display = 'none';
-  initialContent.style.display = 'flex';
-}
-
-// Chat bubble.
-function addMsg(who, text) {
-  const div = document.createElement('div');
-  div.className = 'bubble ' + (who === 'user' ? 'bubble-user' : 'bubble-assist');
-  div.dataset.text = text;
-  renderMarkdown(div);
-  chatBox.appendChild(div);
-  chatBox.style.display = 'flex';
-  chatBox.scrollTop = chatBox.scrollHeight;
-  return div;
-}
-
-// Clear all chat.
-function clearAllMessages() {
-  stopStream(true);
-  conversationHistory = [];
-  currentAssistantText = "";
-  if (streamMsg) {
-    const loadingEl = streamMsg.querySelector('.loading');
-    if (loadingEl) loadingEl.remove();
-    streamMsg = null;
-  }
-  chatBox.innerHTML = "";
-  input.value = "";
-  btn.disabled = true;
-  stopBtn.style.display = 'none';
-  btn.style.display = 'inline-flex';
-  enterChatView();
-}
-
-// Reconnect WebSocket.
-let reconnectAttempts = 0;
-function setupWebSocket() {
-  if (socket) {
-    socket.onopen = null;
-    socket.onclose = null;
-    socket.onmessage = null;
-    socket.onerror = null;
-    socket.close();
-    socket = null;
-  }
-
-  socket = createWebSocket();
-
-  socket.onopen = () => {
-    reconnectAttempts = 0;
-  };
-
-  socket.onclose = () => {
-    reconnectAttempts++;
-    // Try reconnecting.
-    const delay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts));  // 30 seconds.
-    setTimeout(setupWebSocket, delay);
-  };
-
-  socket.onmessage = handleSocketMessage;
-
-  socket.onerror = () => {
-    socket.close();
-  };
-}
-
-// Handle incoming socket messages.
-function handleSocketMessage(e) {
-  const data = JSON.parse(e.data);
-  if (data.type === 'chunk') {
-    if (streamMsg) {
-      const loadingEl = streamMsg.querySelector('.loading');
-      if (loadingEl) loadingEl.remove();
-      streamMsg.dataset.text += data.chunk;
-      currentAssistantText = streamMsg.dataset.text || "";
-      renderMarkdown(streamMsg);
-      chatBox.scrollTop = chatBox.scrollHeight;
-    }
-  } else if (data.type === 'end' || data.type === 'error') {
-    if (streamMsg) {
-      const loadingEl = streamMsg.querySelector('.loading');
-      if (loadingEl) loadingEl.remove();
-      streamMsg.dataset.done = '1';
-      if (data.type === 'error') {
-        streamMsg.dataset.text = data.error || 'An error occurred during the request.';
-        renderMarkdown(streamMsg);
-      } else {
-        conversationHistory.push({ role: 'assistant', content: streamMsg.dataset.text });
-      }
-      streamMsg = null;
-      isRequestActive = false;
-      abortController = null;
-    }
-    btn.style.display = 'inline-flex';
-    stopBtn.style.display = 'none';
-    stopBtn.style.pointerEvents = 'auto';
-  }
-}
-
-// Send user message.
-async function submitMessage() {
-  const message = input.value.trim();
-  if (!message || isRequestActive) return;
-  enterChatView();
-  addMsg('user', message);
-  conversationHistory.push({ role: 'user', content: message });
-  streamMsg = addMsg('assistant', '');
-  const loadingEl = document.createElement('span');
-  loadingEl.className = 'loading';
-  streamMsg.appendChild(loadingEl);
-  stopBtn.style.display = 'inline-flex';
-  btn.style.display = 'none';
-  input.value = '';
-  btn.disabled = true;
-
-  isRequestActive = true;
-
-  // Stopping request.
-  abortController = new AbortController();
-  try {
-    socket.send(JSON.stringify({
-      type: 'ask',
-      message,
-      history: conversationHistory,
-      abortSignal: true
-    }));
-  } catch (error) {
-    if (streamMsg) {
-      const loadingEl = streamMsg.querySelector('.loading');
-      if (loadingEl) loadingEl.remove();
-      streamMsg.dataset.text = error.message || 'An error occurred during the request.';
-      renderMarkdown(streamMsg);
-      streamMsg.dataset.done = '1';
-      streamMsg = null;
-      isRequestActive = false;
-      abortController = null;
-    }
-    btn.style.display = 'inline-flex';
-    stopBtn.style.display = 'none';
-  }
-}
-
-// Stop streaming and cancel the ongoing request.
-function stopStream(forceCancel = false) {
-  if (!isRequestActive) return;
-
-  isRequestActive = false;
-
-  if (abortController) {
-    abortController.abort();
-    abortController = null;
-  }
-
-  // Notify server to stop sending streams / processing.
-  try {
-    socket.send(JSON.stringify({ type: 'stop' }));
-  } catch {}
-
-  if (streamMsg && !forceCancel) {
-    const loadingEl = streamMsg.querySelector('.loading');
-    if (loadingEl) loadingEl.remove();
-    streamMsg.dataset.text += '';
-    renderMarkdown(streamMsg);
-    streamMsg.dataset.done = '1';
-    streamMsg = null;
-  }
-
-  stopBtn.style.display = 'none';
-  btn.style.display = 'inline-flex';
-  stopBtn.style.pointerEvents = 'auto';
-}
-
-// Wait for socket ready.
-function sendWhenReady(msgFn) {
-  if (socket.readyState === WebSocket.OPEN) {
-    msgFn();
-  } else {
-    socket.addEventListener('open', function handler() {
-      msgFn();
-      socket.removeEventListener('open', handler);
-    });
-  }
-}
-
-// Prompts.
-promptItems.forEach(p => {
-  p.addEventListener('click', () => {
-    input.value = p.dataset.prompt;
-    sendWhenReady(submitMessage);
-  });
-});
-
-// Submit.
-form.addEventListener('submit', e => {
-  e.preventDefault();
-  submitMessage();
-});
-
-// Stop.
-stopBtn.addEventListener('click', () => {
-  stopBtn.style.pointerEvents = 'none';
-  stopStream();
-});
-
-// Home.
-homeBtn.addEventListener('click', () => {
-  leaveChatView();
-});
-
-// Clear messages.
-clearBtn.addEventListener('click', () => {
-  clearAllMessages();
-});
-
-// Enable send button only if input has text.
-input.addEventListener('input', () => {
-  btn.disabled = input.value.trim() === '';
-});
-
-// Animations.
-document.addEventListener('DOMContentLoaded', function () {
-  AOS.init({
-    duration: 800,
-    easing: 'ease-out-cubic',
-    once: true,
-    offset: 50
-  });
-});
-
-// Initialize WebSocket connection.
-setupWebSocket();

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components/assistant-ui/attachment.tsx

@@ -0,0 +1,266 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: MIT
+//
+
+"use client";
+
+import { PropsWithChildren, useEffect, useState, type FC } from "react";
+import Image from "next/image";
+import { XIcon, PlusIcon, FileText } from "lucide-react";
+import {
+  AttachmentPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  useAssistantState,
+  useAssistantApi,
+  useComposerRuntime,
+} from "@assistant-ui/react";
+import { useShallow } from "zustand/shallow";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
+
+const useFileSrc = (file: File | undefined) => {
+  const [src, setSrc] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!file) {
+      setSrc(undefined);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+
+  return src;
+};
+
+const useAttachmentSrc = () => {
+  const { file, src } = useAssistantState(
+    useShallow(({ attachment }): { file?: File; src?: string } => {
+      if (attachment.type !== "image") return {};
+      if (attachment.file) return { file: attachment.file };
+      const src = attachment.content?.filter((content) => content.type === "image")[0]
+        ?.image;
+      if (!src) return {};
+      return { src };
+    }),
+  );
+
+  return useFileSrc(file) ?? src;
+};
+
+type AttachmentPreviewProps = {
+  src: string;
+};
+
+const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  return (
+    <Image
+      src={src}
+      alt="Image Preview"
+      width={1}
+      height={1}
+      className={
+        isLoaded
+          ? "aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain"
+          : "aui-attachment-preview-image-loading hidden"
+      }
+      onLoadingComplete={() => setIsLoaded(true)}
+      priority={false}
+    />
+  );
+};
+
+const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
+  const src = useAttachmentSrc();
+
+  if (!src) return children;
+
+  return (
+    <Dialog>
+      <DialogTrigger
+        className="aui-attachment-preview-trigger cursor-pointer transition-colors hover:bg-accent/50"
+        asChild
+      >
+        {children}
+      </DialogTrigger>
+      <DialogContent className="aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&_svg]:text-background [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:!ring-0 [&>button]:hover:[&_svg]:text-destructive">
+        <DialogTitle className="aui-sr-only sr-only">
+          Image Attachment Preview
+        </DialogTitle>
+        <div className="aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background">
+          <AttachmentPreview src={src} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const AttachmentThumb: FC = () => {
+  const isImage = useAssistantState(
+    ({ attachment }) => attachment.type === "image",
+  );
+  const src = useAttachmentSrc();
+
+  return (
+    <Avatar className="aui-attachment-tile-avatar h-full w-full rounded-none">
+      <AvatarImage
+        src={src}
+        alt="Attachment preview"
+        className="aui-attachment-tile-image object-cover"
+      />
+      <AvatarFallback delayMs={isImage ? 200 : 0}>
+        <FileText className="aui-attachment-tile-fallback-icon size-8 text-muted-foreground" />
+      </AvatarFallback>
+    </Avatar>
+  );
+};
+
+const AttachmentUI: FC = () => {
+  const api = useAssistantApi();
+  const isComposer = api.attachment.source === "composer";
+
+  const isImage = useAssistantState(
+    ({ attachment }) => attachment.type === "image",
+  );
+  const typeLabel = useAssistantState(({ attachment }) => {
+    const type = attachment.type;
+    switch (type) {
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
+      default:
+        const _exhaustiveCheck: never = type;
+        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+    }
+  });
+
+  return (
+    <Tooltip>
+      <AttachmentPrimitive.Root
+        className={cn(
+          "aui-attachment-root relative",
+          isImage &&
+            "aui-attachment-root-composer only:[&>#attachment-tile]:size-24",
+        )}
+      >
+        <AttachmentPreviewDialog>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                "aui-attachment-tile size-14 cursor-pointer overflow-hidden rounded-[14px] border bg-muted transition-opacity hover:opacity-75",
+                isComposer &&
+                  "aui-attachment-tile-composer border-foreground/20",
+              )}
+              role="button"
+              id="attachment-tile"
+              aria-label={`${typeLabel} attachment`}
+            >
+              <AttachmentThumb />
+            </div>
+          </TooltipTrigger>
+        </AttachmentPreviewDialog>
+        {isComposer && <AttachmentRemove />}
+      </AttachmentPrimitive.Root>
+      <TooltipContent side="top">
+        <AttachmentPrimitive.Name />
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+const AttachmentRemove: FC = () => {
+  return (
+    <AttachmentPrimitive.Remove asChild>
+      <TooltipIconButton
+        tooltip="Remove file"
+        className="aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white text-muted-foreground opacity-100 shadow-sm hover:!bg-white [&_svg]:text-black hover:[&_svg]:text-destructive"
+        side="top"
+      >
+        <XIcon className="aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" />
+      </TooltipIconButton>
+    </AttachmentPrimitive.Remove>
+  );
+};
+
+export const UserMessageAttachments: FC = () => {
+  return (
+    <div className="aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2">
+      <MessagePrimitive.Attachments components={{ Attachment: AttachmentUI }} />
+    </div>
+  );
+};
+
+export const ComposerAttachments: FC = () => {
+  return (
+    <div className="aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pt-0.5 pb-1 empty:hidden">
+      <ComposerPrimitive.Attachments
+        components={{ Attachment: AttachmentUI }}
+      />
+    </div>
+  );
+};
+
+export const ComposerAddAttachment: FC = () => {
+  const composerRuntime = useComposerRuntime();
+
+  const handleAddImageAttachment = () => {
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = "image/*";
+    fileInput.multiple = false;
+    fileInput.hidden = true;
+    document.body.appendChild(fileInput);
+
+    fileInput.onchange = async (changeEvent) => {
+      const selectedFiles = (changeEvent.target as HTMLInputElement).files;
+      if (!selectedFiles) return;
+
+      for (const selectedFile of selectedFiles) {
+        if (selectedFile.type.startsWith("image/")) {
+          await composerRuntime.addAttachment(selectedFile);
+        }
+      }
+      document.body.removeChild(fileInput);
+    };
+
+    fileInput.click();
+  };
+
+  return (
+    <TooltipIconButton
+      type="button"
+      onClick={handleAddImageAttachment}
+      tooltip="Add Image"
+      side="bottom"
+      variant="ghost"
+      size="icon"
+      className="aui-composer-add-attachment size-[34px] rounded-full p-1 text-xs font-semibold hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+      aria-label="Upload Image"
+    >
+      <PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
+    </TooltipIconButton>
+  );
+};

components/assistant-ui/markdown-text.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import "@assistant-ui/react-markdown/styles/dot.css";
+
+import {
+  type CodeHeaderProps,
+  MarkdownTextPrimitive,
+  unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
+  useIsMarkdownCodeBlock,
+} from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+import { type FC, memo, useState } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
+
+import { SyntaxHighlighter } from "./syntax-highlighter";
+
+const MarkdownTextImpl = () => {
+  return (
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm]}
+      className="aui-md"
+      components={defaultComponents}
+    />
+  );
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);
+
+const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const onCopy = () => {
+    if (!code || isCopied) return;
+    copyToClipboard(code);
+  };
+
+  return (
+    <div className="aui-code-header-root mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-muted-foreground/15 px-4 py-2 text-sm font-semibold text-foreground dark:bg-muted-foreground/20">
+      <span className="aui-code-header-language lowercase [&>span]:text-xs">
+        {language}
+      </span>
+      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
+        {!isCopied && <CopyIcon />}
+        {isCopied && <CheckIcon />}
+      </TooltipIconButton>
+    </div>
+  );
+};
+
+const useCopyToClipboard = ({
+  copiedDuration = 3000,
+}: {
+  copiedDuration?: number;
+} = {}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const copyToClipboard = (value: string) => {
+    if (!value) return;
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
+
+  return { isCopied, copyToClipboard };
+};
+
+const defaultComponents = memoizeMarkdownComponents({
+  SyntaxHighlighter: SyntaxHighlighter,
+  
+  h1: ({ className, ...props }) => (
+    <h1
+      className={cn(
+        "aui-md-h1 mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2
+      className={cn(
+        "aui-md-h2 mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3
+      className={cn(
+        "aui-md-h3 mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4
+      className={cn(
+        "aui-md-h4 mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h5: ({ className, ...props }) => (
+    <h5
+      className={cn(
+        "aui-md-h5 my-4 text-lg font-semibold first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h6: ({ className, ...props }) => (
+    <h6
+      className={cn(
+        "aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  p: ({ className, ...props }) => (
+    <p
+      className={cn(
+        "aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  a: ({ className, ...props }) => (
+    <a
+      className={cn(
+        "aui-md-a font-medium text-primary underline underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      className={cn("aui-md-blockquote border-l-2 pl-6 italic", className)}
+      {...props}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul
+      className={cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className)}
+      {...props}
+    />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol
+      className={cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className)}
+      {...props}
+    />
+  ),
+  hr: ({ className, ...props }) => (
+    <hr className={cn("aui-md-hr my-5 border-b", className)} {...props} />
+  ),
+  table: ({ className, ...props }) => (
+    <table
+      className={cn(
+        "aui-md-table my-5 w-full border-separate border-spacing-0 overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  th: ({ className, ...props }) => (
+    <th
+      className={cn(
+        "aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      className={cn(
+        "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  tr: ({ className, ...props }) => (
+    <tr
+      className={cn(
+        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  sup: ({ className, ...props }) => (
+    <sup
+      className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
+      {...props}
+    />
+  ),
+  pre: ({ className, ...props }) => (
+    <pre
+      className={cn(
+        "aui-md-pre overflow-x-auto !rounded-t-none rounded-b-lg bg-black p-4 text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = useIsMarkdownCodeBlock();
+    return (
+      <code
+        className={cn(
+          !isCodeBlock &&
+            "aui-md-inline-code rounded border bg-muted font-semibold",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+  CodeHeader,
+});

components/assistant-ui/thread-list.tsx

@@ -0,0 +1,108 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: MIT
+//
+
+import type { FC } from "react";  
+import {  
+  ThreadListItemPrimitive,  
+  ThreadListPrimitive,  
+  useAssistantState,  
+} from "@assistant-ui/react";  
+import { ArchiveIcon, PlusIcon } from "lucide-react";  
+  
+import { Button } from "@/components/ui/button";  
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";  
+import { Skeleton } from "@/components/ui/skeleton";  
+  
+const generateRandomId = (): string => {
+  const array = new Uint8Array(8);
+  crypto.getRandomValues(array);
+  return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
+};
+
+export const ThreadList: FC = () => {  
+  return (  
+    <ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex flex-col items-stretch gap-1.5">  
+      <ThreadListNew />  
+      <ThreadListItems />  
+    </ThreadListPrimitive.Root>  
+  );  
+};  
+  
+const ThreadListNew: FC = () => {  
+  return (  
+    <ThreadListPrimitive.New asChild>  
+      <Button  
+        className="aui-thread-list-new flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start hover:bg-muted data-active:bg-muted"  
+        variant="ghost"  
+      >  
+        <PlusIcon />  
+        New Chat  
+      </Button>  
+    </ThreadListPrimitive.New>  
+  );  
+};  
+  
+const ThreadListItems: FC = () => {  
+  const isLoading = useAssistantState(({ threads }) => threads.isLoading);  
+  
+  if (isLoading) {  
+    return <ThreadListSkeleton />;  
+  }  
+  
+  return <ThreadListPrimitive.Items components={{ ThreadListItem }} />;  
+};  
+  
+const ThreadListSkeleton: FC = () => {  
+  return (  
+    <>  
+      {Array.from({ length: 5 }, (_, i) => (  
+        <div  
+          key={i}  
+          role="status"  
+          aria-label="Loading threads"  
+          aria-live="polite"  
+          className="aui-thread-list-skeleton-wrapper flex items-center gap-2 rounded-md px-3 py-2"  
+        >  
+          <Skeleton className="aui-thread-list-skeleton h-[22px] flex-grow" />  
+        </div>  
+      ))}  
+    </>  
+  );  
+};  
+  
+const ThreadListItem: FC = () => {  
+  return (  
+    <ThreadListItemPrimitive.Root className="aui-thread-list-item flex items-center gap-2 rounded-lg transition-all hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-active:bg-muted">  
+      <ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger flex-grow px-3 py-2 text-start">  
+        <ThreadListItemTitle />  
+      </ThreadListItemPrimitive.Trigger>  
+      <ThreadListItemArchive />  
+    </ThreadListItemPrimitive.Root>  
+  );  
+};  
+  
+const ThreadListItemTitle: FC = () => {  
+  const randomId = generateRandomId().toUpperCase();  
+  
+  return (  
+    <span className="aui-thread-list-item-title text-sm">  
+      <ThreadListItemPrimitive.Title fallback={`${randomId}`} />  
+    </span>  
+  );  
+};  
+  
+const ThreadListItemArchive: FC = () => {  
+  return (  
+    <ThreadListItemPrimitive.Archive asChild>  
+      <TooltipIconButton  
+        className="aui-thread-list-item-archive mr-3 ml-auto size-4 p-0 text-foreground hover:text-primary"  
+        variant="ghost"  
+        tooltip="Delete Chat"  
+      >  
+        <ArchiveIcon />  
+      </TooltipIconButton>  
+    </ThreadListItemPrimitive.Archive>  
+  );  
+};

components/assistant-ui/thread.tsx

@@ -0,0 +1,387 @@
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  PencilIcon,
+  RefreshCwIcon,
+  Square,
+} from "lucide-react";
+
+import {
+  ActionBarPrimitive,
+  BranchPickerPrimitive,
+  ComposerPrimitive,
+  ErrorPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+} from "@assistant-ui/react";
+
+import type { FC } from "react";
+import { LazyMotion, MotionConfig, domAnimation } from "motion/react";
+import * as m from "motion/react-m";
+
+import { Button } from "@/components/ui/button";
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import {
+  ComposerAddAttachment,
+  ComposerAttachments,
+  UserMessageAttachments,
+} from "@/components/assistant-ui/attachment";
+
+import { cn } from "@/lib/utils";
+
+export const Thread: FC = () => {
+  return (
+    <LazyMotion features={domAnimation}>
+      <MotionConfig reducedMotion="user">
+        <ThreadPrimitive.Root
+          className="aui-root aui-thread-root @container flex h-full flex-col bg-background"
+          style={{
+            ["--thread-max-width" as string]: "44rem",
+          }}
+        >
+          <ThreadPrimitive.Viewport className="aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4">
+            <ThreadPrimitive.If empty>
+              <ThreadWelcome />
+            </ThreadPrimitive.If>
+
+            <ThreadPrimitive.Messages
+              components={{
+                UserMessage,
+                EditComposer,
+                AssistantMessage,
+              }}
+            />
+
+            <ThreadPrimitive.If empty={false}>
+              <div className="aui-thread-viewport-spacer min-h-8 grow" />
+            </ThreadPrimitive.If>
+
+            <Composer />
+          </ThreadPrimitive.Viewport>
+        </ThreadPrimitive.Root>
+      </MotionConfig>
+    </LazyMotion>
+  );
+};
+
+const ThreadScrollToBottom: FC = () => {
+  return (
+    <ThreadPrimitive.ScrollToBottom asChild>
+      <TooltipIconButton
+        tooltip="Scroll to bottom"
+        variant="outline"
+        className="aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent"
+      >
+        <ArrowDownIcon />
+      </TooltipIconButton>
+    </ThreadPrimitive.ScrollToBottom>
+  );
+};
+
+const ThreadWelcome: FC = () => {
+  return (
+    <div className="aui-thread-welcome-root mx-auto my-auto flex w-full max-w-[var(--thread-max-width)] flex-grow flex-col">
+      <div className="aui-thread-welcome-center flex w-full flex-grow flex-col items-center justify-center">
+        <div className="aui-thread-welcome-message flex size-full flex-col justify-center px-8">
+          <m.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            className="aui-thread-welcome-message-motion-1 text-2xl font-semibold"
+          >
+            Hello there!
+          </m.div>
+          <m.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            transition={{ delay: 0.1 }}
+            className="aui-thread-welcome-message-motion-2 text-2xl text-muted-foreground/65"
+          >
+            How can I help you today?
+          </m.div>
+        </div>
+      </div>
+      <ThreadSuggestions />
+    </div>
+  );
+};
+
+const ThreadSuggestions: FC = () => {
+  return (
+    <div className="aui-thread-welcome-suggestions grid w-full gap-2 pb-4 @md:grid-cols-2">
+      {[
+        {
+          title: "Tell me about yourself",
+          label: "",
+          action: "Tell me about yourself",
+        },
+        {
+          title: "Explain React hooks",
+          label: "like useState and useEffect",
+          action: "Explain React hooks like useState and useEffect",
+        },
+        {
+          title: "Write a SQL query",
+          label: "to find top customers",
+          action: "Write a SQL query to find top customers",
+        },
+        {
+          title: "Create a meal plan",
+          label: "for healthy weight loss",
+          action: "Create a meal plan for healthy weight loss",
+        },
+      ].map((suggestedAction, index) => (
+        <m.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          transition={{ delay: 0.05 * index }}
+          key={`suggested-action-${suggestedAction.title}-${index}`}
+          className="aui-thread-welcome-suggestion-display [&:nth-child(n+3)]:hidden @md:[&:nth-child(n+3)]:block"
+        >
+          <ThreadPrimitive.Suggestion
+            prompt={suggestedAction.action}
+            send
+            asChild
+          >
+            <Button
+              variant="ghost"
+              className="aui-thread-welcome-suggestion h-auto w-full flex-1 flex-wrap items-start justify-start gap-1 rounded-3xl border px-5 py-4 text-left text-sm @md:flex-col dark:hover:bg-accent/60"
+              aria-label={suggestedAction.action}
+            >
+              <span className="aui-thread-welcome-suggestion-text-1 font-medium">
+                {suggestedAction.title}
+              </span>
+              <span className="aui-thread-welcome-suggestion-text-2 text-muted-foreground">
+                {suggestedAction.label}
+              </span>
+            </Button>
+          </ThreadPrimitive.Suggestion>
+        </m.div>
+      ))}
+    </div>
+  );
+};
+
+const Composer: FC = () => {
+  return (
+    <div className="aui-composer-wrapper sticky bottom-0 mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
+      <ThreadScrollToBottom />
+      <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col rounded-3xl border border-border bg-muted px-1 pt-2 shadow-[0_9px_9px_0px_rgba(0,0,0,0.01),0_2px_5px_0px_rgba(0,0,0,0.06)] dark:border-muted-foreground/15">
+        <ComposerAttachments />
+        <ComposerPrimitive.Input
+          placeholder="Send a message..."
+          className="aui-composer-input mb-1 max-h-32 min-h-16 w-full resize-none bg-transparent px-3.5 pt-1.5 pb-3 text-base outline-none placeholder:text-muted-foreground focus:outline-primary"
+          rows={1}
+          autoFocus
+          aria-label="Message input"
+        />
+        <ComposerAction />
+      </ComposerPrimitive.Root>
+    </div>
+  );
+};
+
+const ComposerAction: FC = () => {
+  return (
+    <div className="aui-composer-action-wrapper relative mx-1 mt-2 mb-2 flex items-center justify-between">
+      <ComposerAddAttachment />
+
+      <ThreadPrimitive.If running={false}>
+        <ComposerPrimitive.Send asChild>
+          <TooltipIconButton
+            tooltip="Send message"
+            side="bottom"
+            type="submit"
+            variant="default"
+            size="icon"
+            className="aui-composer-send size-[34px] rounded-full p-1"
+            aria-label="Send message"
+          >
+            <ArrowUpIcon className="aui-composer-send-icon size-5" />
+          </TooltipIconButton>
+        </ComposerPrimitive.Send>
+      </ThreadPrimitive.If>
+
+      <ThreadPrimitive.If running>
+        <ComposerPrimitive.Cancel asChild>
+          <Button
+            type="button"
+            variant="default"
+            size="icon"
+            className="aui-composer-cancel size-[34px] rounded-full border border-muted-foreground/60 hover:bg-primary/75 dark:border-muted-foreground/90"
+            aria-label="Stop generating"
+          >
+            <Square className="aui-composer-cancel-icon size-3.5 fill-white dark:fill-black" />
+          </Button>
+        </ComposerPrimitive.Cancel>
+      </ThreadPrimitive.If>
+    </div>
+  );
+};
+
+const MessageError: FC = () => {
+  return (
+    <MessagePrimitive.Error>
+      <ErrorPrimitive.Root className="aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive dark:bg-destructive/5 dark:text-red-200">
+        <ErrorPrimitive.Message className="aui-message-error-message line-clamp-2" />
+      </ErrorPrimitive.Root>
+    </MessagePrimitive.Error>
+  );
+};
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root asChild>
+      <div
+        className="aui-assistant-message-root relative mx-auto w-full max-w-[var(--thread-max-width)] animate-in py-4 duration-150 ease-out fade-in slide-in-from-bottom-1 last:mb-24"
+        data-role="assistant"
+      >
+        <div className="aui-assistant-message-content mx-2 leading-7 break-words text-foreground">
+          <MessagePrimitive.Parts
+            components={{
+              Text: MarkdownText,
+              tools: { Fallback: ToolFallback },
+            }}
+          />
+          <MessageError />
+        </div>
+
+        <div className="aui-assistant-message-footer mt-2 ml-2 flex">
+          <BranchPicker />
+          <AssistantActionBar />
+        </div>
+      </div>
+    </MessagePrimitive.Root>
+  );
+};
+
+const AssistantActionBar: FC = () => {
+  return (
+    <ActionBarPrimitive.Root
+      hideWhenRunning
+      autohide="not-last"
+      autohideFloat="single-branch"
+      className="aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm"
+    >
+      <ActionBarPrimitive.Copy asChild>
+        <TooltipIconButton tooltip="Copy">
+          <MessagePrimitive.If copied>
+            <CheckIcon />
+          </MessagePrimitive.If>
+          <MessagePrimitive.If copied={false}>
+            <CopyIcon />
+          </MessagePrimitive.If>
+        </TooltipIconButton>
+      </ActionBarPrimitive.Copy>
+      <ActionBarPrimitive.Reload asChild>
+        <TooltipIconButton tooltip="Refresh">
+          <RefreshCwIcon />
+        </TooltipIconButton>
+      </ActionBarPrimitive.Reload>
+    </ActionBarPrimitive.Root>
+  );
+};
+
+const UserMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root asChild>
+      <div
+        className="aui-user-message-root mx-auto grid w-full max-w-[var(--thread-max-width)] animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 px-2 py-4 duration-150 ease-out fade-in slide-in-from-bottom-1 first:mt-3 last:mb-5 [&:where(>*)]:col-start-2"
+        data-role="user"
+      >
+        <UserMessageAttachments />
+
+        <div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
+          <div className="aui-user-message-content rounded-3xl bg-muted px-5 py-2.5 break-words text-foreground">
+            <MessagePrimitive.Parts />
+          </div>
+          <div className="aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2">
+            <UserActionBar />
+          </div>
+        </div>
+
+        <BranchPicker className="aui-user-branch-picker col-span-full col-start-1 row-start-3 -mr-1 justify-end" />
+      </div>
+    </MessagePrimitive.Root>
+  );
+};
+
+const UserActionBar: FC = () => {
+  return (
+    <ActionBarPrimitive.Root
+      hideWhenRunning
+      autohide="not-last"
+      className="aui-user-action-bar-root flex flex-col items-end"
+    >
+      <ActionBarPrimitive.Edit asChild>
+        <TooltipIconButton tooltip="Edit" className="aui-user-action-edit p-4">
+          <PencilIcon />
+        </TooltipIconButton>
+      </ActionBarPrimitive.Edit>
+    </ActionBarPrimitive.Root>
+  );
+};
+
+const EditComposer: FC = () => {
+  return (
+    <div className="aui-edit-composer-wrapper mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 px-2 first:mt-4">
+      <ComposerPrimitive.Root className="aui-edit-composer-root ml-auto flex w-full max-w-7/8 flex-col rounded-xl bg-muted">
+        <ComposerPrimitive.Input
+          className="aui-edit-composer-input flex min-h-[60px] w-full resize-none bg-transparent p-4 text-foreground outline-none"
+          autoFocus
+        />
+
+        <div className="aui-edit-composer-footer mx-3 mb-3 flex items-center justify-center gap-2 self-end">
+          <ComposerPrimitive.Cancel asChild>
+            <Button variant="ghost" size="sm" aria-label="Cancel edit">
+              Cancel
+            </Button>
+          </ComposerPrimitive.Cancel>
+          <ComposerPrimitive.Send asChild>
+            <Button size="sm" aria-label="Update message">
+              Update
+            </Button>
+          </ComposerPrimitive.Send>
+        </div>
+      </ComposerPrimitive.Root>
+    </div>
+  );
+};
+
+const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
+  className,
+  ...rest
+}) => {
+  return (
+    <BranchPickerPrimitive.Root
+      hideWhenSingleBranch
+      className={cn(
+        "aui-branch-picker-root mr-2 -ml-2 inline-flex items-center text-xs text-muted-foreground",
+        className,
+      )}
+      {...rest}
+    >
+      <BranchPickerPrimitive.Previous asChild>
+        <TooltipIconButton tooltip="Previous">
+          <ChevronLeftIcon />
+        </TooltipIconButton>
+      </BranchPickerPrimitive.Previous>
+      <span className="aui-branch-picker-state font-medium">
+        <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+      </span>
+      <BranchPickerPrimitive.Next asChild>
+        <TooltipIconButton tooltip="Next">
+          <ChevronRightIcon />
+        </TooltipIconButton>
+      </BranchPickerPrimitive.Next>
+    </BranchPickerPrimitive.Root>
+  );
+};

components/assistant-ui/threadlist-sidebar.tsx

@@ -0,0 +1,94 @@
+//    
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>    
+// SPDX-License-Identifier: MIT    
+//    
+    
+import * as React from "react";        
+import { MessagesSquare } from "lucide-react";        
+import Link from "next/link";        
+import {        
+  Sidebar,        
+  SidebarContent,        
+  SidebarFooter,        
+  SidebarHeader,        
+  SidebarMenu,        
+  SidebarMenuButton,        
+  SidebarMenuItem,        
+  SidebarRail,        
+} from "@/components/ui/sidebar";        
+import { ThreadList } from "@/components/assistant-ui/thread-list";        
+        
+export function ThreadListSidebar({        
+  ...props        
+}: React.ComponentProps<typeof Sidebar>) {        
+  return (        
+    <Sidebar {...props}>        
+      <SidebarHeader className="aui-sidebar-header mb-2 border-b">        
+        <div className="aui-sidebar-header-content flex items-center justify-between">        
+          <SidebarMenu>        
+            <SidebarMenuItem>        
+              <SidebarMenuButton size="lg" asChild>        
+                <Link        
+                  href="https://umint-ai.hf.space"        
+                  target="_blank"        
+                  rel="noopener noreferrer"        
+                >        
+                  <div className="aui-sidebar-header-icon-wrapper flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">        
+                    <MessagesSquare className="aui-sidebar-header-icon size-4" />        
+                  </div>        
+                  <div className="aui-sidebar-header-heading mr-6 flex flex-col gap-0.5 leading-none">        
+                    <span className="aui-sidebar-header-title font-semibold">        
+                      Demo Playground        
+                    </span>        
+                  </div>        
+                </Link>        
+              </SidebarMenuButton>        
+            </SidebarMenuItem>        
+          </SidebarMenu>        
+        </div>        
+      </SidebarHeader>        
+      <SidebarContent className="aui-sidebar-content px-2">        
+        <ThreadList />        
+      </SidebarContent>        
+      <SidebarRail />        
+      <SidebarFooter className="aui-sidebar-footer border-t">        
+        <SidebarMenu>        
+          <SidebarMenuItem>        
+            <SidebarMenuButton size="lg" asChild>        
+              <Link        
+                href="https://umint-openwebui.hf.space"        
+                target="_blank"        
+                rel="noopener noreferrer"        
+              >        
+                <div className="aui-sidebar-footer-heading flex flex-col gap-0.5 leading-none">        
+                  <span className="aui-sidebar-footer-title font-semibold inline-flex items-center gap-1">        
+                    Switch to the full version
+                    <svg   
+                      width="7.5"   
+                      height="7.5"   
+                      viewBox="0 0 12 12"   
+                      fill="none"   
+                      xmlns="http://www.w3.org/2000/svg"  
+                      className="inline-block"  
+                    >  
+                      <path   
+                        d="M3.5 1.5L8.5 1.5L8.5 6.5M8.5 1.5L1.5 8.5L8.5 1.5Z"   
+                        stroke="currentColor"   
+                        strokeWidth="1.5"   
+                        strokeLinecap="round"   
+                        strokeLinejoin="round"  
+                      />  
+                    </svg>        
+                  </span>        
+                  <span className="text-[8.5px] text-muted-foreground leading-tight">    
+                    for a more advanced experience, rich in features, and access to a more complete set of premium AI models    
+                  </span>        
+                </div>        
+              </Link>        
+            </SidebarMenuButton>        
+          </SidebarMenuItem>        
+        </SidebarMenu>        
+      </SidebarFooter>        
+    </Sidebar>        
+  );        
+}

components/assistant-ui/tool-fallback.tsx

@@ -0,0 +1,46 @@
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+export const ToolFallback: ToolCallMessagePartComponent = ({
+  toolName,
+  argsText,
+  result,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  return (
+    <div className="aui-tool-fallback-root mb-4 flex w-full flex-col gap-3 rounded-lg border py-3">
+      <div className="aui-tool-fallback-header flex items-center gap-2 px-4">
+        <CheckIcon className="aui-tool-fallback-icon size-4" />
+        <p className="aui-tool-fallback-title flex-grow">
+          Used tool: <b>{toolName}</b>
+        </p>
+        <Button onClick={() => setIsCollapsed(!isCollapsed)}>
+          {isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        </Button>
+      </div>
+      {!isCollapsed && (
+        <div className="aui-tool-fallback-content flex flex-col gap-2 border-t pt-2">
+          <div className="aui-tool-fallback-args-root px-4">
+            <pre className="aui-tool-fallback-args-value whitespace-pre-wrap">
+              {argsText}
+            </pre>
+          </div>
+          {result !== undefined && (
+            <div className="aui-tool-fallback-result-root border-t border-dashed px-4 pt-2">
+              <p className="aui-tool-fallback-result-header font-semibold">
+                Result:
+              </p>
+              <pre className="aui-tool-fallback-result-content whitespace-pre-wrap">
+                {typeof result === "string"
+                  ? result
+                  : JSON.stringify(result, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

components/assistant-ui/tooltip-icon-button.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { ComponentPropsWithRef, forwardRef } from "react";
+import { Slottable } from "@radix-ui/react-slot";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+  tooltip: string;
+  side?: "top" | "bottom" | "left" | "right";
+};
+
+export const TooltipIconButton = forwardRef<
+  HTMLButtonElement,
+  TooltipIconButtonProps
+>(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          {...rest}
+          className={cn("aui-button-icon size-6 p-1", className)}
+          ref={ref}
+        >
+          <Slottable>{children}</Slottable>
+          <span className="aui-sr-only sr-only">{tooltip}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side={side}>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+});
+
+TooltipIconButton.displayName = "TooltipIconButton";

components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };