feat(webui): add initial webui with websocket chat flow

2026-04-18 18:51:53 +00:00
parent 6bfb75ed03
commit 9ed3031a42
76 changed files with 7088 additions and 38 deletions
@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+  oneDark,
+  oneLight,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+
+import { cn } from "@/lib/utils";
+
+interface CodeBlockProps {
+  language?: string;
+  code: string;
+  className?: string;
+}
+
+export function CodeBlock({ language, code, className }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = () => {
+    if (!navigator.clipboard) return;
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1_500);
+    });
+  };
+
+  const isDark =
+    typeof window !== "undefined"
+      ? document.documentElement.classList.contains("dark")
+      : true;
+
+  return (
+    <div className={cn("overflow-hidden rounded-lg", className)}>
+      <div className="flex items-center justify-between bg-zinc-900 px-4 py-1.5 text-xs font-medium text-zinc-200">
+        <span className="lowercase">{language || "code"}</span>
+        <button
+          type="button"
+          onClick={onCopy}
+          className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-zinc-300 transition-colors hover:bg-zinc-800 hover:text-zinc-100"
+          aria-label="Copy code"
+        >
+          {copied ? (
+            <Check className="h-3.5 w-3.5" />
+          ) : (
+            <Copy className="h-3.5 w-3.5" />
+          )}
+          <span>{copied ? "Copied" : "Copy"}</span>
+        </button>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={isDark ? oneDark : oneLight}
+        customStyle={{
+          margin: 0,
+          padding: "1rem",
+          background: "var(--tw-prose-pre-bg, #0a0a0a)",
+          fontSize: "0.8125rem",
+          lineHeight: 1.55,
+        }}
+        PreTag="pre"
+        wrapLongLines
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}