0
# Customization
1

2
Comprehensive customization system for tailoring the appearance and behavior of CopilotKit chat interfaces. Supports multiple levels of customization from simple (labels/icons) to advanced (complete component replacement).
3

4
## Capabilities
5

6
### Icons Configuration
7

8
Customize all icons used throughout the chat interface.
9

10
```typescript { .api }
11
interface CopilotChatIcons {
12
  /** Icon for opening the chat (popup/sidebar button) */
13
  openIcon?: React.ReactNode;
14

15
  /** Icon for closing the chat (popup/sidebar button) */
16
  closeIcon?: React.ReactNode;
17

18
  /** Icon for header close button */
19
  headerCloseIcon?: React.ReactNode;
20

21
  /** Icon for send message button */
22
  sendIcon?: React.ReactNode;
23

24
  /** Icon for activity/loading indicator */
25
  activityIcon?: React.ReactNode;
26

27
  /** Spinner icon for loading states */
28
  spinnerIcon?: React.ReactNode;
29

30
  /** Icon for stop generation button */
31
  stopIcon?: React.ReactNode;
32

33
  /** Icon for regenerate response button */
34
  regenerateIcon?: React.ReactNode;
35

36
  /** Icon for push-to-talk microphone button */
37
  pushToTalkIcon?: React.ReactNode;
38

39
  /** Icon for copy to clipboard button */
40
  copyIcon?: React.ReactNode;
41

42
  /** Icon for positive feedback button */
43
  thumbsUpIcon?: React.ReactNode;
44

45
  /** Icon for negative feedback button */
46
  thumbsDownIcon?: React.ReactNode;
47

48
  /** Icon for upload/attach file button */
49
  uploadIcon?: React.ReactNode;
50
}
51
```
52

53
**Usage Example:**
54

55
```typescript
56
import { CopilotPopup } from "@copilotkit/react-ui";
57
import {
58
  SendIcon,
59
  ThumbsUpIcon,
60
  ThumbsDownIcon,
61
  CopyIcon,
62
} from "./my-icons";
63

64
function App() {
65
  return (
66
    <CopilotPopup
67
      instructions="You are helpful."
68
      icons={{
69
        sendIcon: <SendIcon className="w-5 h-5" />,
70
        copyIcon: <CopyIcon />,
71
        thumbsUpIcon: <ThumbsUpIcon />,
72
        thumbsDownIcon: <ThumbsDownIcon />,
73
        regenerateIcon: "🔄",
74
        stopIcon: "⏹️",
75
      }}
76
    />
77
  );
78
}
79
```
80

81
### Labels Configuration
82

83
Customize all text labels displayed in the chat interface.
84

85
```typescript { .api }
86
interface CopilotChatLabels {
87
  /** Initial message(s) displayed when chat starts - string or array of strings */
88
  initial?: string | string[];
89

90
  /** Chat header title (default: "CopilotKit") */
91
  title?: string;
92

93
  /** Input field placeholder (default: "Type a message...") */
94
  placeholder?: string;
95

96
  /** Error message text (default: "❌ An error occurred. Please try again.") */
97
  error?: string;
98

99
  /** Stop button label (default: "Stop generating") */
100
  stopGenerating?: string;
101

102
  /** Regenerate button label (default: "Regenerate response") */
103
  regenerateResponse?: string;
104

105
  /** Copy button label (default: "Copy to clipboard") */
106
  copyToClipboard?: string;
107

108
  /** Thumbs up button label (default: "Thumbs up") */
109
  thumbsUp?: string;
110

111
  /** Thumbs down button label (default: "Thumbs down") */
112
  thumbsDown?: string;
113

114
  /** Copied confirmation text (default: "Copied!") */
115
  copied?: string;
116
}
117
```
118

119
**Usage Example:**
120

121
```typescript
122
import { CopilotChat } from "@copilotkit/react-ui";
123

124
function App() {
125
  return (
126
    <CopilotChat
127
      instructions="You are a travel assistant."
128
      labels={{
129
        title: "Travel Buddy",
130
        initial: [
131
          "Welcome to Travel Buddy! 🌍",
132
          "I can help you plan your next adventure.",
133
          "Try asking about destinations, booking flights, or travel tips!",
134
        ],
135
        placeholder: "Ask about travel plans...",
136
        error: "Oops! Something went wrong. Please try again.",
137
        stopGenerating: "Stop",
138
        regenerateResponse: "Try again",
139
        copyToClipboard: "Copy",
140
        thumbsUp: "Helpful",
141
        thumbsDown: "Not helpful",
142
        copied: "Copied to clipboard!",
143
      }}
144
    />
145
  );
146
}
147
```
148

149
### CSS Custom Properties
150

151
Type-safe CSS custom properties for comprehensive visual theming. Apply to any parent element to theme all nested CopilotKit components.
152

153
```typescript { .api }
154
interface CopilotKitCSSProperties extends React.CSSProperties {
155
  /** Primary brand color */
156
  "--copilot-kit-primary-color"?: string;
157

158
  /** Contrast color for primary (text on primary background) */
159
  "--copilot-kit-contrast-color"?: string;
160

161
  /** Background color for chat panel */
162
  "--copilot-kit-background-color"?: string;
163

164
  /** Background color for input field */
165
  "--copilot-kit-input-background-color"?: string;
166

167
  /** Secondary UI color */
168
  "--copilot-kit-secondary-color"?: string;
169

170
  /** Contrast color for secondary (text on secondary background) */
171
  "--copilot-kit-secondary-contrast-color"?: string;
172

173
  /** Color for separators and borders */
174
  "--copilot-kit-separator-color"?: string;
175

176
  /** Color for muted/secondary text */
177
  "--copilot-kit-muted-color"?: string;
178

179
  /** Error background color */
180
  "--copilot-kit-error-background"?: string;
181

182
  /** Error border color */
183
  "--copilot-kit-error-border"?: string;
184

185
  /** Error text color */
186
  "--copilot-kit-error-text"?: string;
187

188
  /** Small shadow for subtle elevation */
189
  "--copilot-kit-shadow-sm"?: string;
190

191
  /** Medium shadow for moderate elevation */
192
  "--copilot-kit-shadow-md"?: string;
193

194
  /** Large shadow for prominent elevation */
195
  "--copilot-kit-shadow-lg"?: string;
196

197
  /** Dev console background color */
198
  "--copilot-kit-dev-console-bg"?: string;
199

200
  /** Dev console text color */
201
  "--copilot-kit-dev-console-text"?: string;
202
}
203
```
204

205
**Usage Example:**
206

207
```typescript
208
import { CopilotPopup, CopilotKitCSSProperties } from "@copilotkit/react-ui";
209

210
function App() {
211
  const customStyles: CopilotKitCSSProperties = {
212
    "--copilot-kit-primary-color": "#6366f1",
213
    "--copilot-kit-contrast-color": "#ffffff",
214
    "--copilot-kit-background-color": "#f9fafb",
215
    "--copilot-kit-input-background-color": "#ffffff",
216
    "--copilot-kit-secondary-color": "#e5e7eb",
217
    "--copilot-kit-secondary-contrast-color": "#1f2937",
218
    "--copilot-kit-separator-color": "#d1d5db",
219
    "--copilot-kit-muted-color": "#6b7280",
220
    "--copilot-kit-shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
221
  };
222

223
  return (
224
    <div style={customStyles}>
225
      <CopilotPopup instructions="You are helpful." />
226
    </div>
227
  );
228
}
229
```
230

231
You can also apply CSS variables in a stylesheet:
232

233
```css
234
.my-app {
235
  --copilot-kit-primary-color: #6366f1;
236
  --copilot-kit-contrast-color: #ffffff;
237
  --copilot-kit-background-color: #f9fafb;
238
  --copilot-kit-input-background-color: #ffffff;
239
  --copilot-kit-secondary-color: #e5e7eb;
240
  --copilot-kit-separator-color: #d1d5db;
241
  --copilot-kit-muted-color: #6b7280;
242
  --copilot-kit-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
243
  --copilot-kit-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
244
  --copilot-kit-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
245
}
246

247
/* Dark mode theme */
248
.dark-mode {
249
  --copilot-kit-primary-color: #818cf8;
250
  --copilot-kit-contrast-color: #1e1b4b;
251
  --copilot-kit-background-color: #1f2937;
252
  --copilot-kit-input-background-color: #374151;
253
  --copilot-kit-secondary-color: #4b5563;
254
  --copilot-kit-secondary-contrast-color: #f9fafb;
255
  --copilot-kit-separator-color: #6b7280;
256
  --copilot-kit-muted-color: #9ca3af;
257
}
258
```
259

260
### Custom Markdown Renderers
261

262
Customize how markdown elements are rendered in assistant messages.
263

264
```typescript { .api }
265
type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
266
  [K in keyof T]: React.FC<{ children?: React.ReactNode } & T[K]>;
267
};
268
```
269

270
**Usage Example:**
271

272
```typescript
273
import { CopilotChat } from "@copilotkit/react-ui";
274
import { Components } from "react-markdown";
275

276
function App() {
277
  const customRenderers: Partial<Components> = {
278
    // Custom heading renderer
279
    h1: ({ children }) => (
280
      <h1 className="text-3xl font-bold text-purple-600 mb-4">
281
        {children}
282
      </h1>
283
    ),
284

285
    // Custom link renderer with external icon
286
    a: ({ href, children }) => (
287
      <a
288
        href={href}
289
        className="text-blue-600 hover:underline"
290
        target="_blank"
291
        rel="noopener noreferrer"
292
      >
293
        {children} 🔗
294
      </a>
295
    ),
296

297
    // Custom code block with syntax highlighting wrapper
298
    code: ({ inline, className, children }) => {
299
      if (inline) {
300
        return (
301
          <code className="bg-gray-100 px-1 py-0.5 rounded text-sm">
302
            {children}
303
          </code>
304
        );
305
      }
306
      return (
307
        <pre className="bg-gray-900 text-white p-4 rounded-lg overflow-x-auto">
308
          <code className={className}>{children}</code>
309
        </pre>
310
      );
311
    },
312

313
    // Custom list renderer
314
    ul: ({ children }) => (
315
      <ul className="list-disc list-inside space-y-2 ml-4">
316
        {children}
317
      </ul>
318
    ),
319

320
    // Custom blockquote
321
    blockquote: ({ children }) => (
322
      <blockquote className="border-l-4 border-blue-500 pl-4 italic text-gray-700">
323
        {children}
324
      </blockquote>
325
    ),
326
  };
327

328
  return (
329
    <CopilotChat
330
      instructions="You are helpful."
331
      markdownTagRenderers={customRenderers}
332
    />
333
  );
334
}
335
```
336

337
### Component Replacement
338

339
Replace default components with custom implementations for complete control over rendering.
340

341
**Available Component Props:**
342

343
```typescript { .api }
344
interface CopilotChatProps {
345
  /** Custom assistant message component */
346
  AssistantMessage?: React.ComponentType<AssistantMessageProps>;
347

348
  /** Custom user message component */
349
  UserMessage?: React.ComponentType<UserMessageProps>;
350

351
  /** Custom error message component */
352
  ErrorMessage?: React.ComponentType<ErrorMessageProps>;
353

354
  /** Custom messages container component */
355
  Messages?: React.ComponentType<MessagesProps>;
356

357
  /** Custom message renderer */
358
  RenderMessage?: React.ComponentType<RenderMessageProps>;
359

360
  /** Custom suggestions list renderer */
361
  RenderSuggestionsList?: React.ComponentType<RenderSuggestionsListProps>;
362

363
  /** Custom input component */
364
  Input?: React.ComponentType<InputProps>;
365

366
  /** Custom image renderer */
367
  ImageRenderer?: React.ComponentType<ImageRendererProps>;
368
}
369

370
interface CopilotModalProps extends CopilotChatProps {
371
  /** Custom window/modal component */
372
  Window?: React.ComponentType<WindowProps>;
373

374
  /** Custom toggle button component */
375
  Button?: React.ComponentType<ButtonProps>;
376

377
  /** Custom header component */
378
  Header?: React.ComponentType<HeaderProps>;
379
}
380
```
381

382
**Usage Example - Custom Assistant Message:**
383

384
```typescript
385
import { CopilotChat, AssistantMessageProps, Markdown } from "@copilotkit/react-ui";
386

387
function CustomAssistantMessage({
388
  message,
389
  isLoading,
390
  isGenerating,
391
  onRegenerate,
392
  onCopy,
393
}: AssistantMessageProps) {
394
  return (
395
    <div className="assistant-message">
396
      <div className="avatar">
397
        <img src="/bot-avatar.png" alt="AI" />
398
      </div>
399
      <div className="content">
400
        {isLoading && <div className="thinking">Thinking...</div>}
401
        {message && <Markdown content={message.content} />}
402
        {isGenerating && <span className="cursor">▊</span>}
403
      </div>
404
      <div className="actions">
405
        {onRegenerate && (
406
          <button onClick={onRegenerate}>Regenerate</button>
407
        )}
408
        {onCopy && message && (
409
          <button onClick={() => onCopy(message.content)}>Copy</button>
410
        )}
411
      </div>
412
    </div>
413
  );
414
}
415

416
function App() {
417
  return (
418
    <CopilotChat
419
      instructions="You are helpful."
420
      AssistantMessage={CustomAssistantMessage}
421
    />
422
  );
423
}
424
```
425

426
**Usage Example - Custom Input Component:**
427

428
```typescript
429
import { CopilotChat, InputProps } from "@copilotkit/react-ui";
430
import { useState } from "react";
431

432
function CustomInput({ inProgress, onSend, onStop }: InputProps) {
433
  const [text, setText] = useState("");
434

435
  const handleSubmit = async (e: React.FormEvent) => {
436
    e.preventDefault();
437
    if (!text.trim() || inProgress) return;
438
    await onSend(text);
439
    setText("");
440
  };
441

442
  return (
443
    <form onSubmit={handleSubmit} className="custom-input">
444
      <input
445
        type="text"
446
        value={text}
447
        onChange={(e) => setText(e.target.value)}
448
        placeholder="Type your message..."
449
        disabled={inProgress}
450
        className="input-field"
451
      />
452
      {inProgress ? (
453
        <button type="button" onClick={onStop} className="stop-btn">
454
          Stop
455
        </button>
456
      ) : (
457
        <button type="submit" disabled={!text.trim()} className="send-btn">
458
          Send
459
        </button>
460
      )}
461
    </form>
462
  );
463
}
464

465
function App() {
466
  return (
467
    <CopilotChat
468
      instructions="You are helpful."
469
      Input={CustomInput}
470
    />
471
  );
472
}
473
```
474

475
### System Message Customization
476

477
Customize or disable the system message sent to the AI.
478

479
```typescript { .api }
480
type SystemMessageFunction = (args: {
481
  instructions?: string;
482
  // Additional context
483
}) => string;
484
```
485

486
**Usage Example:**
487

488
```typescript
489
import { CopilotChat } from "@copilotkit/react-ui";
490

491
function App() {
492
  const customSystemMessage = ({ instructions }) => {
493
    return `
494
You are an expert assistant with the following guidelines:
495
${instructions || "Be helpful and concise."}
496

497
Important rules:
498
- Always format code with proper syntax highlighting
499
- Provide step-by-step explanations for complex topics
500
- Ask clarifying questions when needed
501
- Current date: ${new Date().toLocaleDateString()}
502
`;
503
  };
504

505
  return (
506
    <CopilotChat
507
      instructions="You are a coding tutor."
508
      makeSystemMessage={customSystemMessage}
509
    />
510
  );
511
}
512

513
// Or disable system message entirely
514
function AppNoSystem() {
515
  return (
516
    <CopilotChat
517
      disableSystemMessage={true}
518
    />
519
  );
520
}
521
```
522

523
### Image Upload Configuration
524

525
Configure image upload functionality.
526

527
```typescript { .api }
528
interface CopilotChatProps {
529
  /** Enable image upload functionality */
530
  imageUploadsEnabled?: boolean;
531

532
  /** File input accept attribute (default: "image/*") */
533
  inputFileAccept?: string;
534
}
535
```
536

537
**Usage Example:**
538

539
```typescript
540
import { CopilotChat } from "@copilotkit/react-ui";
541

542
function App() {
543
  return (
544
    <CopilotChat
545
      instructions="You are a helpful assistant."
546
      imageUploadsEnabled={true}
547
      inputFileAccept="image/png,image/jpeg,image/gif"
548
    />
549
  );
550
}
551
```
552

553
### Error Handling Customization
554

555
Customize error rendering and handling.
556

557
```typescript { .api }
558
interface CopilotChatProps {
559
  /** Custom error renderer for inline chat errors */
560
  renderError?: (error: {
561
    /** Error message text */
562
    message: string;
563
    /** Operation that caused the error */
564
    operation?: string;
565
    /** Error timestamp */
566
    timestamp: number;
567
    /** Callback to dismiss the error */
568
    onDismiss: () => void;
569
    /** Optional callback to retry the failed operation */
570
    onRetry?: () => void;
571
  }) => React.ReactNode;
572

573
  /** Error handler for debugging and observability */
574
  onError?: CopilotErrorHandler;
575
}
576

577
type CopilotErrorHandler = (error: Error) => void;
578
```
579

580
**Usage Example:**
581

582
```typescript
583
import { CopilotChat } from "@copilotkit/react-ui";
584

585
function App() {
586
  return (
587
    <CopilotChat
588
      instructions="You are helpful."
589
      renderError={({ message, operation, onDismiss, onRetry }) => (
590
        <div className="custom-error-banner">
591
          <div className="error-content">
592
            <h3>⚠️ Error</h3>
593
            <p>{message}</p>
594
            {operation && <small>During: {operation}</small>}
595
          </div>
596
          <div className="error-actions">
597
            {onRetry && (
598
              <button onClick={onRetry} className="retry-btn">
599
                Retry
600
              </button>
601
            )}
602
            <button onClick={onDismiss} className="dismiss-btn">
603
              Dismiss
604
            </button>
605
          </div>
606
        </div>
607
      )}
608
      onError={(error) => {
609
        console.error("Chat error:", error);
610
        // Send to monitoring service
611
      }}
612
    />
613
  );
614
}
615
```
616

617
**Alternative Example - Simple Banner:**
618

619
```typescript
620
function App() {
621
  return (
622
    <CopilotChat
623
      renderError={({ message, onDismiss }) => (
624
        <div className="simple-error">
625
          <span>{message}</span>
626
          <button onClick={onDismiss}>×</button>
627
        </div>
628
      )}
629
    />
630
  );
631
}
632
```
633

634
### Component Replacement
635

636
Replace default UI components with custom implementations. Empty interfaces for Button, Header, and Window are intentionally extensible to allow custom props.
637

638
```typescript { .api }
639
interface CopilotModalProps {
640
  /** Custom window/modal wrapper */
641
  Window?: React.ComponentType<WindowProps>;
642

643
  /** Custom toggle button */
644
  Button?: React.ComponentType<ButtonProps>;
645

646
  /** Custom header */
647
  Header?: React.ComponentType<HeaderProps>;
648
}
649

650
interface WindowProps {
651
  clickOutsideToClose: boolean;
652
  hitEscapeToClose: boolean;
653
  shortcut: string;
654
  children?: React.ReactNode;
655
}
656

657
/** Extensible interface for custom button implementations */
658
interface ButtonProps {
659
  // Empty - extend with your own props
660
}
661

662
/** Extensible interface for custom header implementations */
663
interface HeaderProps {
664
  // Empty - extend with your own props
665
}
666
```
667

668
**Usage Example:**
669

670
```typescript
671
import { CopilotPopup, useChatContext } from "@copilotkit/react-ui";
672

673
function CustomButton() {
674
  const { open, setOpen, icons } = useChatContext();
675
  return (
676
    <button
677
      onClick={() => setOpen(!open)}
678
      className="my-custom-button"
679
    >
680
      {open ? icons.closeIcon : icons.openIcon}
681
    </button>
682
  );
683
}
684

685
function App() {
686
  return (
687
    <CopilotPopup
688
      Button={CustomButton}
689
      instructions="You are helpful."
690
    />
691
  );
692
}
693
```
694

695
### Markdown Component Renderers
696

697
Customize how specific markdown elements are rendered within AI messages.
698

699
```typescript { .api }
700
type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
701
  [K in keyof T]: React.FC<{ children?: React.ReactNode } & T[K]>;
702
};
703

704
interface CopilotChatProps {
705
  /** Custom renderers for markdown elements */
706
  markdownTagRenderers?: ComponentsMap;
707
}
708
```
709

710
**Usage Example:**
711

712
```typescript
713
import { CopilotChat } from "@copilotkit/react-ui";
714

715
function App() {
716
  return (
717
    <CopilotChat
718
      markdownTagRenderers={{
719
        a: ({ href, children }) => (
720
          <a
721
            href={href}
722
            target="_blank"
723
            rel="noopener noreferrer"
724
            className="custom-link"
725
          >
726
            {children} 🔗
727
          </a>
728
        ),
729
        code: ({ className, children }) => {
730
          const isInline = !className;
731
          return isInline ? (
732
            <code className="inline-code">{children}</code>
733
          ) : (
734
            <code className={className}>{children}</code>
735
          );
736
        },
737
        reference: ({ id, children }) => (
738
          <span className="reference-tag" data-ref-id={id}>
739
            {children}
740
          </span>
741
        ),
742
      }}
743
    />
744
  );
745
}
746
```
747

748
**Example - Custom Reference Tags:**
749

750
```typescript
751
function App() {
752
  return (
753
    <CopilotChat
754
      instructions="Use <reference id='doc-123'>document name</reference> tags to cite sources."
755
      markdownTagRenderers={{
756
        reference: ({ id, children }: { id: string; children: React.ReactNode }) => (
757
          <button
758
            onClick={() => openDocument(id)}
759
            className="doc-reference"
760
          >
761
            📄 {children}
762
          </button>
763
        ),
764
      }}
765
    />
766
  );
767
}
768
```
769

770
### Full Component Customization
771

772
Replace entire component implementations for complete control.
773

774
```typescript { .api }
775
interface CopilotChatProps {
776
  /** Custom assistant message component */
777
  AssistantMessage?: React.ComponentType<AssistantMessageProps>;
778

779
  /** Custom user message component */
780
  UserMessage?: React.ComponentType<UserMessageProps>;
781

782
  /** Custom error message component */
783
  ErrorMessage?: React.ComponentType<ErrorMessageProps>;
784

785
  /** Custom messages container */
786
  Messages?: React.ComponentType<MessagesProps>;
787

788
  /** Custom input component */
789
  Input?: React.ComponentType<InputProps>;
790

791
  /** Custom message renderer (break-glass for full control) */
792
  RenderMessage?: React.ComponentType<RenderMessageProps>;
793

794
  /** Custom suggestions list */
795
  RenderSuggestionsList?: React.ComponentType<RenderSuggestionsListProps>;
796

797
  /** Custom image renderer */
798
  ImageRenderer?: React.ComponentType<ImageRendererProps>;
799
}
800
```
801

802
**Usage Example - Custom Input:**
803

804
```typescript
805
import { CopilotChat } from "@copilotkit/react-ui";
806
import type { InputProps } from "@copilotkit/react-ui";
807
import { useState } from "react";
808

809
function CustomInput({ inProgress, onSend, onStop }: InputProps) {
810
  const [text, setText] = useState("");
811
  const [attachments, setAttachments] = useState<File[]>([]);
812

813
  const handleSubmit = async () => {
814
    if (!text.trim()) return;
815
    await onSend(text);
816
    setText("");
817
    setAttachments([]);
818
  };
819

820
  return (
821
    <div className="custom-input">
822
      <div className="attachments">
823
        {attachments.map((file, i) => (
824
          <span key={i}>{file.name}</span>
825
        ))}
826
      </div>
827
      <textarea
828
        value={text}
829
        onChange={(e) => setText(e.target.value)}
830
        placeholder="Type your message..."
831
        disabled={inProgress}
832
      />
833
      <div className="actions">
834
        <input
835
          type="file"
836
          onChange={(e) => setAttachments([...attachments, ...e.target.files])}
837
        />
838
        {inProgress ? (
839
          <button onClick={onStop}>Stop</button>
840
        ) : (
841
          <button onClick={handleSubmit}>Send</button>
842
        )}
843
      </div>
844
    </div>
845
  );
846
}
847

848
function App() {
849
  return <CopilotChat Input={CustomInput} />;
850
}
851
```
852

853
### Complete Theming Example
854

855
Combining multiple customization approaches for a fully themed interface:
856

857
```typescript
858
import {
859
  CopilotPopup,
860
  CopilotKitCSSProperties,
861
  AssistantMessageProps,
862
  Markdown,
863
} from "@copilotkit/react-ui";
864

865
// Custom styled assistant message
866
function BrandedAssistantMessage({
867
  message,
868
  isLoading,
869
  onCopy,
870
}: AssistantMessageProps) {
871
  return (
872
    <div className="branded-message">
873
      <div className="avatar">
874
        <img src="/brand-logo.png" alt="Assistant" />
875
      </div>
876
      <div className="content">
877
        {isLoading ? (
878
          <div className="pulse">Thinking...</div>
879
        ) : (
880
          message && <Markdown content={message.content} />
881
        )}
882
      </div>
883
      {message && onCopy && (
884
        <button onClick={() => onCopy(message.content)}>📋</button>
885
      )}
886
    </div>
887
  );
888
}
889

890
function App() {
891
  const brandTheme: CopilotKitCSSProperties = {
892
    "--copilot-kit-primary-color": "#FF6B6B",
893
    "--copilot-kit-contrast-color": "#FFFFFF",
894
    "--copilot-kit-background-color": "#FFF5F5",
895
    "--copilot-kit-secondary-color": "#FFE5E5",
896
    "--copilot-kit-separator-color": "#FFD0D0",
897
  };
898

899
  return (
900
    <div style={brandTheme}>
901
      <CopilotPopup
902
        instructions="You are our branded assistant."
903
        labels={{
904
          title: "BrandBot",
905
          initial: "Welcome! I'm here to help.",
906
          placeholder: "Ask me anything...",
907
        }}
908
        icons={{
909
          sendIcon: "➤",
910
          regenerateIcon: "🔄",
911
          copyIcon: "📋",
912
          thumbsUpIcon: "👍",
913
          thumbsDownIcon: "👎",
914
        }}
915
        AssistantMessage={BrandedAssistantMessage}
916
      />
917
    </div>
918
  );
919
}
920
```
921