feat: bring back the deer

frontend/components.json

@@ -19,6 +19,7 @@
     "hooks": "@/hooks"
   },
   "registries": {
-    "@ai-elements": "https://registry.ai-sdk.dev/{name}.json"
+    "@ai-elements": "https://registry.ai-sdk.dev/{name}.json",
+    "@magicui": "https://magicui.design/r/{name}"
   }
 }

frontend/src/app/workspace/chats/[thread_id]/layout.tsx

@@ -1,5 +1,10 @@
 "use client";
 
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+import { useMemo } from "react";
+
+import { FlickeringGrid } from "@/components/ui/flickering-grid";
 import { ArtifactsProvider } from "@/components/workspace/artifacts";
 
 export default function ChatLayout({
@@ -7,5 +12,35 @@ export default function ChatLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <ArtifactsProvider>{children}</ArtifactsProvider>;
+  const pathname = usePathname();
+  const isNewThread = useMemo(() => {
+    return pathname === "/workspace/chats/new";
+  }, [pathname]);
+  const { theme, systemTheme } = useTheme();
+  const currentTheme = theme === "system" ? systemTheme : theme;
+  return (
+    <ArtifactsProvider>
+      {isNewThread && (
+        <>
+          <FlickeringGrid
+            className="absolute inset-0 z-0 translate-y-[2vh] mask-center mask-no-repeat"
+            squareSize={4}
+            gridGap={4}
+            color={currentTheme === "dark" ? "#60A5FA" : "#444"}
+            maxOpacity={currentTheme === "dark" ? 0.04 : 0.035}
+            flickerChance={0.1}
+          />
+          <FlickeringGrid
+            className="absolute inset-0 z-0 translate-y-[2vh] mask-[url(/images/deer.svg)] mask-size-[100vw] mask-center mask-no-repeat md:mask-size-[72vh]"
+            squareSize={4}
+            gridGap={4}
+            color={currentTheme === "dark" ? "#60A5FA" : "#444"}
+            maxOpacity={currentTheme === "dark" ? 0.15 : 0.13}
+            flickerChance={0.12}
+          />
+        </>
+      )}
+      {children}
+    </ArtifactsProvider>
+  );
 }

frontend/src/app/workspace/chats/[thread_id]/page.tsx

@@ -101,7 +101,14 @@ export default function ChatPage() {
           minSize={artifactsOpen ? 30 : 100}
         >
           <div className="relative flex size-full min-h-0 justify-between">
-            <header className="bg-background/80 absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4 backdrop-blur">
+            <header
+              className={cn(
+                "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4",
+                isNewThread
+                  ? "bg-background/0 backdrop-blur-none"
+                  : "bg-background/80 backdrop-blur",
+              )}
+            >
               <div className="flex w-full items-center text-sm font-medium">
                 {title !== "Untitled" && (
                   <ThreadTitle threadId={threadId} threadTitle={title} />
@@ -144,14 +151,14 @@ export default function ChatPage() {
                 >
                   <div
                     className={cn(
-                      "absolute right-0 bottom-[148px] left-0 flex",
+                      "absolute right-0 bottom-[136px] left-0 flex",
                       isNewThread ? "" : "pointer-events-none opacity-0",
                     )}
                   >
                     <Welcome />
                   </div>
                   <InputBox
-                    className={cn("w-full")}
+                    className={cn("bg-background/5 w-full")}
                     autoFocus={isNewThread}
                     status={thread.isLoading ? "streaming" : "ready"}
                     context={settings.context}

frontend/src/components/ui/flickering-grid.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  squareSize?: number
+  gridGap?: number
+  flickerChance?: number
+  color?: string
+  width?: number
+  height?: number
+  className?: string
+  maxOpacity?: number
+}
+
+export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
+  squareSize = 4,
+  gridGap = 6,
+  flickerChance = 0.3,
+  color = "rgb(0, 0, 0)",
+  width,
+  height,
+  className,
+  maxOpacity = 0.3,
+  ...props
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isInView, setIsInView] = useState(false)
+  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })
+
+  const memoizedColor = useMemo(() => {
+    const toRGBA = (color: string) => {
+      if (typeof window === "undefined") {
+        return `rgba(0, 0, 0,`
+      }
+      const canvas = document.createElement("canvas")
+      canvas.width = canvas.height = 1
+      const ctx = canvas.getContext("2d")
+      if (!ctx) return "rgba(255, 0, 0,"
+      ctx.fillStyle = color
+      ctx.fillRect(0, 0, 1, 1)
+      const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)
+      return `rgba(${r}, ${g}, ${b},`
+    }
+    return toRGBA(color)
+  }, [color])
+
+  const setupCanvas = useCallback(
+    (canvas: HTMLCanvasElement, width: number, height: number) => {
+      const dpr = window.devicePixelRatio || 1
+      canvas.width = width * dpr
+      canvas.height = height * dpr
+      canvas.style.width = `${width}px`
+      canvas.style.height = `${height}px`
+      const cols = Math.floor(width / (squareSize + gridGap))
+      const rows = Math.floor(height / (squareSize + gridGap))
+
+      const squares = new Float32Array(cols * rows)
+      for (let i = 0; i < squares.length; i++) {
+        squares[i] = Math.random() * maxOpacity
+      }
+
+      return { cols, rows, squares, dpr }
+    },
+    [squareSize, gridGap, maxOpacity]
+  )
+
+  const updateSquares = useCallback(
+    (squares: Float32Array, deltaTime: number) => {
+      for (let i = 0; i < squares.length; i++) {
+        if (Math.random() < flickerChance * deltaTime) {
+          squares[i] = Math.random() * maxOpacity
+        }
+      }
+    },
+    [flickerChance, maxOpacity]
+  )
+
+  const drawGrid = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      width: number,
+      height: number,
+      cols: number,
+      rows: number,
+      squares: Float32Array,
+      dpr: number
+    ) => {
+      ctx.clearRect(0, 0, width, height)
+      ctx.fillStyle = "transparent"
+      ctx.fillRect(0, 0, width, height)
+
+      for (let i = 0; i < cols; i++) {
+        for (let j = 0; j < rows; j++) {
+          const opacity = squares[i * rows + j]
+          ctx.fillStyle = `${memoizedColor}${opacity})`
+          ctx.fillRect(
+            i * (squareSize + gridGap) * dpr,
+            j * (squareSize + gridGap) * dpr,
+            squareSize * dpr,
+            squareSize * dpr
+          )
+        }
+      }
+    },
+    [memoizedColor, squareSize, gridGap]
+  )
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const container = containerRef.current
+    if (!canvas || !container) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    let animationFrameId: number
+    let gridParams: ReturnType<typeof setupCanvas>
+
+    const updateCanvasSize = () => {
+      const newWidth = width || container.clientWidth
+      const newHeight = height || container.clientHeight
+      setCanvasSize({ width: newWidth, height: newHeight })
+      gridParams = setupCanvas(canvas, newWidth, newHeight)
+    }
+
+    updateCanvasSize()
+
+    let lastTime = 0
+    const animate = (time: number) => {
+      if (!isInView) return
+
+      const deltaTime = (time - lastTime) / 1000
+      lastTime = time
+
+      updateSquares(gridParams.squares, deltaTime)
+      drawGrid(
+        ctx,
+        canvas.width,
+        canvas.height,
+        gridParams.cols,
+        gridParams.rows,
+        gridParams.squares,
+        gridParams.dpr
+      )
+      animationFrameId = requestAnimationFrame(animate)
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateCanvasSize()
+    })
+
+    resizeObserver.observe(container)
+
+    const intersectionObserver = new IntersectionObserver(
+      ([entry]) => {
+        setIsInView(entry.isIntersecting)
+      },
+      { threshold: 0 }
+    )
+
+    intersectionObserver.observe(canvas)
+
+    if (isInView) {
+      animationFrameId = requestAnimationFrame(animate)
+    }
+
+    return () => {
+      cancelAnimationFrame(animationFrameId)
+      resizeObserver.disconnect()
+      intersectionObserver.disconnect()
+    }
+  }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(`h-full w-full ${className}`)}
+      {...props}
+    >
+      <canvas
+        ref={canvasRef}
+        className="pointer-events-none"
+        style={{
+          width: canvasSize.width,
+          height: canvasSize.height,
+        }}
+      />
+    </div>
+  )
+}

frontend/src/components/workspace/input-box.tsx

@@ -89,7 +89,7 @@ export function InputBox({
     <PromptInput
       className={cn(
         "bg-background/85 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
-        "h-48 translate-y-14 overflow-hidden",
+        "-translate-y-4 overflow-hidden",
         className,
       )}
       globalDrop
@@ -127,11 +127,23 @@ export function InputBox({
           >
             {selectedModel?.supports_thinking && (
               <PromptInputButton onClick={handleThinkingToggle}>
-                {context.thinking_enabled ? (
-                  <LightbulbIcon className="text-primary size-4" />
-                ) : (
-                  <LightbulbOffIcon className="size-4" />
-                )}
+                <>
+                  {context.thinking_enabled ? (
+                    <LightbulbIcon className="text-primary size-4" />
+                  ) : (
+                    <LightbulbOffIcon className="size-4" />
+                  )}
+                  <span
+                    className={cn(
+                      "text-xs font-normal",
+                      context.thinking_enabled
+                        ? "text-primary"
+                        : "text-muted-foreground",
+                    )}
+                  >
+                    Thinking
+                  </span>
+                </>
               </PromptInputButton>
             )}
           </Tooltip>