fix status page link

Author: maxdeichmann

components/ai-elements/code-block.tsx

@@ -41,15 +41,15 @@ export const CodeBlock = ({
     margin: 0,
     padding: '1rem',
     fontSize: '0.875rem',
-    background: 'hsl(var(--background))',
+    background: 'hsl(var(--muted) / 0.02)',
     color: 'hsl(var(--foreground))',
   }
 
   return (
       <CodeBlockContext.Provider value={{ code }}>
     <div
       className={cn(
-        'relative w-full overflow-hidden rounded-md border bg-background text-foreground',
+        'relative w-full overflow-hidden rounded-md bg-muted/30 text-foreground',
         className,
       )}
       {...props}

components/ai-elements/prompt-input.tsx

@@ -6,7 +6,7 @@ import type {
   HTMLAttributes,
   KeyboardEventHandler,
 } from "react";
-import { Children } from "react";
+import { Children, forwardRef } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -36,14 +36,17 @@ export type PromptInputTextareaProps = ComponentProps<typeof Textarea> & {
   maxHeight?: number;
 };
 
-export const PromptInputTextarea = ({
+export const PromptInputTextarea = forwardRef<
+  HTMLTextAreaElement,
+  PromptInputTextareaProps
+>(({
   onChange,
   className,
   placeholder = "What would you like to know?",
   minHeight = 48,
   maxHeight = 164,
   ...props
-}: PromptInputTextareaProps) => {
+}, ref) => {
   const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
     if (e.key === "Enter") {
       if (e.shiftKey) {
@@ -62,6 +65,7 @@ export const PromptInputTextarea = ({
 
   return (
     <Textarea
+      ref={ref}
       className={cn(
         "w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0",
         "bg-transparent dark:bg-transparent field-sizing-content max-h-[6lh]",
@@ -77,7 +81,8 @@ export const PromptInputTextarea = ({
       {...props}
     />
   );
-};
+});
+PromptInputTextarea.displayName = "PromptInputTextarea";
 
 export type PromptInputToolbarProps = HTMLAttributes<HTMLDivElement>;
 

components/ai-elements/reasoning.tsx

@@ -73,11 +73,10 @@ export const Reasoning = memo(
       }
     }, [isStreaming, startTime, setDuration]);
 
-    // Auto-open when streaming starts, auto-close when streaming ends (once only)
+    // Keep collapsed by default - don't auto-open when streaming
+    // Auto-close when streaming ends (once only) if it was opened
     useEffect(() => {
-      if (isStreaming && !isOpen) {
-        setIsOpen(true);
-      } else if (!isStreaming && isOpen && !defaultOpen && !hasAutoClosedRef) {
+      if (!isStreaming && isOpen && !defaultOpen && !hasAutoClosedRef) {
         // Add a small delay before closing to allow user to see the content
         const timer = setTimeout(() => {
           setIsOpen(false);
@@ -122,6 +121,30 @@ export const ReasoningTrigger = memo(
     ...props
   }: ReasoningTriggerProps) => {
     const { isStreaming, isOpen, duration } = useReasoning();
+    const [dots, setDots] = useState("");
+
+    useEffect(() => {
+      if (!isStreaming) {
+        setDots("");
+        return;
+      }
+
+      let interval: NodeJS.Timeout;
+      let dotCount = 0;
+
+      const animateDots = () => {
+        dotCount = (dotCount % 3) + 1;
+        setDots(".".repeat(dotCount));
+      };
+
+      // Start immediately
+      animateDots();
+      interval = setInterval(animateDots, 500);
+
+      return () => {
+        if (interval) clearInterval(interval);
+      };
+    }, [isStreaming]);
 
     return (
       <CollapsibleTrigger
@@ -135,7 +158,10 @@ export const ReasoningTrigger = memo(
           <>
             <BrainIcon className="size-4" />
             {isStreaming || duration === 0 ? (
-              <p>Thinking...</p>
+              <p className="flex items-center">
+                <span>Thinking</span>
+                <span className="w-4 inline-block">{dots}</span>
+              </p>
             ) : (
               <p>Thought for {duration} seconds</p>
             )}
@@ -168,7 +194,7 @@ export const ReasoningContent = memo(
       )}
       {...props}
     >
-      <Response className="grid gap-2">{children}</Response>
+      <Response className="grid gap-2 text-muted-foreground italic">{children}</Response>
     </CollapsibleContent>
   )
 );

components/ai-elements/response.tsx

@@ -204,7 +204,7 @@ const components: Options["components"] = {
   ),
   a: ({ node, children, className, ...props }) => (
     <a
-      className={cn("font-medium text-primary underline", className)}
+      className={cn("font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline", className)}
       rel="noreferrer"
       target="_blank"
       {...props}

components/ai-elements/tool.tsx

@@ -9,7 +9,6 @@ import {
   XCircleIcon,
 } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
-import { Badge } from "@/components/ui/badge";
 import {
   Collapsible,
   CollapsibleContent,
@@ -23,7 +22,7 @@ export type ToolProps = ComponentProps<typeof Collapsible>;
 
 export const Tool = ({ className, ...props }: ToolProps) => (
   <Collapsible
-    className={cn("not-prose mb-4 w-full rounded-md border", className)}
+    className={cn("not-prose mb-4 w-full rounded-md", className)}
     {...props}
   />
 );
@@ -34,27 +33,15 @@ export type ToolHeaderProps = {
   className?: string;
 };
 
-const getStatusBadge = (status: ToolUIPart["state"]) => {
-  const labels = {
-    "input-streaming": "Pending",
-    "input-available": "Running",
-    "output-available": "Completed",
-    "output-error": "Error",
-  } as const;
-
+const getStatusIcon = (status: ToolUIPart["state"]) => {
   const icons = {
     "input-streaming": <CircleIcon className="size-4" />,
     "input-available": <ClockIcon className="size-4 animate-pulse" />,
     "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
     "output-error": <XCircleIcon className="size-4 text-red-600" />,
   } as const;
 
-  return (
-    <Badge className="rounded-full text-xs gap-2" variant="secondary">
-      {icons[status]}
-      {labels[status]}
-    </Badge>
-  );
+  return icons[status];
 };
 
 export const ToolHeader = ({
@@ -64,15 +51,15 @@ export const ToolHeader = ({
   ...props
 }: ToolHeaderProps) => (
   <CollapsibleTrigger
-    className={cn("flex w-full items-center justify-between gap-4", className)}
+    className={cn("flex w-full items-center gap-4", className)}
     {...props}
   >
     <div className="flex items-center gap-2">
       <WrenchIcon className="size-4 text-muted-foreground" />
-      <span className="font-medium text-sm">{type}</span>
-      {getStatusBadge(state)}
+      <span className="font-medium text-sm text-muted-foreground">{type}</span>
+      {getStatusIcon(state)}
+      <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
     </div>
-    <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
   </CollapsibleTrigger>
 );