mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-12 02:38:15 +00:00
feat: unified context panel, remove tabs, context-aware layout
- Merged AI Assistant + Lead 360 tabs into single context-aware panel - Context section shows: lead profile, AI insight (live from event bus), appointments, activity - "On call with" banner only shows during active calls (isInCall prop) - AI Chat always available at bottom of panel - Phase 1 only — AI Chat panel needs full redesign with Vercel AI SDK tool calling (Phase 2) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
14
src/components/base/avatar/base-components/avatar-count.tsx
Normal file
14
src/components/base/avatar/base-components/avatar-count.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { cx } from "@/utils/cx";
|
||||
|
||||
interface AvatarCountProps {
|
||||
count: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const AvatarCount = ({ count, className }: AvatarCountProps) => (
|
||||
<div className={cx("absolute right-0 bottom-0 p-px", className)}>
|
||||
<div className="flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white">
|
||||
{count}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
49
src/components/base/select/select-shared.tsx
Normal file
49
src/components/base/select/select-shared.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import type { FC, ReactNode } from "react";
|
||||
import { createContext } from "react";
|
||||
|
||||
export type SelectItemType = {
|
||||
/** Unique identifier for the item. */
|
||||
id: string | number;
|
||||
/** The primary display text. */
|
||||
label?: string;
|
||||
/** Avatar image URL. */
|
||||
avatarUrl?: string;
|
||||
/** Whether the item is disabled. */
|
||||
isDisabled?: boolean;
|
||||
/** Secondary text displayed alongside the label. */
|
||||
supportingText?: string;
|
||||
/** Leading icon component or element. */
|
||||
icon?: FC | ReactNode;
|
||||
};
|
||||
|
||||
export interface CommonProps {
|
||||
/** Helper text displayed below the input. */
|
||||
hint?: string;
|
||||
/** Field label displayed above the input. */
|
||||
label?: string;
|
||||
/** Tooltip text for the help icon next to the label. */
|
||||
tooltip?: string;
|
||||
/**
|
||||
* The size of the component.
|
||||
* @default "md"
|
||||
*/
|
||||
size?: "sm" | "md" | "lg";
|
||||
/** Placeholder text when no value is selected. */
|
||||
placeholder?: string;
|
||||
/** Whether to hide the required indicator from the label. */
|
||||
hideRequiredIndicator?: boolean;
|
||||
}
|
||||
|
||||
export const sizes = {
|
||||
sm: {
|
||||
root: "py-2 pl-3 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
|
||||
withIcon: "",
|
||||
text: "text-sm",
|
||||
textContainer: "gap-x-1.5",
|
||||
shortcut: "pr-2.5",
|
||||
},
|
||||
md: { root: "py-2 px-3 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-2.5" },
|
||||
lg: { root: "py-2.5 px-3.5 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-3" },
|
||||
};
|
||||
|
||||
export const SelectContext = createContext<{ size: "sm" | "md" | "lg" }>({ size: "md" });
|
||||
@@ -1,18 +1,15 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faSparkles, faUser, faCalendarCheck } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { faSparkles, faCalendarCheck, faPhone, faUser } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { faIcon } from '@/lib/icon-wrapper';
|
||||
import { AiChatPanel } from './ai-chat-panel';
|
||||
import { Badge } from '@/components/base/badges/badges';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { formatPhone, formatShortDate } from '@/lib/format';
|
||||
import { cx } from '@/utils/cx';
|
||||
import type { Lead, LeadActivity } from '@/types/entities';
|
||||
|
||||
const CalendarCheck = faIcon(faCalendarCheck);
|
||||
|
||||
type ContextTab = 'ai' | 'lead360';
|
||||
|
||||
interface ContextPanelProps {
|
||||
selectedLead: Lead | null;
|
||||
activities: LeadActivity[];
|
||||
@@ -21,74 +18,13 @@ interface ContextPanelProps {
|
||||
callUcid?: string | null;
|
||||
}
|
||||
|
||||
export const ContextPanel = ({ selectedLead, activities, callerPhone }: ContextPanelProps) => {
|
||||
const [activeTab, setActiveTab] = useState<ContextTab>('ai');
|
||||
|
||||
// Auto-switch to lead 360 when a lead is selected
|
||||
useEffect(() => {
|
||||
if (selectedLead) {
|
||||
setActiveTab('lead360');
|
||||
}
|
||||
}, [selectedLead?.id]);
|
||||
|
||||
const callerContext = selectedLead ? {
|
||||
callerPhone: selectedLead.contactPhone?.[0]?.number ?? callerPhone,
|
||||
leadId: selectedLead.id,
|
||||
leadName: `${selectedLead.contactName?.firstName ?? ''} ${selectedLead.contactName?.lastName ?? ''}`.trim(),
|
||||
} : callerPhone ? { callerPhone } : undefined;
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Tab bar */}
|
||||
<div className="flex shrink-0 border-b border-secondary">
|
||||
<button
|
||||
onClick={() => setActiveTab('ai')}
|
||||
className={cx(
|
||||
"flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear",
|
||||
activeTab === 'ai'
|
||||
? "border-b-2 border-brand text-brand-secondary"
|
||||
: "text-tertiary hover:text-secondary",
|
||||
)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faSparkles} className="size-3.5" />
|
||||
AI Assistant
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('lead360')}
|
||||
className={cx(
|
||||
"flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear",
|
||||
activeTab === 'lead360'
|
||||
? "border-b-2 border-brand text-brand-secondary"
|
||||
: "text-tertiary hover:text-secondary",
|
||||
)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faUser} className="size-3.5" />
|
||||
{(selectedLead as any)?.patientId ? 'Patient 360' : 'Lead 360'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
{activeTab === 'ai' && (
|
||||
<div className="flex flex-1 flex-col overflow-hidden p-4">
|
||||
<AiChatPanel callerContext={callerContext} />
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'lead360' && (
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<Lead360Tab lead={selectedLead} activities={activities} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Lead360Tab = ({ lead, activities }: { lead: Lead | null; activities: LeadActivity[] }) => {
|
||||
export const ContextPanel = ({ selectedLead, activities, callerPhone, isInCall }: ContextPanelProps) => {
|
||||
const [patientData, setPatientData] = useState<any>(null);
|
||||
const [loadingPatient, setLoadingPatient] = useState(false);
|
||||
|
||||
// Fetch patient data when lead has a patientId (returning patient)
|
||||
// Fetch patient data when lead has a patientId
|
||||
useEffect(() => {
|
||||
const patientId = (lead as any)?.patientId;
|
||||
const patientId = (selectedLead as any)?.patientId;
|
||||
if (!patientId) {
|
||||
setPatientData(null);
|
||||
return;
|
||||
@@ -97,10 +33,10 @@ const Lead360Tab = ({ lead, activities }: { lead: Lead | null; activities: LeadA
|
||||
setLoadingPatient(true);
|
||||
apiClient.graphql<{ patients: { edges: Array<{ node: any }> } }>(
|
||||
`query GetPatient($id: UUID!) { patients(filter: { id: { eq: $id } }) { edges { node {
|
||||
id fullName { firstName lastName } dateOfBirth gender patientType
|
||||
id fullName { firstName lastName } dateOfBirth gender
|
||||
phones { primaryPhoneNumber } emails { primaryEmail }
|
||||
appointments(first: 5, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
|
||||
id scheduledAt status doctorName department reasonForVisit appointmentType
|
||||
id scheduledAt status doctorName department reasonForVisit
|
||||
} } }
|
||||
calls(first: 5, orderBy: [{ startedAt: DescNullsLast }]) { edges { node {
|
||||
id callStatus disposition direction startedAt durationSec agentName
|
||||
@@ -112,153 +48,137 @@ const Lead360Tab = ({ lead, activities }: { lead: Lead | null; activities: LeadA
|
||||
setPatientData(data.patients.edges[0]?.node ?? null);
|
||||
}).catch(() => setPatientData(null))
|
||||
.finally(() => setLoadingPatient(false));
|
||||
}, [(lead as any)?.patientId]);
|
||||
}, [(selectedLead as any)?.patientId]);
|
||||
|
||||
if (!lead) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center px-4">
|
||||
<FontAwesomeIcon icon={faUser} className="mb-3 size-8 text-fg-quaternary" />
|
||||
<p className="text-sm text-tertiary">Select a lead from the worklist to see their full profile.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const firstName = lead.contactName?.firstName ?? '';
|
||||
const lastName = lead.contactName?.lastName ?? '';
|
||||
const fullName = `${firstName} ${lastName}`.trim() || 'Unknown';
|
||||
const phone = lead.contactPhone?.[0];
|
||||
const email = lead.contactEmail?.[0]?.address;
|
||||
const lead = selectedLead;
|
||||
const firstName = lead?.contactName?.firstName ?? '';
|
||||
const lastName = lead?.contactName?.lastName ?? '';
|
||||
const fullName = `${firstName} ${lastName}`.trim();
|
||||
const phone = lead?.contactPhone?.[0];
|
||||
const email = lead?.contactEmail?.[0]?.address;
|
||||
|
||||
const leadActivities = activities
|
||||
.filter((a) => a.leadId === lead.id)
|
||||
.filter((a) => lead && a.leadId === lead.id)
|
||||
.sort((a, b) => new Date(b.occurredAt ?? b.createdAt ?? '').getTime() - new Date(a.occurredAt ?? a.createdAt ?? '').getTime())
|
||||
.slice(0, 10);
|
||||
|
||||
const isReturning = !!patientData;
|
||||
const appointments = patientData?.appointments?.edges?.map((e: any) => e.node) ?? [];
|
||||
const patientCalls = patientData?.calls?.edges?.map((e: any) => e.node) ?? [];
|
||||
|
||||
const patientAge = patientData?.dateOfBirth
|
||||
? Math.floor((Date.now() - new Date(patientData.dateOfBirth).getTime()) / (365.25 * 24 * 60 * 60 * 1000))
|
||||
: null;
|
||||
const patientGender = patientData?.gender === 'MALE' ? 'M' : patientData?.gender === 'FEMALE' ? 'F' : null;
|
||||
const callerContext = lead ? {
|
||||
callerPhone: phone?.number ?? callerPhone,
|
||||
leadId: lead.id,
|
||||
leadName: fullName,
|
||||
} : callerPhone ? { callerPhone } : undefined;
|
||||
|
||||
return (
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Profile */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-primary">{fullName}</h3>
|
||||
{phone && <p className="text-sm text-secondary">{formatPhone(phone)}</p>}
|
||||
{email && <p className="text-xs text-tertiary">{email}</p>}
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{isReturning && (
|
||||
<Badge size="sm" color="brand" type="pill-color">Returning Patient</Badge>
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Context header — shows caller/lead info when available */}
|
||||
{lead && (
|
||||
<div className="shrink-0 border-b border-secondary p-4 space-y-3">
|
||||
{/* Call status banner */}
|
||||
{isInCall && (
|
||||
<div className="flex items-center gap-2 rounded-lg bg-success-primary px-3 py-2">
|
||||
<FontAwesomeIcon icon={faPhone} className="size-3 text-fg-success-primary" />
|
||||
<span className="text-xs font-semibold text-success-primary">
|
||||
On call with {fullName || callerPhone || 'Unknown'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{patientAge !== null && patientGender && (
|
||||
<Badge size="sm" color="gray" type="pill-color">{patientAge}y · {patientGender}</Badge>
|
||||
)}
|
||||
{lead.leadStatus && <Badge size="sm" color="brand">{lead.leadStatus}</Badge>}
|
||||
{lead.leadSource && <Badge size="sm" color="gray">{lead.leadSource}</Badge>}
|
||||
{lead.priority && lead.priority !== 'NORMAL' && (
|
||||
<Badge size="sm" color={lead.priority === 'URGENT' ? 'error' : 'warning'}>{lead.priority}</Badge>
|
||||
)}
|
||||
</div>
|
||||
{lead.interestedService && (
|
||||
<p className="mt-2 text-sm text-secondary">Interested in: {lead.interestedService}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Returning patient: Appointments */}
|
||||
{loadingPatient && (
|
||||
<p className="text-xs text-tertiary">Loading patient details...</p>
|
||||
)}
|
||||
{isReturning && appointments.length > 0 && (
|
||||
<div>
|
||||
<h4 className="mb-2 text-xs font-bold text-secondary uppercase">Appointments</h4>
|
||||
<div className="space-y-2">
|
||||
{appointments.map((appt: any) => {
|
||||
const statusColors: Record<string, 'success' | 'brand' | 'warning' | 'error' | 'gray'> = {
|
||||
COMPLETED: 'success', SCHEDULED: 'brand', CONFIRMED: 'brand',
|
||||
CANCELLED: 'error', NO_SHOW: 'warning',
|
||||
};
|
||||
return (
|
||||
<div key={appt.id} className="flex items-start gap-2 rounded-lg bg-secondary p-2">
|
||||
<CalendarCheck className="mt-0.5 size-3.5 text-fg-brand-primary shrink-0" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs font-semibold text-primary">
|
||||
{appt.doctorName ?? 'Doctor'} · {appt.department ?? ''}
|
||||
</span>
|
||||
{appt.status && (
|
||||
<Badge size="sm" color={statusColors[appt.status] ?? 'gray'}>
|
||||
{appt.status.toLowerCase()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[10px] text-quaternary">
|
||||
{appt.scheduledAt ? formatShortDate(appt.scheduledAt) : ''}
|
||||
{appt.reasonForVisit ? ` — ${appt.reasonForVisit}` : ''}
|
||||
</p>
|
||||
{/* Lead profile */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-primary">{fullName || 'Unknown'}</h3>
|
||||
{phone && <p className="text-sm text-secondary">{formatPhone(phone)}</p>}
|
||||
{email && <p className="text-xs text-tertiary">{email}</p>}
|
||||
</div>
|
||||
|
||||
{/* Status badges */}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{!!patientData && (
|
||||
<Badge size="sm" color="brand" type="pill-color">Returning Patient</Badge>
|
||||
)}
|
||||
{lead.leadStatus && <Badge size="sm" color="brand">{lead.leadStatus.replace(/_/g, ' ')}</Badge>}
|
||||
{lead.leadSource && <Badge size="sm" color="gray">{lead.leadSource.replace(/_/g, ' ')}</Badge>}
|
||||
</div>
|
||||
|
||||
{lead.interestedService && (
|
||||
<p className="text-xs text-secondary">Interested in: {lead.interestedService}</p>
|
||||
)}
|
||||
|
||||
{/* AI Insight — live from platform */}
|
||||
{(lead.aiSummary || lead.aiSuggestedAction) && (
|
||||
<div className="rounded-lg bg-brand-primary p-3">
|
||||
<div className="mb-1 flex items-center gap-1.5">
|
||||
<FontAwesomeIcon icon={faSparkles} className="size-3 text-fg-brand-primary" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-brand-secondary">AI Insight</span>
|
||||
</div>
|
||||
{lead.aiSummary && <p className="text-xs text-primary">{lead.aiSummary}</p>}
|
||||
{lead.aiSuggestedAction && (
|
||||
<p className="mt-1 text-xs font-semibold text-brand-secondary">{lead.aiSuggestedAction}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upcoming appointments */}
|
||||
{appointments.length > 0 && (
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-tertiary uppercase">Appointments</span>
|
||||
<div className="mt-1 space-y-1">
|
||||
{appointments.slice(0, 3).map((appt: any) => (
|
||||
<div key={appt.id} className="flex items-center gap-2 rounded-md bg-secondary px-2 py-1.5">
|
||||
<CalendarCheck className="size-3 text-fg-brand-primary shrink-0" />
|
||||
<span className="text-xs text-primary truncate">
|
||||
{appt.doctorName ?? 'Doctor'} · {appt.scheduledAt ? formatShortDate(appt.scheduledAt) : ''}
|
||||
</span>
|
||||
{appt.status && (
|
||||
<Badge size="sm" color={appt.status === 'COMPLETED' ? 'success' : appt.status === 'CANCELLED' ? 'error' : 'brand'}>
|
||||
{appt.status.toLowerCase()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Returning patient: Recent calls */}
|
||||
{isReturning && patientCalls.length > 0 && (
|
||||
<div>
|
||||
<h4 className="mb-2 text-xs font-bold text-secondary uppercase">Recent Calls</h4>
|
||||
<div className="space-y-1">
|
||||
{patientCalls.map((call: any) => (
|
||||
<div key={call.id} className="flex items-center gap-2 text-xs">
|
||||
<div className="mt-0.5 size-1.5 shrink-0 rounded-full bg-fg-quaternary" />
|
||||
<span className="text-primary">
|
||||
{call.direction === 'INBOUND' ? 'Inbound' : 'Outbound'}
|
||||
{call.disposition ? ` — ${call.disposition.replace(/_/g, ' ').toLowerCase()}` : ''}
|
||||
</span>
|
||||
<span className="text-quaternary ml-auto">{call.startedAt ? formatShortDate(call.startedAt) : ''}</span>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AI Insight */}
|
||||
{(lead.aiSummary || lead.aiSuggestedAction) && (
|
||||
<div className="rounded-lg bg-brand-primary p-3">
|
||||
<div className="mb-1 flex items-center gap-1.5">
|
||||
<FontAwesomeIcon icon={faSparkles} className="size-3 text-fg-brand-primary" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-brand-secondary">AI Insight</span>
|
||||
</div>
|
||||
{lead.aiSummary && <p className="text-xs text-primary">{lead.aiSummary}</p>}
|
||||
{lead.aiSuggestedAction && (
|
||||
<p className="mt-1 text-xs font-semibold text-brand-secondary">{lead.aiSuggestedAction}</p>
|
||||
{loadingPatient && <p className="text-[10px] text-quaternary">Loading patient details...</p>}
|
||||
|
||||
{/* Recent activity */}
|
||||
{leadActivities.length > 0 && (
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-tertiary uppercase">Recent Activity</span>
|
||||
<div className="mt-1 space-y-1">
|
||||
{leadActivities.slice(0, 5).map((a) => (
|
||||
<div key={a.id} className="flex items-start gap-2">
|
||||
<div className="mt-1.5 size-1.5 shrink-0 rounded-full bg-fg-quaternary" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs text-primary truncate">{a.summary}</p>
|
||||
<p className="text-[10px] text-quaternary">
|
||||
{a.activityType?.replace(/_/g, ' ')}{a.occurredAt ? ` · ${formatShortDate(a.occurredAt)}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Activity timeline */}
|
||||
{leadActivities.length > 0 && (
|
||||
<div>
|
||||
<h4 className="mb-2 text-xs font-bold text-secondary uppercase">Activity</h4>
|
||||
<div className="space-y-2">
|
||||
{leadActivities.map((a) => (
|
||||
<div key={a.id} className="flex items-start gap-2">
|
||||
<div className="mt-1.5 size-1.5 shrink-0 rounded-full bg-fg-quaternary" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs text-primary">{a.summary}</p>
|
||||
<p className="text-[10px] text-quaternary">
|
||||
{a.activityType}{a.occurredAt ? ` · ${formatShortDate(a.occurredAt)}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* No lead selected — empty state */}
|
||||
{!lead && (
|
||||
<div className="shrink-0 flex items-center justify-center border-b border-secondary px-4 py-6">
|
||||
<div className="text-center">
|
||||
<FontAwesomeIcon icon={faUser} className="mb-2 size-6 text-fg-quaternary" />
|
||||
<p className="text-xs text-tertiary">Select a lead from the worklist to see context</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AI Chat — always available at the bottom */}
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<AiChatPanel callerContext={callerContext} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user