mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
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>
This commit is contained in:
@@ -81,12 +81,15 @@ const SectionHeader = ({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
type SidebarTab = 'stats' | 'ai';
|
||||||
|
|
||||||
export const CallDeskPage = () => {
|
export const CallDeskPage = () => {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { calls, leadActivities, campaigns } = useData();
|
const { calls, leadActivities, campaigns } = useData();
|
||||||
const { leads: fallbackLeads } = useLeads();
|
const { leads: fallbackLeads } = useLeads();
|
||||||
const { connectionStatus, isRegistered } = useSip();
|
const { connectionStatus, isRegistered } = useSip();
|
||||||
const { missedCalls, followUps, marketingLeads, totalPending, loading, error } = useWorklist();
|
const { missedCalls, followUps, marketingLeads, totalPending, loading, error } = useWorklist();
|
||||||
|
const [sidebarTab, setSidebarTab] = useState<SidebarTab>('stats');
|
||||||
|
|
||||||
const todaysCalls = calls.filter(
|
const todaysCalls = calls.filter(
|
||||||
(c) => c.agentName === user.name && c.startedAt !== null && isToday(c.startedAt),
|
(c) => c.agentName === user.name && c.startedAt !== null && isToday(c.startedAt),
|
||||||
@@ -325,8 +328,38 @@ export const CallDeskPage = () => {
|
|||||||
<CallLog calls={todaysCalls} />
|
<CallLog calls={todaysCalls} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<aside className="hidden w-72 space-y-5 overflow-y-auto border-l border-secondary bg-primary p-5 xl:block">
|
<aside className="hidden w-80 flex-col border-l border-secondary bg-primary xl:flex">
|
||||||
<DailyStats calls={todaysCalls} />
|
{/* 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>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user