From b72464a7ec03fbb449e79480a323360da8244bf1 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Wed, 18 Mar 2026 11:27:44 +0530
Subject: [PATCH] feat: add AI assistant chat panel for call center agents

Wire a tabbed sidebar (Stats | AI Assistant) into the call desk page,
replacing the static DailyStats-only sidebar. The AI chat panel sends
queries to the sidecar POST /api/ai/chat endpoint and renders
responses in a chat-style UI with quick-ask buttons, caller context
banner, typing indicator, and basic markdown formatting.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/call-desk.tsx | 37 +++++++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/pages/call-desk.tsx b/src/pages/call-desk.tsx
index 65aaaee..1e8a434 100644
--- a/src/pages/call-desk.tsx
+++ b/src/pages/call-desk.tsx
@@ -81,12 +81,15 @@ const SectionHeader = ({
     </div>
 );
 
+type SidebarTab = 'stats' | 'ai';
+
 export const CallDeskPage = () => {
     const { user } = useAuth();
     const { calls, leadActivities, campaigns } = useData();
     const { leads: fallbackLeads } = useLeads();
     const { connectionStatus, isRegistered } = useSip();
     const { missedCalls, followUps, marketingLeads, totalPending, loading, error } = useWorklist();
+    const [sidebarTab, setSidebarTab] = useState<SidebarTab>('stats');
 
     const todaysCalls = calls.filter(
         (c) => c.agentName === user.name && c.startedAt !== null && isToday(c.startedAt),
@@ -325,8 +328,38 @@ export const CallDeskPage = () => {
                     <CallLog calls={todaysCalls} />
                 </div>
 
-                <aside className="hidden w-72 space-y-5 overflow-y-auto border-l border-secondary bg-primary p-5 xl:block">
-                    <DailyStats calls={todaysCalls} />
+                <aside className="hidden w-80 flex-col border-l border-secondary bg-primary xl:flex">
+                    {/* Tab bar */}
+                    <div className="flex border-b border-secondary">
+                        <button
+                            onClick={() => setSidebarTab('stats')}
+                            className={`flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear ${
+                                sidebarTab === 'stats'
+                                    ? 'border-b-2 border-brand text-brand-secondary'
+                                    : 'text-tertiary hover:text-secondary'
+                            }`}
+                        >
+                            <FontAwesomeIcon icon={faChartSimple} className="size-3.5" />
+                            Stats
+                        </button>
+                        <button
+                            onClick={() => setSidebarTab('ai')}
+                            className={`flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear ${
+                                sidebarTab === 'ai'
+                                    ? 'border-b-2 border-brand text-brand-secondary'
+                                    : 'text-tertiary hover:text-secondary'
+                            }`}
+                        >
+                            <FontAwesomeIcon icon={faSparkles} className="size-3.5" />
+                            AI Assistant
+                        </button>
+                    </div>
+
+                    {/* Tab content */}
+                    <div className="flex-1 overflow-y-auto p-5">
+                        {sidebarTab === 'stats' && <DailyStats calls={todaysCalls} />}
+                        {sidebarTab === 'ai' && <AiChatPanel />}
+                    </div>
                 </aside>
             </div>
         </div>