Qa chatbot styling (#2320)

* style(qa-chatbot): improve UI/UX and component styling

- Add welcome screen with example questions when chat is empty
- Implement auto-resizing textarea with scroll-to-bottom behavior
- Update reasoning component: remove auto-open, add animated dots to 'Thinking...' state
- Improve tool component: replace status badges with icons, remove border
- Update link colors in response component for better visibility
- Move warning message to bottom of chat interface

* style: update code block styling in QA chatbot

- Remove border from code blocks
- Change background from white to light grey

These changes only affect the qa chatbot. The CodeBlock component is also used on the home page (feature tabs), but they override the background style, so no visible changes there.

* fix(qa-chatbot): fix logic for when to show feedback buttons

- Add logic to identify the last text part in a message
- Introduce conditions to determine if a message is complete before displaying feedback actions

* fix(qa-chatbot): only show feedback buttons once message completed

* style(qa-chatbot): align spacing between message parts

- Add conditional spacing between different types of message parts (text, reasoning, dynamic-tool) for  consistent layout

Author: Lotte-Verheyden

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>
 );