helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-11 10:23:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add AI assistant chat panel for call center agents

Browse Source 
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>
This commit is contained in:
saridsa2
2026-03-18 11:27:44 +05:30
parent bb48d07e61
commit b72464a7ec
1 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/call-desk.tsx
View File

@@ -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>