From bf1f74fac46876a48daf16cb44e112607e81fb5f Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommmu <mahesh.svmr@gmail.com>
Date: Fri, 21 Nov 2025 21:29:12 -0800
Subject: [PATCH] added chat pane with lot of functionality

---
 apps/web/components/chat/index.tsx            | 171 ++++++++++++++--
 apps/web/components/chat/input/actions.tsx    |  38 ++++
 .../chat/input/chain-of-thought.tsx           | 186 ++++++++++++++++++
 .../chat/{input.tsx => input/index.tsx}       | 102 +++++-----
 .../components/chat/message/agent-message.tsx |  12 ++
 .../chat/message/follow-up-questions.tsx      |  56 ++++++
 .../chat/message/related-memories.tsx         |  15 +-
 7 files changed, 522 insertions(+), 58 deletions(-)
 create mode 100644 apps/web/components/chat/input/actions.tsx
 create mode 100644 apps/web/components/chat/input/chain-of-thought.tsx
 rename apps/web/components/chat/{input.tsx => input/index.tsx} (53%)
 create mode 100644 apps/web/components/chat/message/follow-up-questions.tsx

diff --git a/apps/web/components/chat/index.tsx b/apps/web/components/chat/index.tsx
index 0c99b2b6..d439fc3d 100644
--- a/apps/web/components/chat/index.tsx
+++ b/apps/web/components/chat/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect, useCallback } from "react"
+import { useState, useEffect, useCallback, useRef } from "react"
 import { motion, AnimatePresence } from "motion/react"
 import { useChat } from "@ai-sdk/react"
 import { DefaultChatTransport } from "ai"
@@ -22,6 +22,7 @@ import type { ModelId } from "@/lib/models"
 import { SuperLoader } from "../superloader"
 import { UserMessage } from "./message/user-message"
 import { AgentMessage } from "./message/agent-message"
+import { ChainOfThought } from "./input/chain-of-thought"
 
 export function ChatSidebar() {
 	const [input, setInput] = useState("")
@@ -29,10 +30,18 @@ export function ChatSidebar() {
 	const [selectedModel, setSelectedModel] = useState<ModelId>("gemini-2.5-pro")
 	const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null)
 	const [hoveredMessageId, setHoveredMessageId] = useState<string | null>(null)
+	const [chainOfThought, setChainOfThought] = useState<any[] | null>(null)
 	const [messageFeedback, setMessageFeedback] = useState<
 		Record<string, "like" | "dislike" | null>
 	>({})
 	const [expandedMemories, setExpandedMemories] = useState<string | null>(null)
+	const [followUpQuestions, setFollowUpQuestions] = useState<
+		Record<string, string[]>
+	>({})
+	const [loadingFollowUps, setLoadingFollowUps] = useState<
+		Record<string, boolean>
+	>({})
+	const pendingFollowUpGenerations = useRef<Set<string>>(new Set())
 	const { selectedProject } = useProject()
 	const { setCurrentChatId } = usePersistentChat()
 
@@ -48,8 +57,113 @@ export function ChatSidebar() {
 			},
 		}),
 		maxSteps: 10,
+		onFinish: async (result) => {
+			if (result.message.role !== "assistant") return
+
+			// Mark this message as needing follow-up generation
+			// We'll generate it after the message is fully in the messages array
+			if (result.message.id) {
+				pendingFollowUpGenerations.current.add(result.message.id)
+			}
+		},
 	})
 
+	// Generate follow-up questions after assistant messages are complete
+	useEffect(() => {
+		const generateFollowUps = async () => {
+			// Find assistant messages that need follow-up generation
+			const messagesToProcess = messages.filter(
+				(msg) =>
+					msg.role === "assistant" &&
+					pendingFollowUpGenerations.current.has(msg.id) &&
+					!followUpQuestions[msg.id] &&
+					!loadingFollowUps[msg.id],
+			)
+
+			for (const message of messagesToProcess) {
+				// Get complete text from the message
+				const assistantText = message.parts
+					.filter((p) => p.type === "text")
+					.map((p) => p.text)
+					.join(" ")
+					.trim()
+
+				// Only generate if we have substantial text (at least 50 chars)
+				// This ensures the message is complete, not just the first chunk
+				// Also check if status is idle to ensure streaming is complete
+				if (
+					assistantText.length < 50 ||
+					status === "streaming" ||
+					status === "submitted"
+				) {
+					continue
+				}
+
+				// Mark as processing
+				pendingFollowUpGenerations.current.delete(message.id)
+				setLoadingFollowUps((prev) => ({
+					...prev,
+					[message.id]: true,
+				}))
+
+				try {
+					// Get recent messages for context
+					const recentMessages = messages.slice(-5).map((msg) => ({
+						role: msg.role,
+						content: msg.parts
+							.filter((p) => p.type === "text")
+							.map((p) => p.text)
+							.join(" "),
+					}))
+
+					const response = await fetch(
+						`${process.env.NEXT_PUBLIC_BACKEND_URL}/chat/follow-ups`,
+						{
+							method: "POST",
+							headers: {
+								"Content-Type": "application/json",
+							},
+							credentials: "include",
+							body: JSON.stringify({
+								messages: recentMessages,
+								assistantResponse: assistantText,
+							}),
+						},
+					)
+
+					if (response.ok) {
+						const data = await response.json()
+						if (data.questions && Array.isArray(data.questions)) {
+							setFollowUpQuestions((prev) => ({
+								...prev,
+								[message.id]: data.questions,
+							}))
+						}
+					}
+				} catch (error) {
+					console.error("Failed to generate follow-up questions:", error)
+				} finally {
+					setLoadingFollowUps((prev) => ({
+						...prev,
+						[message.id]: false,
+					}))
+				}
+			}
+		}
+
+		// Only generate if not currently streaming or submitted
+		// Small delay to ensure message is fully processed
+		if (status !== "streaming" && status !== "submitted") {
+			const timeoutId = setTimeout(() => {
+				generateFollowUps()
+			}, 300)
+
+			return () => clearTimeout(timeoutId)
+		}
+	}, [messages, followUpQuestions, loadingFollowUps, status])
+
+	console.log(messages)
+
 	const handleSend = () => {
 		if (!input.trim() || status === "submitted" || status === "streaming")
 			return
@@ -197,7 +311,12 @@ export function ChatSidebar() {
 							</motion.button>
 						</div>
 					</div>
-					<div className="flex-1 overflow-y-auto px-4 scrollbar-thin">
+					<div
+						className={cn(
+							"flex-1 overflow-y-auto px-4 scrollbar-thin",
+							dmSansClassName(),
+						)}
+					>
 						{messages.length === 0 && <ChatEmptyStatePlaceholder />}
 						<div
 							className={cn(
@@ -237,10 +356,15 @@ export function ChatSidebar() {
 											copiedMessageId={copiedMessageId}
 											messageFeedback={messageFeedback}
 											expandedMemories={expandedMemories}
+											followUpQuestions={followUpQuestions[message.id] || []}
+											isLoadingFollowUps={loadingFollowUps[message.id] || false}
 											onCopy={handleCopyMessage}
 											onLike={handleLikeMessage}
 											onDislike={handleDislikeMessage}
 											onToggleMemories={handleToggleMemories}
+											onQuestionClick={(question) => {
+												setInput(question)
+											}}
 										/>
 									)}
 								</div>
@@ -254,16 +378,39 @@ export function ChatSidebar() {
 						</div>
 					</div>
 
-					<div className="px-4 pb-4 pt-2">
-						<ChatInput
-							value={input}
-							onChange={(e) => setInput(e.target.value)}
-							onSend={handleSend}
-							onStop={stop}
-							onKeyDown={handleKeyDown}
-							isResponding={status === "submitted" || status === "streaming"}
-						/>
-					</div>
+					<ChatInput
+						value={input}
+						onChange={(e) => setInput(e.target.value)}
+						onSend={handleSend}
+						onStop={stop}
+						onKeyDown={handleKeyDown}
+						isResponding={status === "submitted" || status === "streaming"}
+						activeStatus={
+							status === "submitted"
+								? "Thinking..."
+								: status === "streaming"
+									? "Structuring response..."
+									: "Waiting for input..."
+						}
+						chainOfThoughtComponent={(() => {
+							const lastUserMessage = [...messages]
+								.reverse()
+								.find((msg) => msg.role === "user")
+							const lastAgentMessage = [...messages]
+								.reverse()
+								.find((msg) => msg.role === "assistant")
+							const userMessageText =
+								lastUserMessage?.parts.find((part) => part.type === "text")
+									?.text ?? ""
+
+							return userMessageText ? (
+								<ChainOfThought
+									userMessage={userMessageText}
+									lastAgentMessage={lastAgentMessage}
+								/>
+							) : null
+						})()}
+					/>
 				</motion.div>
 			)}
 		</AnimatePresence>
diff --git a/apps/web/components/chat/input/actions.tsx b/apps/web/components/chat/input/actions.tsx
new file mode 100644
index 00000000..8b49ac7d
--- /dev/null
+++ b/apps/web/components/chat/input/actions.tsx
@@ -0,0 +1,38 @@
+import { cn } from "@lib/utils"
+import { ArrowUpIcon, SquareIcon } from "lucide-react"
+
+export function SendButton({
+	onClick,
+	disabled,
+}: {
+	onClick: () => void
+	disabled: boolean
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			disabled={disabled}
+			className={cn(
+				"bg-[#000000] border-[#161F2C] border p-2 rounded-lg flex-shrink-0 transition-opacity",
+				disabled
+					? "opacity-50 cursor-not-allowed"
+					: "cursor-pointer hover:bg-[#161F2C]",
+			)}
+		>
+			<ArrowUpIcon className="size-5 text-white" />
+		</button>
+	)
+}
+
+export function StopButton({ onClick }: { onClick: () => void }) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className="bg-[#000000] border-[#161F2C] border p-2 rounded-lg flex-shrink-0 cursor-pointer hover:bg-[#161F2C] transition-opacity"
+		>
+			<SquareIcon className="size-4 text-white fill-white" />
+		</button>
+	)
+}
diff --git a/apps/web/components/chat/input/chain-of-thought.tsx b/apps/web/components/chat/input/chain-of-thought.tsx
new file mode 100644
index 00000000..cbf602b2
--- /dev/null
+++ b/apps/web/components/chat/input/chain-of-thought.tsx
@@ -0,0 +1,186 @@
+import { useAuth } from "@lib/auth-context"
+import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar"
+import type { UIMessage } from "@ai-sdk/react"
+import { cn } from "@lib/utils"
+import { dmSansClassName } from "@/utils/fonts"
+
+interface MemoryResult {
+	documentId?: string
+	title?: string
+	content?: string
+	url?: string
+	score?: number
+}
+
+interface ReasoningStep {
+	type: string
+	state?: string
+	message: string
+}
+
+export function ChainOfThought({
+	userMessage,
+	lastAgentMessage,
+}: {
+	userMessage: string
+	lastAgentMessage: UIMessage | undefined
+}) {
+	const { user } = useAuth()
+
+	const reasoningSteps: ReasoningStep[] = []
+	if (lastAgentMessage) {
+		lastAgentMessage.parts.forEach((part) => {
+			if (part.type === "tool-searchMemories") {
+				if (
+					part.state === "input-available" ||
+					part.state === "input-streaming"
+				) {
+					reasoningSteps.push({
+						type: part.type,
+						state: part.state,
+						message: "Searching memories...",
+					})
+				} else if (part.state === "output-available") {
+					reasoningSteps.push({
+						type: part.type,
+						state: part.state,
+						message: "Found relevant memories",
+					})
+				} else if (part.state === "output-error") {
+					reasoningSteps.push({
+						type: part.type,
+						state: part.state,
+						message: "Error searching memories",
+					})
+				}
+			}
+		})
+	}
+
+	const memoryResults: MemoryResult[] = []
+	if (lastAgentMessage) {
+		lastAgentMessage.parts.forEach((part) => {
+			if (
+				part.type === "tool-searchMemories" &&
+				part.state === "output-available"
+			) {
+				const output = part.output as { results?: MemoryResult[] } | undefined
+				const results = Array.isArray(output?.results) ? output.results : []
+				memoryResults.push(...results)
+			}
+		})
+	}
+
+	return (
+		<div className="m-3 mb-0 space-y-3 relative z-10">
+			<div className="absolute left-[11px] top-0 bottom-0 w-[1px] bg-[#151F31] self-stretch mb-0 z-[-10]" />
+
+			<div className="flex items-start gap-3 text-[#525D6E] py-1 bg-[#01173C]">
+				{user && (
+					<Avatar className="size-[21px]">
+						<AvatarImage src={user?.image ?? ""} />
+						<AvatarFallback className="text-[10px]">
+							{user?.name?.charAt(0)}
+						</AvatarFallback>
+					</Avatar>
+				)}
+				<p>{userMessage}</p>
+			</div>
+
+			{(reasoningSteps.length > 0 || memoryResults.length > 0) && (
+				<div className="flex gap-3">
+					<div className="flex flex-col items-center mx-2 bg-[#01173C] py-1 h-fit">
+						<div className="size-[7px] rounded-full bg-[#151F31] shrink-0" />
+					</div>
+
+					<div className="flex-1 space-y-1">
+						{reasoningSteps.length > 0 && (
+							<div className="space-y-1.5">
+								{reasoningSteps.map((step, idx) => (
+									<div
+										key={`${step.type}-${step.state}-${idx}`}
+										className="text-[#525D6E]"
+									>
+										{step.message}
+									</div>
+								))}
+							</div>
+						)}
+
+						{memoryResults.length > 0 && (
+							<div className="grid grid-cols-2 gap-2 max-h-64 overflow-y-auto">
+								{memoryResults.map((result, idx) => {
+									const isClickable =
+										result.url &&
+										(result.url.startsWith("http://") ||
+											result.url.startsWith("https://"))
+
+									const content = (
+										<div className="">
+											<div className="bg-[#060D17] p-2 px-[10px] rounded-xl m-[2px]">
+												{result.title && (
+													<div className="text-xs text-[#525D6E] line-clamp-2">
+														{result.title}
+													</div>
+												)}
+												{result.content && (
+													<div className="text-xs text-[#525D6E]/80 line-clamp-2 mt-1">
+														{result.content}
+													</div>
+												)}
+												{result.url && (
+													<div className="text-xs text-[#525D6E] mt-1 truncate">
+														{result.url}
+													</div>
+												)}
+											</div>
+											{result.score && (
+												<div className="flex justify-center p-1">
+													<div
+														className={cn(
+															"text-[10px] inline-block bg-clip-text text-transparent font-medium",
+															dmSansClassName(),
+														)}
+														style={{
+															backgroundImage:
+																"var(--grad-1, linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%))",
+														}}
+													>
+														Relevancy score: {(result.score * 100).toFixed(1)}%
+													</div>
+												</div>
+											)}
+										</div>
+									)
+
+									if (isClickable) {
+										return (
+											<a
+												className="block p-2 bg-[#0C1829]/50 rounded-md border border-[#525D6E]/20 hover:bg-[#0C1829]/70 transition-colors cursor-pointer"
+												href={result.url}
+												key={result.documentId || idx}
+												rel="noopener noreferrer"
+												target="_blank"
+											>
+												{content}
+											</a>
+										)
+									}
+
+									return (
+										<div
+											className={cn("bg-[#0C1829] rounded-xl")}
+											key={result.documentId || idx}
+										>
+											{content}
+										</div>
+									)
+								})}
+							</div>
+						)}
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}
diff --git a/apps/web/components/chat/input.tsx b/apps/web/components/chat/input/index.tsx
similarity index 53%
rename from apps/web/components/chat/input.tsx
rename to apps/web/components/chat/input/index.tsx
index 2d307062..5cf211ae 100644
--- a/apps/web/components/chat/input.tsx
+++ b/apps/web/components/chat/input/index.tsx
@@ -1,10 +1,12 @@
 "use client"
 
-import { ArrowUpIcon, ChevronUpIcon, SquareIcon } from "lucide-react"
-import NovaOrb from "../nova/nova-orb"
+import { ChevronUpIcon } from "lucide-react"
+import NovaOrb from "@/components/nova/nova-orb"
 import { cn } from "@lib/utils"
 import { dmSansClassName } from "@/utils/fonts"
 import { useRef, useState } from "react"
+import { motion } from "motion/react"
+import { SendButton, StopButton } from "./actions"
 
 interface ChatInputProps {
 	value: string
@@ -13,6 +15,8 @@ interface ChatInputProps {
 	onStop: () => void
 	onKeyDown?: (e: React.KeyboardEvent) => void
 	isResponding?: boolean
+	activeStatus?: string
+	chainOfThoughtComponent?: React.ReactNode
 }
 
 export default function ChatInput({
@@ -22,8 +26,11 @@ export default function ChatInput({
 	onStop,
 	onKeyDown,
 	isResponding = false,
+	activeStatus,
+	chainOfThoughtComponent,
 }: ChatInputProps) {
 	const [isMultiline, setIsMultiline] = useState(false)
+	const [isExpanded, setIsExpanded] = useState(false)
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
 
 	const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -40,16 +47,59 @@ export default function ChatInput({
 	}
 
 	return (
-		<div className="bg-[#01173C] rounded-xl">
-			<div className=" p-3 pr-4 flex items-center justify-between">
+		<motion.div
+			className={cn("bg-[#01173C] relative")}
+			animate={{
+				padding: isExpanded ? "0.5rem" : "0",
+				margin: isExpanded ? "0" : "0.5rem",
+				borderRadius: isExpanded ? "0 0 12px 12px" : "12px",
+			}}
+			transition={{
+				duration: 0.3,
+				ease: "easeOut",
+			}}
+		>
+			<div
+				className={cn(
+					"absolute bottom-full left-0 right-0 overflow-hidden transition-all duration-300 ease-out bg-[#01173C]",
+					isExpanded
+						? "max-h-[80vh] opacity-100 overflow-y-auto pt-1.5 pb-2 rounded-t-xl px-2"
+						: "max-h-0 opacity-0",
+				)}
+				style={{
+					zIndex: isExpanded ? 50 : 0,
+				}}
+			>
+				{isExpanded && (
+					<div className="absolute top-0 left-0 right-0 h-10 bg-gradient-to-b from-[#01173C] via-[#01173C]/50 to-transparent pointer-events-none z-10" />
+				)}
+				{chainOfThoughtComponent}
+			</div>
+			<button
+				type="button"
+				className={cn(
+					"w-full p-3 pr-4 flex items-center justify-between cursor-pointer bg-transparent border-0 text-left",
+					!chainOfThoughtComponent && "disabled:cursor-not-allowed",
+				)}
+				onClick={() => {
+					setIsExpanded(!isExpanded)
+				}}
+			>
 				<div className="flex items-center gap-2">
 					<NovaOrb size={24} className="!blur-none z-10" />
 					<p className={cn("text-[#525D6E]", dmSansClassName())}>
-						Waiting for input...
+						{activeStatus || "Waiting for input..."}
 					</p>
 				</div>
-				<ChevronUpIcon className="size-4 text-[#525D6E]" />
-			</div>
+				{chainOfThoughtComponent && (
+					<ChevronUpIcon
+						className={cn(
+							"size-4 text-[#525D6E] transition-transform duration-300",
+							isExpanded && "rotate-180",
+						)}
+					/>
+				)}
+			</button>
 			<div
 				className={cn(
 					"flex items-end gap-2 bg-[#070E1B] rounded-xl p-2 border-[#52596633] border focus-within:outline-[#525D6EB2] focus-within:outline-1 transition-all duration-200",
@@ -75,42 +125,6 @@ export default function ChatInput({
 					)}
 				</div>
 			</div>
-		</div>
-	)
-}
-
-function SendButton({
-	onClick,
-	disabled,
-}: {
-	onClick: () => void
-	disabled: boolean
-}) {
-	return (
-		<button
-			type="button"
-			onClick={onClick}
-			disabled={disabled}
-			className={cn(
-				"bg-[#000000] border-[#161F2C] border p-2 rounded-lg flex-shrink-0 transition-opacity",
-				disabled
-					? "opacity-50 cursor-not-allowed"
-					: "cursor-pointer hover:bg-[#161F2C]",
-			)}
-		>
-			<ArrowUpIcon className="size-5 text-white" />
-		</button>
-	)
-}
-
-function StopButton({ onClick }: { onClick: () => void }) {
-	return (
-		<button
-			type="button"
-			onClick={onClick}
-			className="bg-[#000000] border-[#161F2C] border p-2 rounded-lg flex-shrink-0 cursor-pointer hover:bg-[#161F2C] transition-opacity"
-		>
-			<SquareIcon className="size-4 text-white fill-white" />
-		</button>
+		</motion.div>
 	)
 }
diff --git a/apps/web/components/chat/message/agent-message.tsx b/apps/web/components/chat/message/agent-message.tsx
index c46c30ac..cab3407e 100644
--- a/apps/web/components/chat/message/agent-message.tsx
+++ b/apps/web/components/chat/message/agent-message.tsx
@@ -4,6 +4,7 @@ import type { UIMessage } from "@ai-sdk/react"
 import { Streamdown } from "streamdown"
 import { RelatedMemories } from "./related-memories"
 import { MessageActions } from "./message-actions"
+import { FollowUpQuestions } from "./follow-up-questions"
 
 interface AgentMessageProps {
 	message: UIMessage
@@ -13,10 +14,13 @@ interface AgentMessageProps {
 	copiedMessageId: string | null
 	messageFeedback: Record<string, "like" | "dislike" | null>
 	expandedMemories: string | null
+	followUpQuestions?: string[]
+	isLoadingFollowUps?: boolean
 	onCopy: (messageId: string, text: string) => void
 	onLike: (messageId: string) => void
 	onDislike: (messageId: string) => void
 	onToggleMemories: (messageId: string) => void
+	onQuestionClick?: (question: string) => void
 }
 
 export function AgentMessage({
@@ -27,10 +31,13 @@ export function AgentMessage({
 	copiedMessageId,
 	messageFeedback,
 	expandedMemories,
+	followUpQuestions = [],
+	isLoadingFollowUps = false,
 	onCopy,
 	onLike,
 	onDislike,
 	onToggleMemories,
+	onQuestionClick,
 }: AgentMessageProps) {
 	const isLastAgentMessage =
 		index === messagesLength - 1 && message.role === "assistant"
@@ -78,6 +85,11 @@ export function AgentMessage({
 						}
 						return null
 					})}
+					<FollowUpQuestions
+						questions={followUpQuestions}
+						isLoading={isLoadingFollowUps}
+						onQuestionClick={onQuestionClick || (() => {})}
+					/>
 				</div>
 			</div>
 			<MessageActions
diff --git a/apps/web/components/chat/message/follow-up-questions.tsx b/apps/web/components/chat/message/follow-up-questions.tsx
new file mode 100644
index 00000000..b4085536
--- /dev/null
+++ b/apps/web/components/chat/message/follow-up-questions.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { ArrowRightIcon } from "lucide-react"
+import { cn } from "@lib/utils"
+
+interface FollowUpQuestionsProps {
+	questions: string[]
+	onQuestionClick: (question: string) => void
+	isLoading?: boolean
+}
+
+export function FollowUpQuestions({
+	questions,
+	onQuestionClick,
+	isLoading = false,
+}: FollowUpQuestionsProps) {
+	if (isLoading) {
+		return (
+			<div className="mt-3 flex flex-col gap-2">
+				<div
+					key="skeleton-0"
+					className="h-4 w-28 animate-pulse rounded-full bg-white/10"
+				/>
+				<div
+					key="skeleton-1"
+					className="h-4 w-36 animate-pulse rounded-full bg-white/10"
+				/>
+			</div>
+		)
+	}
+
+	if (questions.length === 0) {
+		return null
+	}
+
+	return (
+		<div className="flex flex-wrap mt-2 gap-3">
+			<div className="text-xs">Follow up questions:</div>
+			<div className="flex flex-wrap">
+				{questions.map((question) => (
+					<button
+						key={question}
+						type="button"
+						onClick={() => onQuestionClick(question)}
+						className={cn(
+							"group flex items-center gap-1.5 rounded-full py-1 text-sm text-[#267BF1] transition-all hover:underline cursor-pointer text-start",
+						)}
+					>
+						<ArrowRightIcon className="size-3.5" />
+						<span>{question}</span>
+					</button>
+				))}
+			</div>
+		</div>
+	)
+}
diff --git a/apps/web/components/chat/message/related-memories.tsx b/apps/web/components/chat/message/related-memories.tsx
index f93aeb2d..d24a1b96 100644
--- a/apps/web/components/chat/message/related-memories.tsx
+++ b/apps/web/components/chat/message/related-memories.tsx
@@ -84,8 +84,19 @@ export function RelatedMemories({
 									)}
 								</div>
 								{result.score && (
-									<div className="text-xs text-white/50 mt-1 p-1 text-center">
-										Relevance Score: {(result.score * 100).toFixed(1)}%
+									<div className="flex justify-center p-1">
+										<div
+											className={cn(
+												"text-[10px] inline-block bg-clip-text text-transparent font-medium",
+												dmSansClassName(),
+											)}
+											style={{
+												backgroundImage:
+													"var(--grad-1, linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%))",
+											}}
+										>
+											Relevancy score: {(result.score * 100).toFixed(1)}%
+										</div>
 									</div>
 								)}
 							</div>