Component Library Overview

Relevant source files

The following files were used as context for generating this wiki page:

• App.tsx
• components/AiDemo.tsx
• components/Chatbot.tsx
• components/Section.tsx
• components/Card.tsx
• components/Timeline.tsx
• components/Icons.tsx
• services/geminiService.ts
• constants.ts
• types.ts

The AI for Thai EMS project is built using a component-based architecture with React and TypeScript. The user interface is composed of a set of modular, reusable components found primarily in the components/ directory. These components range from simple, presentational UI elements for layout and data display to complex, stateful feature components that provide the core AI-driven functionality.

The main application entry point, App.tsx, orchestrates the assembly of these components to form the complete user interface. The components are designed to be self-contained but work together, with feature components like AiDemo and Chatbot relying on a dedicated service layer (services/geminiService.ts) to interact with the Google Gemini AI backend. This architecture promotes separation of concerns, reusability, and maintainability.

Sources: App.tsx, components/AiDemo.tsx, components/Chatbot.tsx, services/geminiService.ts

Component Architecture

The application follows a hierarchical component structure, with App.tsx serving as the root component. It imports and renders various structural, presentational, and feature components to build the page layout and functionality.

The diagram below illustrates the high-level component hierarchy as defined in App.tsx.

Structural & Presentational Components

These components are responsible for the layout and visual presentation of content. They are generally stateless and receive data via props.

Component	File Path	Description
Header	components/Header.tsx	A sticky header component displaying the NIEM logo and project title. It is displayed at the top of the page.
Section	components/Section.tsx	A reusable container component that wraps content under a styled heading with a bottom border.
Card	components/Card.tsx	A styled card with a top border, title, and content area. Used to display project objectives.
Timeline	components/Timeline.tsx	Renders a vertical timeline of events, each with a title, description, and a progress bar indicating completion percentage.
Icons	components/Icons.tsx	A collection of SVG icons exported as individual React components for use throughout the application.

Sources: components/Header.tsx, components/Section.tsx, components/Card.tsx, components/Timeline.tsx, components/Icons.tsx

Feature Components

These are complex, stateful components that implement the core interactive and AI-powered features of the application.

AiDemo Component

Sources: components/AiDemo.tsx

The AiDemo component provides an interactive simulation of an emergency call dispatch. It displays a scripted conversation between a dispatcher and a caller, and in parallel, shows a dashboard of AI-generated analysis of the call in real-time.

State Management

The component manages several state variables to control the simulation:

• simulationState: Tracks the current state of the demo ('idle', 'running', 'finished').
• transcript: An array of message objects that grows as the simulation runs.
• analysis: An object of type AiAnalysisResult that stores the structured data returned from the AI.
• isAnalyzing: A boolean flag to indicate when an API call to the AI service is in progress.

Sources: components/AiDemo.tsx:21-26

Simulation Flow

When the user clicks "Start Simulation", the handleStart function initiates the process. A useEffect hook manages a setInterval to add new lines to the transcript from a predefined script (fullTranscript). After each "Caller" line is added, the runAnalysis function is triggered.

AI Interaction

The runAnalysis function calls analyzeEmergencyCallWithGemini from geminiService.ts, passing the current transcript. This service then makes an API call to the Gemini model, requesting the output to be structured according to a specific JSON schema.

Chatbot Component

Sources: components/Chatbot.tsx

The Chatbot is a floating widget that allows users to have a conversation with an AI assistant. It supports text and audio input, and can be configured to use different AI models and tools.

Features

• Floating UI: A button fixed to the bottom-right of the screen toggles the chat window.
• Streaming Responses: AI responses are streamed token-by-token for a more interactive feel.
• Configurable AI: Toggles allow the user to enable "Thinking Mode" (uses the more powerful gemini-2.5-pro model), and enable tools like Google Search and Google Maps.
• Audio Input: Users can record audio, which is transcribed to text and used as input for the chat.
• Source Display: When the AI uses tools like Google Search, it can display the sources for its information.

Sources: components/Chatbot.tsx:203-210, 212-225

Message Handling Flow

When a user sends a message, handleSendMessage is called. It updates the message history, calls sendMessageToChatStream in the geminiService, and then iterates through the returned stream to append the AI's response to the chat window.

Audio Recording State

The component uses state to manage the microphone recording process.

Data and Services

Components are populated with both static data defined within the project and dynamic data fetched from the Gemini AI service.

Static Data

The constants.ts file exports arrays and objects containing static content for the application, such as project objectives, the research team list, and timeline events. These are imported directly into App.tsx and passed as props to presentational components.

• projectObjectives: Used by Card components.
• researchTeam: Rendered in a grid within a Section.
• timelineEvents: Passed to the Timeline component.
• expectedImpacts: Used to populate lists of benefits.

Sources: constants.ts, App.tsx:6-7, 43-47, 57-65, 71-73

AI Service Layer

Sources: services/geminiService.ts

All interactions with the Google Gemini API are centralized in services/geminiService.ts. This file abstracts the API calls away from the components.

analyzeEmergencyCallWithGemini

This function takes a transcript string and uses the Gemini model with a specified JSON schema to extract structured information. This enforces a consistent output format from the AI.

Output Schema:

Field	Type	Description
incidentType	string	e.g., Cardiac Emergency, Trauma, Fire
location	string	The full address of the incident
severity	"Critical" | "Urgent" | "Non-Urgent"	The assessed severity level
recommendedAction	string	e.g., Dispatch ALS Ambulance
extractedData	object	Contains name, age, and condition of the patient

Sources: services/geminiService.ts:9-30, types.ts:13-21

sendMessageToChatStream

This function handles the logic for the chatbot. It selects the appropriate AI model based on the isThinkingMode flag and configures API tools (googleSearch, googleMaps) based on user toggles. It creates a chat session and returns a ReadableStream of the AI's response.

Sources: services/geminiService.ts:67-91