mirror of https://github.com/temetro/temetro.git synced 2026-07-26 11:58:14 +00:00

Files

T

Khalid Abdi 929bec8f31 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>

2026-06-14 19:27:17 +03:00

3.6 KiB

Raw Blame History

Suggestion

A suggestion component that displays a horizontal row of clickable suggestions for user interaction.

The Suggestion component displays a horizontal row of clickable suggestions for user interaction.

See scripts/suggestion.tsx for this example.

Installation

npx ai-elements@latest add suggestion

Usage with AI SDK

Build a simple input with suggestions users can click to send a message to the LLM.

Add the following component to your frontend:

"use client";

import {
  PromptInput,
  type PromptInputMessage,
  PromptInputTextarea,
  PromptInputSubmit,
} from "@/components/ai-elements/prompt-input";
import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
import { useState } from "react";
import { useChat } from "@ai-sdk/react";

const suggestions = [
  "Can you explain how to play tennis?",
  "What is the weather in Tokyo?",
  "How do I make a really good fish taco?",
];

const SuggestionDemo = () => {
  const [input, setInput] = useState("");
  const { sendMessage, status } = useChat();

  const handleSubmit = (message: PromptInputMessage) => {
    if (message.text.trim()) {
      sendMessage({ text: message.text });
      setInput("");
    }
  };

  const handleSuggestionClick = (suggestion: string) => {
    sendMessage({ text: suggestion });
  };

  return (
    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
      <div className="flex flex-col h-full">
        <div className="flex flex-col gap-4">
          <Suggestions>
            {suggestions.map((suggestion) => (
              <Suggestion
                key={suggestion}
                onClick={handleSuggestionClick}
                suggestion={suggestion}
              />
            ))}
          </Suggestions>
          <PromptInput
            onSubmit={handleSubmit}
            className="mt-4 w-full max-w-2xl mx-auto relative"
          >
            <PromptInputTextarea
              value={input}
              placeholder="Say something..."
              onChange={(e) => setInput(e.currentTarget.value)}
              className="pr-12"
            />
            <PromptInputSubmit
              status={status === "streaming" ? "streaming" : "ready"}
              disabled={!input.trim()}
              className="absolute bottom-1 right-1"
            />
          </PromptInput>
        </div>
      </div>
    </div>
  );
};

export default SuggestionDemo;

Features

Horizontal row of clickable suggestion buttons
Customizable styling with variant and size options
Flexible layout that wraps suggestions on smaller screens
onClick callback that emits the selected suggestion string
Support for both individual suggestions and suggestion lists
Clean, modern styling with hover effects
Responsive design with mobile-friendly touch targets
TypeScript support with proper type definitions

Examples

Usage with AI Input

See scripts/suggestion-input.tsx for this example.

Props

`<Suggestions />`

Prop	Type	Default	Description
`...props`	`React.ComponentProps<typeof ScrollArea>`	-	Any other props are spread to the underlying ScrollArea component.

`<Suggestion />`

Prop	Type	Default	Description
`suggestion`	`string`	Required	The suggestion string to display and emit on click.
`onClick`	`(suggestion: string) => void`	-	Callback fired when the suggestion is clicked.
`...props`	`Omit<React.ComponentProps<typeof Button>,`	-	Any other props are spread to the underlying shadcn/ui Button component.

3.6 KiB Raw Blame History