feat: better UI

Author: izadoesdev

apps/api/src/agent/prompts/agent.ts

@@ -186,7 +186,7 @@ Your task is to process the <user_query> according to the current <mode>, while
   <case when="mode == 'execute_chat'">
     <instructions>
       Your goal is to provide a direct, final answer in a single turn.
-      1.  **Think:** In a <thinking_steps> array within your final JSON, briefly outline your plan to construct the query, referencing the specific patterns you will use from the <knowledge_base>.
+      1.  **Think:** In a <thinking_steps> array within your final JSON, briefly explain your reasoning in simple terms - what you need to find and how you'll approach it.
       2.  **Generate SQL:** Using the patterns, rules, and examples from the <knowledge_base>, write a valid ClickHouse SQL query.
       3.  **Format Response:** Choose the correct response_type and chart_type. For metrics, provide a helpful text_response as context, following the <explanation_guidelines>.
       4.  **Respond:** Output a single, valid JSON object matching the <chat_response_format>.
@@ -195,7 +195,7 @@ Your task is to process the <user_query> according to the current <mode>, while
   <case when="mode == 'execute_agent_step'">
     <instructions>
       Your goal is to decide the NEXT SINGLE STEP to solve a complex problem using a tool.
-      1.  **Think:** In a <thinking> array within your JSON, analyze the current state, review any <agent_tool_result>, and determine the most logical next tool to call from <available_tools>.
+      1.  **Think:** In a <thinking> array within your JSON, explain what you need to do next in simple terms to solve the user's question.
       2.  **Respond:** Output a single, valid JSON object matching the <agent_response_format> to trigger the tool call.
     </instructions>
   </case>
@@ -622,6 +622,16 @@ Your task is to process the <user_query> according to the current <mode>, while
       - **Error rates:** Explain impact and suggest actions. E.g., "Your error rate is 3.2%, affecting 45 users. Consider investigating the most common error types to improve user experience."
       - The text_response should add value and interpretation beyond the raw number.
     </explanation_guidelines>
+    <thinking_guidelines>
+      Keep thinking_steps conversational and focused on the user's goal, not technical implementation:
+      - ✅ Good: "I need to compare this week's visitors to last week's visitors"
+      - ✅ Good: "I'll look at unique visitors for both time periods"  
+      - ✅ Good: "This comparison will show if traffic is growing or declining"
+      - ❌ Avoid: "I will use a CASE statement to categorize visits"
+      - ❌ Avoid: "The event_name should be 'screen_view' for visitor counts"
+      - ❌ Avoid: "I will filter for time >= today() - INTERVAL '7' DAY"
+      Think like you're explaining your approach to a business stakeholder, not a developer.
+    </thinking_guidelines>
   </section>
 </knowledge_base>
 

apps/api/src/agent/utils/stream-utils.ts

@@ -32,14 +32,10 @@ export function createStreamingResponse(updates: StreamingUpdate[]): Response {
 	});
 }
 
-function createThinkingStep(step: string): string {
-	return `🧠 ${step}`;
-}
-
 export function generateThinkingSteps(steps: string[]): StreamingUpdate[] {
 	const updates: StreamingUpdate[] = [];
 	for (const step of steps) {
-		updates.push({ type: 'thinking', content: createThinkingStep(step) });
+		updates.push({ type: 'thinking', content: step });
 	}
 	return updates;
 }

apps/dashboard/app/(main)/websites/[id]/assistant/components/chat-section.tsx

@@ -17,7 +17,7 @@ import {
 	ConversationContent,
 	ConversationScrollButton,
 } from '@/components/ai-elements/conversation';
-import { Loader } from '@/components/ai-elements/loader';
+
 import {
 	PromptInput,
 	PromptInputSubmit,
@@ -26,7 +26,7 @@ import {
 } from '@/components/ai-elements/prompt-input';
 import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion';
 import { Skeleton } from '@/components/ui/skeleton';
-import { cn } from '@/lib/utils';
+
 import { modelAtom, websiteDataAtom } from '@/stores/jotai/assistantAtoms';
 import { useChat } from '../hooks/use-chat';
 import { MessageBubble } from './message-bubble';
@@ -36,38 +36,37 @@ export function ChatSkeleton() {
 	return (
 		<div className="flex h-full flex-col overflow-hidden rounded border bg-background">
 			{/* Header Skeleton */}
-			<div className="flex flex-shrink-0 items-center justify-between border-b p-2">
-				<div className="flex items-center gap-2">
-					<Skeleton className="h-8 w-8 rounded-full" />
+			<div className="flex flex-shrink-0 items-center justify-between border-b p-4">
+				<div className="flex items-center gap-3">
+					<Skeleton className="h-8 w-8 rounded" />
 					<div>
-						<Skeleton className="mb-1 h-4 w-24" />
+						<Skeleton className="mb-2 h-4 w-24" />
 						<Skeleton className="h-3 w-32" />
 					</div>
 				</div>
 				<Skeleton className="h-8 w-8 rounded" />
 			</div>
 			{/* Messages Area Skeleton */}
-			<div className="flex-1 space-y-2 overflow-y-auto p-2">
-				<div className="flex animate-pulse gap-2">
-					<Skeleton className="h-8 w-8 flex-shrink-0 rounded-full" />
+			<div className="flex-1 space-y-4 overflow-y-auto p-4">
+				<div className="flex gap-3">
+					<Skeleton className="h-8 w-8 flex-shrink-0 rounded" />
 					<Skeleton className="h-12 w-3/4 rounded" />
 				</div>
-				<div className="ml-auto flex animate-pulse flex-row-reverse gap-2 delay-75">
-					<Skeleton className="h-8 w-8 flex-shrink-0 rounded-full" />
+				<div className="ml-auto flex flex-row-reverse gap-3">
+					<Skeleton className="h-8 w-8 flex-shrink-0 rounded" />
 					<Skeleton className="h-10 w-1/2 rounded" />
 				</div>
-				<div className="flex animate-pulse gap-2 delay-150">
-					<Skeleton className="h-8 w-8 flex-shrink-0 rounded-full" />
+				<div className="flex gap-3">
+					<Skeleton className="h-8 w-8 flex-shrink-0 rounded" />
 					<Skeleton className="h-16 w-4/5 rounded" />
 				</div>
 			</div>
 			{/* Input Area Skeleton */}
-			<div className="flex-shrink-0 border-t p-2">
-				<div className="flex gap-2">
-					<Skeleton className="h-9 flex-1 rounded" />
-					<Skeleton className="h-9 w-9 rounded" />
+			<div className="flex-shrink-0 border-t p-4">
+				<div className="flex gap-3">
+					<Skeleton className="h-10 flex-1 rounded" />
+					<Skeleton className="h-10 w-10 rounded" />
 				</div>
-				<Skeleton className="mt-2 h-3 w-2/3" />
 			</div>
 		</div>
 	);
@@ -90,12 +89,9 @@ export default function ChatSection() {
 		inputValue,
 		setInputValue,
 		isLoading,
-		isRateLimited,
 		sendMessage,
 		scrollToBottom,
 		resetChat,
-		handleUpVote,
-		handleDownVote,
 	} = useChat();
 
 	const hasMessages = messages.length > 1;
@@ -107,7 +103,7 @@ export default function ChatSection() {
 	}, [isLoading]);
 
 	const handleSend = () => {
-		if (!(isLoading || isRateLimited) && inputValue.trim()) {
+		if (!isLoading && inputValue.trim()) {
 			sendMessage(inputValue.trim());
 			scrollToBottom();
 			setTimeout(() => inputRef.current?.focus(), 100);
@@ -117,17 +113,10 @@ export default function ChatSection() {
 	return (
 		<div className="flex h-full min-h-0 flex-col rounded border bg-background">
 			{/* Header */}
-			<div className="flex flex-shrink-0 items-center justify-between border-b p-2">
-				<div className="flex min-w-0 flex-1 items-center gap-2">
-					<div className="relative">
-						<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded bg-primary/10">
-							<BrainIcon className="h-4 w-4 text-primary" weight="duotone" />
-						</div>
-						{isLoading && (
-							<div className="-bottom-0.5 -right-0.5 absolute flex h-3 w-3 items-center justify-center rounded-full bg-green-500">
-								<Loader className="text-white" size={8} />
-							</div>
-						)}
+			<div className="flex flex-shrink-0 items-center justify-between border-b p-4">
+				<div className="flex min-w-0 flex-1 items-center gap-3">
+					<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded bg-primary/10">
+						<BrainIcon className="h-4 w-4 text-primary" weight="duotone" />
 					</div>
 					<div className="min-w-0 flex-1">
 						<h2 className="truncate font-medium text-sm">Databunny</h2>
@@ -146,54 +135,50 @@ export default function ChatSection() {
 						onClick={resetChat}
 						tooltip="Reset chat"
 					>
-						<ClockCounterClockwiseIcon
-							className={cn('h-3 w-3', isLoading && 'animate-spin')}
-						/>
+						<ClockCounterClockwiseIcon className="h-4 w-4" />
 					</Action>
 				</Actions>
 			</div>
 
 			{/* Messages Area */}
 			<Conversation>
-				<ConversationContent className="!p-2">
+				<ConversationContent className="!p-4">
 					<ConversationScrollButton />
 					{!(hasMessages || isLoading) && (
-						<div className="h-full space-y-4">
+						<div className="h-full space-y-6">
 							<div className="flex h-full flex-col justify-between">
-								<div className="space-y-2 py-4 text-center">
-									<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded bg-primary/10">
+								<div className="space-y-4 py-8 text-center">
+									<div className="mx-auto flex h-12 w-12 items-center justify-center rounded bg-primary/10">
 										<SparkleIcon
-											className="h-6 w-6 text-primary"
+											className="h-4 w-4 text-primary"
 											weight="duotone"
 										/>
 									</div>
-									<h3 className="font-medium text-base">
-										Welcome to Databunny
-									</h3>
-									<p className="mx-auto max-w-md text-muted-foreground text-sm">
+									<h3 className="font-medium text-sm">Welcome to Databunny</h3>
+									<p className="mx-auto max-w-md text-muted-foreground text-xs">
 										Your data analyst. Ask me about your website analytics,
 										metrics, and trends.
 									</p>
 								</div>
-								<div className="space-y-2">
+								<div className="space-y-3">
 									<div className="flex items-center gap-2 text-muted-foreground text-xs">
-										<LightningIcon className="h-3 w-3" weight="duotone" />
+										<LightningIcon className="h-4 w-4" weight="duotone" />
 										<span>Try these examples:</span>
 									</div>
 									<Suggestions>
 										{quickQuestions.map((question) => (
 											<Suggestion
-												disabled={isLoading || isRateLimited}
+												disabled={isLoading}
 												key={question.text}
 												onClick={(suggestion) => {
-													if (!(isLoading || isRateLimited)) {
+													if (!isLoading) {
 														sendMessage(suggestion);
 														scrollToBottom();
 													}
 												}}
 												suggestion={question.text}
 											>
-												<question.icon className="mr-1.5 h-3 w-3 text-primary/70" />
+												<question.icon className="mr-2 h-4 w-4 text-primary" />
 												{question.text}
 											</Suggestion>
 										))}
@@ -204,7 +189,7 @@ export default function ChatSection() {
 					)}
 
 					{hasMessages && (
-						<div className="space-y-2">
+						<div className="space-y-4">
 							{messages.map((message) => (
 								<MessageBubble key={message.id} message={message} />
 							))}
@@ -214,30 +199,26 @@ export default function ChatSection() {
 			</Conversation>
 
 			{/* Input Area */}
-			<div className="h-min rounded-none">
+			<div className="border-t p-4">
 				<PromptInput
 					onSubmit={(e) => {
 						e.preventDefault();
 						handleSend();
 					}}
 				>
 					<PromptInputTextarea
-						disabled={isLoading || isRateLimited}
+						disabled={isLoading}
 						onChange={(e) => setInputValue(e.target.value)}
 						placeholder={
-							isLoading
-								? 'Analyzing...'
-								: isRateLimited
-									? 'Rate limited - please wait...'
-									: 'Ask about your analytics data...'
+							isLoading ? 'Analyzing...' : 'Ask about your analytics data...'
 						}
 						ref={inputRef}
 						value={inputValue}
 					/>
 					<PromptInputToolbar>
 						<div />
 						<PromptInputSubmit
-							disabled={!inputValue.trim() || isLoading || isRateLimited}
+							disabled={!inputValue.trim() || isLoading}
 							status={isLoading ? 'submitted' : undefined}
 						/>
 					</PromptInputToolbar>

apps/dashboard/app/(main)/websites/[id]/assistant/components/loading-message.tsx

@@ -5,15 +5,15 @@ import { RobotIcon } from '@phosphor-icons/react';
 export function LoadingMessage() {
 	return (
 		<div className="flex max-w-[85%] gap-3">
-			<div className="mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-muted">
+			<div className="mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded bg-muted">
 				<RobotIcon className="h-4 w-4" />
 			</div>
-			<div className="mr-2 rounded-lg bg-muted px-4 py-3">
+			<div className="mr-2 rounded bg-muted px-4 py-3">
 				<div className="flex items-center gap-2 text-sm">
 					<div className="flex space-x-1">
-						<div className="h-2 w-2 animate-bounce rounded-full bg-current [animation-delay:-0.3s]" />
-						<div className="h-2 w-2 animate-bounce rounded-full bg-current [animation-delay:-0.15s]" />
-						<div className="h-2 w-2 animate-bounce rounded-full bg-current" />
+						<div className="h-2 w-2 rounded bg-current" />
+						<div className="h-2 w-2 rounded bg-current" />
+						<div className="h-2 w-2 rounded bg-current" />
 					</div>
 					<span className="text-muted-foreground">
 						Databunny is analyzing...