0
# TypeScript Types
1

2
Comprehensive TypeScript interfaces and types for all CopilotKit React UI components, props, and configurations.
3

4
## Capabilities
5

6
### Chat Component Props
7

8
Main props interfaces for chat components.
9

10
```typescript { .api }
11
interface CopilotChatProps {
12
  /** Custom instructions for the system message */
13
  instructions?: string;
14

15
  /** Suggestion behavior: "auto" (AI-generated), "manual" (programmatic), or static array */
16
  suggestions?: ChatSuggestions;
17

18
  /** Callback when generation state changes */
19
  onInProgress?: (inProgress: boolean) => void;
20

21
  /** Callback when user submits a message */
22
  onSubmitMessage?: (message: string) => void | Promise<void>;
23

24
  /** Custom stop generation handler */
25
  onStopGeneration?: OnStopGeneration;
26

27
  /** Custom reload/regenerate handler */
28
  onReloadMessages?: OnReloadMessages;
29

30
  /** Callback when message is regenerated */
31
  onRegenerate?: (messageId: string) => void;
32

33
  /** Callback when message is copied to clipboard */
34
  onCopy?: (message: string) => void;
35

36
  /** Callback for positive feedback */
37
  onThumbsUp?: (message: Message) => void;
38

39
  /** Callback for negative feedback */
40
  onThumbsDown?: (message: Message) => void;
41

42
  /** Custom markdown component renderers */
43
  markdownTagRenderers?: ComponentsMap;
44

45
  /** Custom icon overrides */
46
  icons?: CopilotChatIcons;
47

48
  /** Custom label/text overrides */
49
  labels?: CopilotChatLabels;
50

51
  /** Enable image upload functionality */
52
  imageUploadsEnabled?: boolean;
53

54
  /** File input accept attribute (default: "image/*") */
55
  inputFileAccept?: string;
56

57
  /** Override system message generation */
58
  makeSystemMessage?: SystemMessageFunction;
59

60
  /** Disable system message entirely */
61
  disableSystemMessage?: boolean;
62

63
  /** Custom assistant message component */
64
  AssistantMessage?: React.ComponentType<AssistantMessageProps>;
65

66
  /** Custom user message component */
67
  UserMessage?: React.ComponentType<UserMessageProps>;
68

69
  /** Custom error message component */
70
  ErrorMessage?: React.ComponentType<ErrorMessageProps>;
71

72
  /** Custom messages container component */
73
  Messages?: React.ComponentType<MessagesProps>;
74

75
  /** Custom message renderer */
76
  RenderMessage?: React.ComponentType<RenderMessageProps>;
77

78
  /** Custom suggestions list renderer */
79
  RenderSuggestionsList?: React.ComponentType<RenderSuggestionsListProps>;
80

81
  /** Custom input component */
82
  Input?: React.ComponentType<InputProps>;
83

84
  /** Custom image renderer */
85
  ImageRenderer?: React.ComponentType<ImageRendererProps>;
86

87
  /** Additional CSS class */
88
  className?: string;
89

90
  /** Child elements */
91
  children?: React.ReactNode;
92

93
  /** Hide the stop generation button */
94
  hideStopButton?: boolean;
95

96
  /** Event tracking hooks (requires publicApiKey in CopilotKit provider) */
97
  observabilityHooks?: CopilotObservabilityHooks;
98

99
  /** Custom error renderer */
100
  renderError?: (error: {
101
    message: string;
102
    operation?: string;
103
    timestamp: number;
104
    onDismiss: () => void;
105
    onRetry?: () => void;
106
  }) => React.ReactNode;
107

108
  /** Error handler for debugging */
109
  onError?: CopilotErrorHandler;
110
}
111

112
interface CopilotModalProps extends CopilotChatProps {
113
  /** Whether popup is open by default (default: false) */
114
  defaultOpen?: boolean;
115

116
  /** Close popup when clicking outside (default: true) */
117
  clickOutsideToClose?: boolean;
118

119
  /** Close popup when pressing Escape (default: true) */
120
  hitEscapeToClose?: boolean;
121

122
  /** Keyboard shortcut to toggle popup (default: "/") */
123
  shortcut?: string;
124

125
  /** Callback when open state changes */
126
  onSetOpen?: (open: boolean) => void;
127

128
  /** Custom window/modal component */
129
  Window?: React.ComponentType<WindowProps>;
130

131
  /** Custom toggle button component */
132
  Button?: React.ComponentType<ButtonProps>;
133

134
  /** Custom header component */
135
  Header?: React.ComponentType<HeaderProps>;
136
}
137

138
type CopilotErrorHandler = (error: Error) => void;
139

140
type SystemMessageFunction = (args: {
141
  instructions?: string;
142
}) => string;
143
```
144

145
### Suggestion Types
146

147
Types for controlling and defining chat suggestions.
148

149
```typescript { .api }
150
type ChatSuggestions = "auto" | "manual" | SuggestionItem[];
151

152
interface SuggestionItem {
153
  /** Suggestion title/text displayed to user */
154
  title: string;
155

156
  /** Message to send when suggestion is clicked */
157
  message: string;
158

159
  /** Whether suggestion is still being generated */
160
  partial?: boolean;
161

162
  /** Optional CSS class */
163
  className?: string;
164
}
165

166
interface CopilotChatSuggestion {
167
  /** Suggestion title/text displayed to user */
168
  title: string;
169

170
  /** Message to send when suggestion is clicked */
171
  message: string;
172

173
  /** Whether suggestion is still being generated */
174
  partial?: boolean;
175

176
  /** Optional CSS class */
177
  className?: string;
178
}
179

180
interface UseCopilotChatSuggestionsConfiguration {
181
  /** Instructions for GPT to generate relevant suggestions */
182
  instructions: string;
183

184
  /** Minimum number of suggestions to generate (default: 1) */
185
  minSuggestions?: number;
186

187
  /** Maximum number of suggestions to generate (default: 3) */
188
  maxSuggestions?: number;
189

190
  /** Whether suggestions are available (default: "enabled") */
191
  available?: "enabled" | "disabled";
192

193
  /** Optional CSS class for suggestions container */
194
  className?: string;
195
}
196
```
197

198
### Message Types
199

200
Types for representing different message types in the chat.
201

202
```typescript { .api }
203
type Message = AIMessage | UserMessage;
204

205
interface AIMessage {
206
  id: string;
207
  role: "assistant";
208
  content: string;
209
  generativeUI?: () => React.ReactNode;
210
  agentName?: string;
211
  state?: any;
212
  image?: ImageData;
213
}
214

215
interface UserMessage {
216
  id: string;
217
  role: "user";
218
  content: string;
219
  image?: ImageData;
220
}
221

222
interface ImageData {
223
  /** Image format (e.g., "png", "jpeg", "gif") */
224
  format: string;
225

226
  /** Base64-encoded image bytes */
227
  bytes: string;
228
}
229

230
/**
231
 * Note: ImageData is imported from @copilotkit/shared, not defined locally.
232
 * It's re-exported from @copilotkit/react-ui for convenience.
233
 */
234

235
interface ChatError {
236
  /** Error message text */
237
  message: string;
238

239
  /** Operation that caused the error */
240
  operation?: string;
241

242
  /** Error timestamp */
243
  timestamp: number;
244
}
245
```
246

247
### Component Props Interfaces
248

249
Props interfaces for message and UI components.
250

251
```typescript { .api }
252
interface AssistantMessageProps {
253
  /** The AI message content */
254
  message?: AIMessage;
255

256
  /** Whether this is the most recent message */
257
  isCurrentMessage?: boolean;
258

259
  /** Whether response is loading (thinking state) */
260
  isLoading: boolean;
261

262
  /** Whether response is actively streaming */
263
  isGenerating: boolean;
264

265
  /** Callback to regenerate this message */
266
  onRegenerate?: () => void;
267

268
  /** Callback when message is copied */
269
  onCopy?: (message: string) => void;
270

271
  /** Callback for positive feedback */
272
  onThumbsUp?: (message: Message) => void;
273

274
  /** Callback for negative feedback */
275
  onThumbsDown?: (message: Message) => void;
276

277
  /** Custom markdown component renderers */
278
  markdownTagRenderers?: ComponentsMap;
279

280
  /** Custom image renderer component */
281
  ImageRenderer?: React.ComponentType<ImageRendererProps>;
282

283
  /**
284
   * @deprecated Use message property instead
285
   * Note: Despite being deprecated, this property is currently REQUIRED
286
   */
287
  rawData: any;
288

289
  /** @deprecated Use message.generativeUI() instead */
290
  subComponent?: React.JSX.Element;
291
}
292

293
interface UserMessageProps {
294
  /** The user message content */
295
  message?: UserMessage;
296

297
  /** Image renderer component for displaying attachments */
298
  ImageRenderer: React.ComponentType<ImageRendererProps>;
299

300
  /**
301
   * @deprecated Use message property instead
302
   * Note: Despite being deprecated, this property is currently REQUIRED
303
   */
304
  rawData: any;
305
}
306

307
interface ErrorMessageProps {
308
  /** Error information */
309
  error: ChatError;
310

311
  /** Whether this is the most recent message */
312
  isCurrentMessage?: boolean;
313

314
  /** Callback to regenerate/retry */
315
  onRegenerate?: () => void;
316

317
  /** Callback when error is copied */
318
  onCopy?: (message: string) => void;
319
}
320

321
interface ImageRendererProps {
322
  /** Image data with format and encoded bytes */
323
  image: ImageData;
324

325
  /** Optional text content to display with image */
326
  content?: string;
327

328
  /** Additional CSS class */
329
  className?: string;
330
}
331

332
interface RenderMessageProps {
333
  /** The message to render */
334
  message: Message;
335

336
  /** Whether chat is currently in progress */
337
  inProgress: boolean;
338

339
  /** Message index in the array */
340
  index: number;
341

342
  /** Whether this is the most recent message */
343
  isCurrentMessage: boolean;
344

345
  /** Result from action execution if applicable */
346
  actionResult?: string;
347

348
  /** Assistant message component to use */
349
  AssistantMessage?: React.ComponentType<AssistantMessageProps>;
350

351
  /** User message component to use */
352
  UserMessage?: React.ComponentType<UserMessageProps>;
353

354
  /** Image renderer component to use */
355
  ImageRenderer?: React.ComponentType<ImageRendererProps>;
356

357
  /** Callback to regenerate message */
358
  onRegenerate?: (messageId: string) => void;
359

360
  /** Callback when message is copied */
361
  onCopy?: (message: string) => void;
362

363
  /** Callback for positive feedback */
364
  onThumbsUp?: (message: Message) => void;
365

366
  /** Callback for negative feedback */
367
  onThumbsDown?: (message: Message) => void;
368

369
  /** Custom markdown renderers */
370
  markdownTagRenderers?: ComponentsMap;
371
}
372

373
interface RenderSuggestionsListProps {
374
  /** Array of suggestion items */
375
  suggestions: CopilotChatSuggestion[];
376

377
  /** Click handler for suggestions */
378
  onSuggestionClick: (message: string) => void;
379
}
380

381
interface MessagesProps {
382
  /** Array of all messages */
383
  messages: Message[];
384

385
  /** Whether chat is in progress */
386
  inProgress: boolean;
387

388
  /** Child elements (typically suggestions) */
389
  children?: React.ReactNode;
390

391
  /** Current chat error if any */
392
  chatError?: ChatError | null;
393

394
  /** Assistant message component */
395
  AssistantMessage: React.ComponentType<AssistantMessageProps>;
396

397
  /** User message component */
398
  UserMessage: React.ComponentType<UserMessageProps>;
399

400
  /** Error message component */
401
  ErrorMessage?: React.ComponentType<ErrorMessageProps>;
402

403
  /** Message renderer */
404
  RenderMessage: React.ComponentType<RenderMessageProps>;
405

406
  /** Image renderer */
407
  ImageRenderer: React.ComponentType<ImageRendererProps>;
408

409
  /** Regenerate callback */
410
  onRegenerate?: (messageId: string) => void;
411

412
  /** Copy callback */
413
  onCopy?: (message: string) => void;
414

415
  /** Thumbs up callback */
416
  onThumbsUp?: (message: Message) => void;
417

418
  /** Thumbs down callback */
419
  onThumbsDown?: (message: Message) => void;
420

421
  /** Custom markdown renderers */
422
  markdownTagRenderers?: ComponentsMap;
423
}
424

425
interface InputProps {
426
  /** Whether chat is in progress */
427
  inProgress: boolean;
428

429
  /** Handler for sending messages */
430
  onSend: (text: string) => Promise<Message>;
431

432
  /** Whether input is visible */
433
  isVisible?: boolean;
434

435
  /** Stop generation handler */
436
  onStop?: () => void;
437

438
  /** Upload handler (file picker trigger) */
439
  onUpload?: () => void;
440

441
  /** Hide stop button */
442
  hideStopButton?: boolean;
443
}
444

445
interface WindowProps {
446
  clickOutsideToClose: boolean;
447
  hitEscapeToClose: boolean;
448
  shortcut: string;
449
  children?: React.ReactNode;
450
}
451

452
interface ButtonProps {
453
  // Can be extended with custom props
454
}
455

456
interface HeaderProps {
457
  // Can be extended with custom props
458
}
459

460
interface SuggestionsProps {
461
  /** Suggestion title to display */
462
  title: string;
463

464
  /** Message to send when clicked */
465
  message: string;
466

467
  /** Whether suggestion is still loading */
468
  partial?: boolean;
469

470
  /** Optional CSS class */
471
  className?: string;
472

473
  /** Click handler */
474
  onClick: (message: string) => void;
475
}
476

477
type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
478
  [K in keyof T]: React.FC<{ children?: React.ReactNode } & T[K]>;
479
};
480
```
481

482
### Customization Types
483

484
Types for customizing icons, labels, and styles.
485

486
```typescript { .api }
487
interface CopilotChatIcons {
488
  /** Icon for opening the chat (popup/sidebar button) */
489
  openIcon?: React.ReactNode;
490

491
  /** Icon for closing the chat (popup/sidebar button) */
492
  closeIcon?: React.ReactNode;
493

494
  /** Icon for header close button */
495
  headerCloseIcon?: React.ReactNode;
496

497
  /** Icon for send message button */
498
  sendIcon?: React.ReactNode;
499

500
  /** Icon for activity/loading indicator */
501
  activityIcon?: React.ReactNode;
502

503
  /** Spinner icon for loading states */
504
  spinnerIcon?: React.ReactNode;
505

506
  /** Icon for stop generation button */
507
  stopIcon?: React.ReactNode;
508

509
  /** Icon for regenerate response button */
510
  regenerateIcon?: React.ReactNode;
511

512
  /** Icon for push-to-talk microphone button */
513
  pushToTalkIcon?: React.ReactNode;
514

515
  /** Icon for copy to clipboard button */
516
  copyIcon?: React.ReactNode;
517

518
  /** Icon for positive feedback button */
519
  thumbsUpIcon?: React.ReactNode;
520

521
  /** Icon for negative feedback button */
522
  thumbsDownIcon?: React.ReactNode;
523

524
  /** Icon for upload/attach file button */
525
  uploadIcon?: React.ReactNode;
526
}
527

528
interface CopilotChatLabels {
529
  /** Initial message(s) displayed when chat starts - string or array of strings */
530
  initial?: string | string[];
531

532
  /** Chat header title (default: "CopilotKit") */
533
  title?: string;
534

535
  /** Input field placeholder (default: "Type a message...") */
536
  placeholder?: string;
537

538
  /** Error message text (default: "❌ An error occurred. Please try again.") */
539
  error?: string;
540

541
  /** Stop button label (default: "Stop generating") */
542
  stopGenerating?: string;
543

544
  /** Regenerate button label (default: "Regenerate response") */
545
  regenerateResponse?: string;
546

547
  /** Copy button label (default: "Copy to clipboard") */
548
  copyToClipboard?: string;
549

550
  /** Thumbs up button label (default: "Thumbs up") */
551
  thumbsUp?: string;
552

553
  /** Thumbs down button label (default: "Thumbs down") */
554
  thumbsDown?: string;
555

556
  /** Copied confirmation text (default: "Copied!") */
557
  copied?: string;
558
}
559

560
interface CopilotKitCSSProperties extends React.CSSProperties {
561
  /** Primary brand color */
562
  "--copilot-kit-primary-color"?: string;
563

564
  /** Contrast color for primary (text on primary background) */
565
  "--copilot-kit-contrast-color"?: string;
566

567
  /** Background color for chat panel */
568
  "--copilot-kit-background-color"?: string;
569

570
  /** Background color for input field */
571
  "--copilot-kit-input-background-color"?: string;
572

573
  /** Secondary UI color */
574
  "--copilot-kit-secondary-color"?: string;
575

576
  /** Contrast color for secondary (text on secondary background) */
577
  "--copilot-kit-secondary-contrast-color"?: string;
578

579
  /** Color for separators and borders */
580
  "--copilot-kit-separator-color"?: string;
581

582
  /** Color for muted/secondary text */
583
  "--copilot-kit-muted-color"?: string;
584

585
  /** Error background color */
586
  "--copilot-kit-error-background"?: string;
587

588
  /** Error border color */
589
  "--copilot-kit-error-border"?: string;
590

591
  /** Error text color */
592
  "--copilot-kit-error-text"?: string;
593

594
  /** Small shadow for subtle elevation */
595
  "--copilot-kit-shadow-sm"?: string;
596

597
  /** Medium shadow for moderate elevation */
598
  "--copilot-kit-shadow-md"?: string;
599

600
  /** Large shadow for prominent elevation */
601
  "--copilot-kit-shadow-lg"?: string;
602

603
  /** Dev console background color */
604
  "--copilot-kit-dev-console-bg"?: string;
605

606
  /** Dev console text color */
607
  "--copilot-kit-dev-console-text"?: string;
608
}
609
```
610

611
### Observability Types
612

613
Types for event tracking and monitoring.
614

615
```typescript { .api }
616
interface CopilotObservabilityHooks {
617
  /** Called when user sends a message */
618
  onMessageSent?: (message: string) => void;
619

620
  /** Called when chat is closed/minimized */
621
  onChatMinimized?: () => void;
622

623
  /** Called when chat is opened/expanded */
624
  onChatExpanded?: () => void;
625

626
  /** Called when message is regenerated */
627
  onMessageRegenerated?: (messageId: string) => void;
628

629
  /** Called when message is copied to clipboard */
630
  onMessageCopied?: (content: string) => void;
631

632
  /** Called when user provides feedback */
633
  onFeedbackGiven?: (messageId: string, type: "thumbsUp" | "thumbsDown") => void;
634

635
  /** Called when generation starts */
636
  onChatStarted?: () => void;
637

638
  /** Called when generation stops */
639
  onChatStopped?: () => void;
640

641
  /** Called on errors */
642
  onError?: (errorEvent: CopilotErrorEvent) => void;
643
}
644

645
interface CopilotErrorEvent {
646
  /** The error object */
647
  error: Error;
648

649
  /** Optional context about where the error occurred */
650
  context?: string;
651
}
652
```
653

654
### Handler Types
655

656
Types for custom handlers and callbacks.
657

658
**Note:** `OnStopGeneration` and `OnReloadMessages` types ARE exported from the package and can be imported. However, their argument interfaces (`OnStopGenerationArguments` and `OnReloadMessagesArguments`) are internal and not exported.
659

660
```typescript { .api }
661
type OnStopGeneration = (args: OnStopGenerationArguments) => void;
662

663
interface OnStopGenerationArguments {
664
  /** Currently executing agent name */
665
  currentAgentName: string | undefined;
666

667
  /** Current message array */
668
  messages: Message[];
669

670
  /** Function to update messages */
671
  setMessages: (messages: Message[]) => void;
672

673
  /** Default stop generation function */
674
  stopGeneration: () => void;
675

676
  /** Restart the current agent */
677
  restartCurrentAgent: () => void;
678

679
  /** Stop the current agent */
680
  stopCurrentAgent: () => void;
681

682
  /** Run the current agent with optional hint */
683
  runCurrentAgent: (hint?: HintFunction) => Promise<void>;
684

685
  /** Set agent state */
686
  setCurrentAgentState: (state: any) => void;
687
}
688

689
type OnReloadMessages = (args: OnReloadMessagesArguments) => void;
690

691
interface OnReloadMessagesArguments extends OnStopGenerationArguments {
692
  /** ID of message to regenerate */
693
  messageId: string;
694
}
695

696
type HintFunction = () => string | Promise<string>;
697
```
698

699
### Context Types
700

701
Types for React context and hooks.
702

703
```typescript { .api }
704
interface ChatContext {
705
  /** All label overrides with defaults applied */
706
  labels: Required<CopilotChatLabels>;
707

708
  /** All icon overrides with defaults applied */
709
  icons: Required<CopilotChatIcons>;
710

711
  /** Whether chat is currently open (for popup/sidebar) */
712
  open: boolean;
713

714
  /** Function to set open state */
715
  setOpen: (open: boolean) => void;
716
}
717
```
718

719
### Dev Console Types
720

721
Types for development console functionality.
722

723
**Note:** `CopilotKitVersion` is an internal type used by the dev console and is not directly exported from `@copilotkit/react-ui`.
724

725
```typescript { .api }
726
interface CopilotKitVersion {
727
  /** Current installed version */
728
  current: string;
729

730
  /** Latest available version */
731
  latest: string;
732

733
  /** Update urgency level */
734
  severity: "low" | "medium" | "high";
735

736
  /** Optional advisory message */
737
  advisory: string | null;
738

739
  /** Timestamp of last version check */
740
  lastChecked: number;
741
}
742
```
743

744
### Deprecated Types
745

746
Types that are deprecated and will be removed in future versions.
747

748
```typescript { .api }
749
/**
750
 * @deprecated Use RenderMessage prop instead
751
 * Legacy render props from earlier versions
752
 */
753
interface LegacyRenderMessageProps {
754
  RenderTextMessage?: React.ComponentType<any>;
755
  RenderActionExecutionMessage?: React.ComponentType<any>;
756
  RenderAgentStateMessage?: React.ComponentType<any>;
757
  RenderResultMessage?: React.ComponentType<any>;
758
  RenderImageMessage?: React.ComponentType<any>;
759
}
760
```
761

762
### Type Utilities
763

764
Common type utilities used throughout the package.
765

766
```typescript { .api }
767
/**
768
 * Generic type for mapping element names to React components
769
 * Used for markdown renderers and other extensible component maps
770
 */
771
type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
772
  [K in keyof T]: React.FC<{ children?: React.ReactNode } & T[K]>;
773
};
774

775
/**
776
 * Make all properties in T required
777
 */
778
type Required<T> = {
779
  [P in keyof T]-?: T[P];
780
};
781

782
/**
783
 * Simple renderer interface with content property
784
 * Used for basic content rendering scenarios
785
 */
786
interface Renderer {
787
  content: string;
788
}
789

790
/**
791
 * Type for image upload data structure
792
 * Contains the image content type and base64-encoded bytes
793
 */
794
type ImageUpload = {
795
  /** MIME type of the image (e.g., "image/png", "image/jpeg") */
796
  contentType: string;
797
  /** Base64-encoded image bytes */
798
  bytes: string;
799
};
800
```
801

802
### Type Imports and Origins
803

804
Many types used in `@copilotkit/react-ui` are imported from other CopilotKit packages. This section clarifies which types are defined where.
805

806
**Types from @copilotkit/react-ui:**
807

808
All component props, customization interfaces, and UI-specific types are exported from this package.
809

810
**Types from @copilotkit/shared:**
811

812
Core domain types like `Message`, `AIMessage`, `UserMessage`, `ImageData`, and `CopilotErrorEvent` are imported from `@copilotkit/shared`.
813

814
**Types from @copilotkit/react-core:**
815

816
Some types like `SuggestionItem`, `SystemMessageFunction`, and `HintFunction` are defined in `@copilotkit/react-core`.
817

818
### Complete Type Import Example
819

820
```typescript
821
// Import UI component types from react-ui
822
import type {
823
  // Component props
824
  CopilotChatProps,
825
  CopilotModalProps,
826
  AssistantMessageProps,
827
  UserMessageProps,
828
  ErrorMessageProps,
829
  ImageRendererProps,
830
  RenderMessageProps,
831
  RenderSuggestionsListProps,
832
  MessagesProps,
833
  InputProps,
834
  WindowProps,
835
  ButtonProps,
836
  HeaderProps,
837

838
  // Customization
839
  CopilotChatIcons,
840
  CopilotChatLabels,
841
  CopilotKitCSSProperties,
842
  ComponentsMap,
843

844
  // Messages
845
  ChatError,
846

847
  // Utilities
848
  Renderer,
849
  ImageUpload,
850
  SuggestionsProps,
851

852
  // Suggestions
853
  ChatSuggestions,
854
  CopilotChatSuggestion,
855
  UseCopilotChatSuggestionsConfiguration,
856

857
  // Handlers
858
  OnStopGeneration, // Exported - can be used for type annotations
859
  OnReloadMessages, // Exported - can be used for type annotations
860
  // OnStopGenerationArguments, // Not exported - internal argument type
861
  // OnReloadMessagesArguments, // Not exported - internal argument type
862
  CopilotErrorHandler,
863

864
  // Observability
865
  CopilotObservabilityHooks,
866

867
  // Context
868
  ChatContext,
869

870
  // Dev console types are internal and not exported
871
  // CopilotKitVersion, // Not exported
872
} from "@copilotkit/react-ui";
873

874
// Import core domain types from shared package
875
import type {
876
  Message,
877
  AIMessage,
878
  UserMessage,
879
  ImageData,
880
  CopilotErrorEvent,
881
} from "@copilotkit/shared";
882

883
// Import from react-core if needed
884
import type {
885
  SuggestionItem,
886
  SystemMessageFunction,
887
  HintFunction,
888
} from "@copilotkit/react-core";
889
```
890

891
**Note:** In practice, you can import `Message`, `AIMessage`, `UserMessage` etc. from `@copilotkit/react-ui` as they are re-exported for convenience. However, they are originally defined in `@copilotkit/shared`.
892