From 43f71374e5feeda03a3edd6fae5c0f4f9469133d Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 30 Mar 2026 23:26:11 +0530
Subject: [PATCH] (chore:fe) lint-fix

---
 .../src/conversation/ConversationBubble.tsx   | 56 ++++++++++++---
 .../src/conversation/ResearchProgress.tsx     | 70 ++++++++++++++-----
 .../src/conversation/conversationSlice.ts     |  5 +-
 3 files changed, 103 insertions(+), 28 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 925ab5e2..eba2b7c8 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -332,7 +332,11 @@ const ConversationBubble = forwardRef<
                 <div className="fade-in mr-5 ml-3 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
                   <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
                     {sources?.slice(0, 3)?.map((source, index) => (
-                      <div key={index} id={`source-${index}`} className="relative transition-all duration-300">
+                      <div
+                        key={index}
+                        id={`source-${index}`}
+                        className="relative transition-all duration-300"
+                      >
                         <div
                           className="bg-muted hover:bg-accent dark:bg-answer-bubble dark:hover:bg-muted h-28 cursor-pointer rounded-4xl p-4"
                           onMouseOver={() => setActiveTooltip(index)}
@@ -495,11 +499,26 @@ const ConversationBubble = forwardRef<
                                     <button
                                       type="button"
                                       onClick={() => {
-                                        const el = document.getElementById(`source-${sourceIdx}`);
+                                        const el = document.getElementById(
+                                          `source-${sourceIdx}`,
+                                        );
                                         if (el) {
-                                          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                                          el.classList.add('ring-2', 'ring-purple-500');
-                                          setTimeout(() => el.classList.remove('ring-2', 'ring-purple-500'), 2000);
+                                          el.scrollIntoView({
+                                            behavior: 'smooth',
+                                            block: 'center',
+                                          });
+                                          el.classList.add(
+                                            'ring-2',
+                                            'ring-purple-500',
+                                          );
+                                          setTimeout(
+                                            () =>
+                                              el.classList.remove(
+                                                'ring-2',
+                                                'ring-purple-500',
+                                              ),
+                                            2000,
+                                          );
                                         }
                                       }}
                                       className="mx-0.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-purple-100 px-1.5 text-xs font-semibold text-purple-700 transition-colors hover:bg-purple-200 dark:bg-purple-900/40 dark:text-purple-300 dark:hover:bg-purple-900/60"
@@ -509,7 +528,15 @@ const ConversationBubble = forwardRef<
                                     </button>
                                   );
                                 }
-                                return <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>;
+                                return (
+                                  <a
+                                    href={href}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    {children}
+                                  </a>
+                                );
                               },
                               code(props) {
                                 const {
@@ -691,7 +718,9 @@ const ConversationBubble = forwardRef<
                         <button
                           type="button"
                           onClick={() => {
-                            const blob = new Blob([message], { type: 'text/markdown' });
+                            const blob = new Blob([message], {
+                              type: 'text/markdown',
+                            });
                             const url = URL.createObjectURL(blob);
                             const link = document.createElement('a');
                             link.href = url;
@@ -703,8 +732,17 @@ const ConversationBubble = forwardRef<
                           aria-label="Export as Markdown"
                           title="Export as Markdown"
                         >
-                          <svg className="h-5 w-5 stroke-gray-4000" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}>
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                          <svg
+                            className="stroke-gray-4000 h-5 w-5"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={1.5}
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+                            />
                           </svg>
                         </button>
                       </div>
diff --git a/frontend/src/conversation/ResearchProgress.tsx b/frontend/src/conversation/ResearchProgress.tsx
index cce6ca0b..a73594bd 100644
--- a/frontend/src/conversation/ResearchProgress.tsx
+++ b/frontend/src/conversation/ResearchProgress.tsx
@@ -4,15 +4,36 @@ import Avatar from '../components/Avatar';
 import { ResearchState } from './conversationModels';
 
 const SmallCheck = () => (
-  <svg className="h-3 w-3 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+  <svg
+    className="h-3 w-3 text-green-500"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={3}
+  >
     <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
   </svg>
 );
 
 const SmallSpinner = () => (
-  <svg className="h-3 w-3 animate-spin text-purple-500" fill="none" viewBox="0 0 24 24">
-    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+  <svg
+    className="h-3 w-3 animate-spin text-purple-500"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    />
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+    />
   </svg>
 );
 
@@ -32,7 +53,9 @@ function StatusText({ status, elapsed }: { status: string; elapsed?: number }) {
     <span className="text-xs text-gray-500 dark:text-gray-400">
       {status === 'complete' ? (
         <>
-          <span className="text-green-600 dark:text-green-400">{labels.complete}</span>
+          <span className="text-green-600 dark:text-green-400">
+            {labels.complete}
+          </span>
           {elapsed_str}
         </>
       ) : (
@@ -62,13 +85,15 @@ export default function ResearchProgress({
 
   if (!plan && !status) return null;
 
-  const completedSteps = plan?.filter((s) => s.status === 'complete').length ?? 0;
+  const completedSteps =
+    plan?.filter((s) => s.status === 'complete').length ?? 0;
   const totalSteps = plan?.length ?? 0;
 
   // Collapsed: single-line summary
-  const summaryText = totalSteps > 0
-    ? `Researched ${completedSteps} topic${completedSteps !== 1 ? 's' : ''}`
-    : 'Research';
+  const summaryText =
+    totalSteps > 0
+      ? `Researched ${completedSteps} topic${completedSteps !== 1 ? 's' : ''}`
+      : 'Research';
 
   return (
     <div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
@@ -93,9 +118,16 @@ export default function ResearchProgress({
           </p>
           <svg
             className={`h-4 w-4 text-gray-500 transition-transform duration-200 dark:text-gray-400 ${isExpanded ? 'rotate-180' : ''}`}
-            fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
           >
-            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M19 9l-7 7-7-7"
+            />
           </svg>
         </button>
         {status && <StatusText status={status} elapsed={elapsed_seconds} />}
@@ -126,13 +158,15 @@ export default function ResearchProgress({
                   </div>
                   {/* Step content */}
                   <div className={`pb-3 ${isLast ? '' : ''}`}>
-                    <p className={`text-sm ${
-                      step.status === 'complete'
-                        ? 'text-gray-700 dark:text-gray-300'
-                        : step.status === 'researching'
-                          ? 'font-medium text-purple-700 dark:text-purple-300'
-                          : 'text-gray-500 dark:text-gray-500'
-                    }`}>
+                    <p
+                      className={`text-sm ${
+                        step.status === 'complete'
+                          ? 'text-gray-700 dark:text-gray-300'
+                          : step.status === 'researching'
+                            ? 'font-medium text-purple-700 dark:text-purple-300'
+                            : 'text-gray-500 dark:text-gray-500'
+                      }`}
+                    >
                       {step.query}
                     </p>
                   </div>
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index ca2e2cbc..bc234de8 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -427,7 +427,10 @@ export const conversationSlice = createSlice({
             status: 'pending',
           });
         }
-        if (progress.status === 'researching' || progress.status === 'complete') {
+        if (
+          progress.status === 'researching' ||
+          progress.status === 'complete'
+        ) {
           research.plan[stepIndex].status = progress.status;
         }
         if (progress.query) {