mirror of
https://github.com/temetro/temetro.git
synced 2026-08-31 04:47:57 +00:00
feat: AI-added records save with placeholders + "Added by AI" provenance
Stop blocking AI imports/proposals on missing non-critical fields. Records the chat agent drafts now save with safe placeholders, auto-generated file numbers, and a source="ai" marker that surfaces an "Added by AI" badge so a clinician can review/edit them later. Backend: - add `source` (manual|ai) column to patients/appointments/prescriptions (migration 0014) + canonical types, services, validation schemas - relax patient/appointment validation: empty file number allowed, demographic + type/provider/initials fall back to placeholders (initials derived from name) - patients.generateFileNumber() auto-assigns an MRN when one is missing - proposeAppointment accepts a name when no file number resolves; AI commits + /api/ai/import stamp source="ai" Frontend: - `source` on Appointment/Patient/Prescription types; AI commits send source="ai" - reusable <AiBadge> shown on the Patients table/detail and prescriptions list Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
@@ -0,0 +1,394 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Attachment,
|
||||
AttachmentPreview,
|
||||
AttachmentRemove,
|
||||
Attachments,
|
||||
} from "@/components/ai-elements/attachments";
|
||||
import {
|
||||
ModelSelector,
|
||||
ModelSelectorContent,
|
||||
ModelSelectorEmpty,
|
||||
ModelSelectorGroup,
|
||||
ModelSelectorInput,
|
||||
ModelSelectorItem,
|
||||
ModelSelectorList,
|
||||
ModelSelectorLogo,
|
||||
ModelSelectorLogoGroup,
|
||||
ModelSelectorName,
|
||||
ModelSelectorTrigger,
|
||||
} from "@/components/ai-elements/model-selector";
|
||||
import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
|
||||
import {
|
||||
PromptInput,
|
||||
PromptInputActionAddAttachments,
|
||||
PromptInputActionMenu,
|
||||
PromptInputActionMenuContent,
|
||||
PromptInputActionMenuTrigger,
|
||||
PromptInputBody,
|
||||
PromptInputButton,
|
||||
PromptInputFooter,
|
||||
PromptInputHeader,
|
||||
PromptInputSubmit,
|
||||
PromptInputTextarea,
|
||||
PromptInputTools,
|
||||
usePromptInputAttachments,
|
||||
} from "@/components/ai-elements/prompt-input";
|
||||
import type { QueueTodo } from "@/components/ai-elements/queue";
|
||||
import {
|
||||
Queue,
|
||||
QueueItem,
|
||||
QueueItemAction,
|
||||
QueueItemActions,
|
||||
QueueItemContent,
|
||||
QueueItemDescription,
|
||||
QueueItemIndicator,
|
||||
QueueSection,
|
||||
QueueSectionContent,
|
||||
} from "@/components/ai-elements/queue";
|
||||
import { CheckIcon, GlobeIcon, Trash2 } from "lucide-react";
|
||||
import { memo, useCallback, useRef, useState } from "react";
|
||||
|
||||
const models = [
|
||||
{
|
||||
chef: "OpenAI",
|
||||
chefSlug: "openai",
|
||||
id: "gpt-4o",
|
||||
name: "GPT-4o",
|
||||
providers: ["openai", "azure"],
|
||||
},
|
||||
{
|
||||
chef: "OpenAI",
|
||||
chefSlug: "openai",
|
||||
id: "gpt-4o-mini",
|
||||
name: "GPT-4o Mini",
|
||||
providers: ["openai", "azure"],
|
||||
},
|
||||
{
|
||||
chef: "Anthropic",
|
||||
chefSlug: "anthropic",
|
||||
id: "claude-opus-4-20250514",
|
||||
name: "Claude 4 Opus",
|
||||
providers: ["anthropic", "azure", "google", "amazon-bedrock"],
|
||||
},
|
||||
{
|
||||
chef: "Anthropic",
|
||||
chefSlug: "anthropic",
|
||||
id: "claude-sonnet-4-20250514",
|
||||
name: "Claude 4 Sonnet",
|
||||
providers: ["anthropic", "azure", "google", "amazon-bedrock"],
|
||||
},
|
||||
{
|
||||
chef: "Google",
|
||||
chefSlug: "google",
|
||||
id: "gemini-2.0-flash-exp",
|
||||
name: "Gemini 2.0 Flash",
|
||||
providers: ["google"],
|
||||
},
|
||||
];
|
||||
|
||||
const SUBMITTING_TIMEOUT = 200;
|
||||
const STREAMING_TIMEOUT = 2000;
|
||||
|
||||
interface AttachmentItemProps {
|
||||
attachment: {
|
||||
id: string;
|
||||
type: "file";
|
||||
filename?: string;
|
||||
mediaType?: string;
|
||||
url: string;
|
||||
};
|
||||
onRemove: (id: string) => void;
|
||||
}
|
||||
|
||||
const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {
|
||||
const handleRemove = useCallback(
|
||||
() => onRemove(attachment.id),
|
||||
[onRemove, attachment.id]
|
||||
);
|
||||
return (
|
||||
<Attachment data={attachment} key={attachment.id} onRemove={handleRemove}>
|
||||
<AttachmentPreview />
|
||||
<AttachmentRemove />
|
||||
</Attachment>
|
||||
);
|
||||
});
|
||||
|
||||
AttachmentItem.displayName = "AttachmentItem";
|
||||
|
||||
interface TodoItemProps {
|
||||
todo: QueueTodo;
|
||||
onRemove: (id: string) => void;
|
||||
}
|
||||
|
||||
const TodoItem = memo(({ todo, onRemove }: TodoItemProps) => {
|
||||
const isCompleted = todo.status === "completed";
|
||||
const handleRemove = useCallback(
|
||||
() => onRemove(todo.id),
|
||||
[onRemove, todo.id]
|
||||
);
|
||||
|
||||
return (
|
||||
<QueueItem key={todo.id}>
|
||||
<div className="flex items-center gap-2">
|
||||
<QueueItemIndicator completed={isCompleted} />
|
||||
<QueueItemContent completed={isCompleted}>
|
||||
{todo.title}
|
||||
</QueueItemContent>
|
||||
<QueueItemActions>
|
||||
<QueueItemAction aria-label="Remove todo" onClick={handleRemove}>
|
||||
<Trash2 size={12} />
|
||||
</QueueItemAction>
|
||||
</QueueItemActions>
|
||||
</div>
|
||||
{todo.description && (
|
||||
<QueueItemDescription completed={isCompleted}>
|
||||
{todo.description}
|
||||
</QueueItemDescription>
|
||||
)}
|
||||
</QueueItem>
|
||||
);
|
||||
});
|
||||
|
||||
TodoItem.displayName = "TodoItem";
|
||||
|
||||
interface ModelItemProps {
|
||||
m: (typeof models)[0];
|
||||
selectedModel: string;
|
||||
onSelect: (id: string) => void;
|
||||
}
|
||||
|
||||
const ModelItem = memo(({ m, selectedModel, onSelect }: ModelItemProps) => {
|
||||
const handleSelect = useCallback(() => onSelect(m.id), [onSelect, m.id]);
|
||||
return (
|
||||
<ModelSelectorItem key={m.id} onSelect={handleSelect} value={m.id}>
|
||||
<ModelSelectorLogo provider={m.chefSlug} />
|
||||
<ModelSelectorName>{m.name}</ModelSelectorName>
|
||||
<ModelSelectorLogoGroup>
|
||||
{m.providers.map((provider) => (
|
||||
<ModelSelectorLogo key={provider} provider={provider} />
|
||||
))}
|
||||
</ModelSelectorLogoGroup>
|
||||
{selectedModel === m.id ? (
|
||||
<CheckIcon className="ml-auto size-4" />
|
||||
) : (
|
||||
<div className="ml-auto size-4" />
|
||||
)}
|
||||
</ModelSelectorItem>
|
||||
);
|
||||
});
|
||||
|
||||
ModelItem.displayName = "ModelItem";
|
||||
|
||||
const sampleTodos: QueueTodo[] = [
|
||||
{
|
||||
description: "Complete the README and API docs",
|
||||
id: "todo-1",
|
||||
status: "completed",
|
||||
title: "Write project documentation",
|
||||
},
|
||||
{
|
||||
id: "todo-2",
|
||||
status: "pending",
|
||||
title: "Implement authentication",
|
||||
},
|
||||
{
|
||||
description: "Resolve crash on settings page",
|
||||
id: "todo-3",
|
||||
status: "pending",
|
||||
title: "Fix bug #42",
|
||||
},
|
||||
{
|
||||
description: "Unify queue and todo state management",
|
||||
id: "todo-4",
|
||||
status: "pending",
|
||||
title: "Refactor queue logic",
|
||||
},
|
||||
{
|
||||
description: "Increase test coverage for hooks",
|
||||
id: "todo-5",
|
||||
status: "pending",
|
||||
title: "Add unit tests",
|
||||
},
|
||||
];
|
||||
|
||||
const PromptInputAttachmentsDisplay = () => {
|
||||
const attachments = usePromptInputAttachments();
|
||||
|
||||
const handleRemove = useCallback(
|
||||
(id: string) => attachments.remove(id),
|
||||
[attachments]
|
||||
);
|
||||
|
||||
if (attachments.files.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Attachments variant="inline">
|
||||
{attachments.files.map((attachment) => (
|
||||
<AttachmentItem
|
||||
attachment={attachment}
|
||||
key={attachment.id}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
))}
|
||||
</Attachments>
|
||||
);
|
||||
};
|
||||
|
||||
const Example = () => {
|
||||
const [todos, setTodos] = useState(sampleTodos);
|
||||
|
||||
const handleRemoveTodo = useCallback((id: string) => {
|
||||
setTodos((prev) => prev.filter((todo) => todo.id !== id));
|
||||
}, []);
|
||||
|
||||
const [text, setText] = useState<string>("");
|
||||
const [model, setModel] = useState<string>(models[0].id);
|
||||
const [modelSelectorOpen, setModelSelectorOpen] = useState(false);
|
||||
const [status, setStatus] = useState<
|
||||
"submitted" | "streaming" | "ready" | "error"
|
||||
>("ready");
|
||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const handleTextChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value),
|
||||
[]
|
||||
);
|
||||
|
||||
const handleModelSelect = useCallback((id: string) => {
|
||||
setModel(id);
|
||||
setModelSelectorOpen(false);
|
||||
}, []);
|
||||
|
||||
const selectedModelData = models.find((m) => m.id === model);
|
||||
|
||||
const stop = () => {
|
||||
console.log("Stopping request...");
|
||||
|
||||
// Clear any pending timeouts
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
timeoutRef.current = null;
|
||||
}
|
||||
|
||||
setStatus("ready");
|
||||
};
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(message: PromptInputMessage) => {
|
||||
// If currently streaming or submitted, stop instead of submitting
|
||||
if (status === "streaming" || status === "submitted") {
|
||||
stop();
|
||||
return;
|
||||
}
|
||||
|
||||
const hasText = Boolean(message.text);
|
||||
const hasAttachments = Boolean(message.files?.length);
|
||||
|
||||
if (!(hasText || hasAttachments)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("submitted");
|
||||
|
||||
console.log("Submitting message:", message);
|
||||
|
||||
setTimeout(() => {
|
||||
setStatus("streaming");
|
||||
}, SUBMITTING_TIMEOUT);
|
||||
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
setStatus("ready");
|
||||
timeoutRef.current = null;
|
||||
}, STREAMING_TIMEOUT);
|
||||
},
|
||||
[status]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex size-full flex-col justify-end">
|
||||
<Queue className="mx-auto max-h-[150px] w-[95%] overflow-y-auto rounded-b-none border-input border-b-0">
|
||||
{todos.length > 0 && (
|
||||
<QueueSection>
|
||||
<QueueSectionContent>
|
||||
<div>
|
||||
{todos.map((todo) => (
|
||||
<TodoItem
|
||||
key={todo.id}
|
||||
onRemove={handleRemoveTodo}
|
||||
todo={todo}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</QueueSectionContent>
|
||||
</QueueSection>
|
||||
)}
|
||||
</Queue>
|
||||
<PromptInput globalDrop multiple onSubmit={handleSubmit}>
|
||||
<PromptInputHeader>
|
||||
<PromptInputAttachmentsDisplay />
|
||||
</PromptInputHeader>
|
||||
<PromptInputBody>
|
||||
<PromptInputTextarea onChange={handleTextChange} value={text} />
|
||||
</PromptInputBody>
|
||||
<PromptInputFooter>
|
||||
<PromptInputTools>
|
||||
<PromptInputActionMenu>
|
||||
<PromptInputActionMenuTrigger />
|
||||
<PromptInputActionMenuContent>
|
||||
<PromptInputActionAddAttachments />
|
||||
</PromptInputActionMenuContent>
|
||||
</PromptInputActionMenu>
|
||||
<PromptInputButton>
|
||||
<GlobeIcon size={16} />
|
||||
<span>Search</span>
|
||||
</PromptInputButton>
|
||||
<ModelSelector
|
||||
onOpenChange={setModelSelectorOpen}
|
||||
open={modelSelectorOpen}
|
||||
>
|
||||
<ModelSelectorTrigger asChild>
|
||||
<PromptInputButton>
|
||||
{selectedModelData?.chefSlug && (
|
||||
<ModelSelectorLogo provider={selectedModelData.chefSlug} />
|
||||
)}
|
||||
{selectedModelData?.name && (
|
||||
<ModelSelectorName>
|
||||
{selectedModelData.name}
|
||||
</ModelSelectorName>
|
||||
)}
|
||||
</PromptInputButton>
|
||||
</ModelSelectorTrigger>
|
||||
<ModelSelectorContent>
|
||||
<ModelSelectorInput placeholder="Search models..." />
|
||||
<ModelSelectorList>
|
||||
<ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
|
||||
{["OpenAI", "Anthropic", "Google"].map((chef) => (
|
||||
<ModelSelectorGroup heading={chef} key={chef}>
|
||||
{models
|
||||
.filter((m) => m.chef === chef)
|
||||
.map((m) => (
|
||||
<ModelItem
|
||||
key={m.id}
|
||||
m={m}
|
||||
onSelect={handleModelSelect}
|
||||
selectedModel={model}
|
||||
/>
|
||||
))}
|
||||
</ModelSelectorGroup>
|
||||
))}
|
||||
</ModelSelectorList>
|
||||
</ModelSelectorContent>
|
||||
</ModelSelector>
|
||||
</PromptInputTools>
|
||||
<PromptInputSubmit status={status} />
|
||||
</PromptInputFooter>
|
||||
</PromptInput>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Example;
|
||||
Reference in New Issue
Block a user