### React Installation

Source: https://openai.github.io/chatkit-js/quickstart

Install the ChatKit React library using npm.

```bash
npm install @openai/chatkit-react
```

--------------------------------

### Vanilla JS Installation

Source: https://openai.github.io/chatkit-js/quickstart

Install the ChatKit vanilla JavaScript library using npm.

```bash
npm install @openai/chatkit
```

--------------------------------

### Vanilla JS Usage

Source: https://openai.github.io/chatkit-js/quickstart

Example of how to use the ChatKit component with vanilla JavaScript.

```javascript
<div id="chat-root"></div>
<script type="module">
  import '@openai/chatkit';


  const chatkit = document.createElement('openai-chatkit');


  chatkit.setOptions({
    api: {
      url: 'http://localhost:8000/chatkit',
      domainKey: 'local-dev',
    },
  });


  document.getElementById('chat-root')?.append(chatkit);
</script>
```

--------------------------------

### React Usage

Source: https://openai.github.io/chatkit-js/quickstart

Example of how to use the ChatKit component in a React application.

```javascript
import { ChatKit, useChatKit } from '@openai/chatkit-react';


export function SupportChat() {
  const { control } = useChatKit({
    api: {
      url: 'http://localhost:8000/chatkit',
      domainKey: 'local-dev',
    },
  });


  return <ChatKit control={control} className="h-[600px] w-[360px]" />;
}
```

--------------------------------

### Typography Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/themeoption

Example for the optional typography property.

```typescript
optional typography: TypographyOption;
```

--------------------------------

### ColorScheme Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/themeoption

Example for the optional colorScheme property.

```typescript
optional colorScheme: ColorScheme;
```

--------------------------------

### startScreen Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for the start screen.

```typescript
optional startScreen: StartScreenOption;
```

--------------------------------

### Vanilla JS ChatKit Initialization

Source: https://openai.github.io/chatkit-js

Example of initializing ChatKit using plain JavaScript.

```javascript
function InitChatkit({ clientToken }) {
  const chatkit = document.createElement('openai-chatkit');
  chatkit.setOptions({ api: { url, domainKey } });
  chatkit.classList.add('h-[600px]', 'w-[320px]');
  document.body.appendChild(chatkit);
}

```

--------------------------------

### Color Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/themeoption

Example for the optional color property.

```typescript
optional color: ColorOption;
```

--------------------------------

### Density Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/themeoption

Example for the optional density property.

```typescript
optional density: "compact" | "normal" | "spacious";
```

--------------------------------

### Imperative Setup

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/interfaces/openaichatkit

Demonstrates how to create and configure the OpenAIChatKit component programmatically.

```typescript
const chatkit = document.createElement('openai-chatkit');
chatkit.setOptions({
  /* ... */
});
document.body.append(chatkit);
```

--------------------------------

### sendCustomAction Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/interfaces/openaichatkit

Example of how to use sendCustomAction within a widget's onAction handler.

```typescript
chatKit.options = {
  // other options...
  widgets: {
    async onAction(action, widgetItem) {
      await someClientSideHandling(action);
      await chatKit.sendAction(action, widgetItem.id);
    },
  },
};
```

--------------------------------

### Icon Start Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional property for an icon displayed at the start of the button.

```typescript
optional iconStart: WidgetIcon;
```

--------------------------------

### ChatKit Script

Source: https://openai.github.io/chatkit-js/quickstart

Add this script to your root HTML file to load the ChatKit library.

```html
<script
  src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
  async
></script>
```

--------------------------------

### Declarative Markup Setup

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/interfaces/openaichatkit

Shows how to set up the OpenAIChatKit component using HTML markup and a script.

```html
<openai-chatkit id="chatkit-container"></openai-chatkit>
<script type="module">
  const chatkit = document.getElementById('chatkit-container');
  chatkit.setOptions({
    /* ... */
  });
</script>
```

--------------------------------

### Radius Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/themeoption

Example for the optional radius property.

```typescript
optional radius: "pill" | "round" | "soft" | "sharp";
```

--------------------------------

### Greeting Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/startscreenoption

Example of the optional greeting property within StartScreenOption.

```typescript
optional greeting: string;
```

--------------------------------

### Prompts Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/startscreenoption

Example of the optional prompts property within StartScreenOption.

```typescript
optional prompts: StartScreenPrompt[];
```

--------------------------------

### addEventListener Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/interfaces/openaichatkit

An example of how to add an event listener for a 'chatkit.error' event.

```typescript
chatKit.addEventListener('chatkit.error', (event) => {
  logToMyErrorLogger(event.detail.error);
});
```

--------------------------------

### Icon Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/startscreenprompt

Example of the optional 'icon' property within StartScreenPrompt, specifying a ChatKitIcon.

```typescript
optional icon: ChatKitIcon;
```

--------------------------------

### React ChatKit Component

Source: https://openai.github.io/chatkit-js

Example of using the ChatKit component within a React application.

```javascript
function MyChat({ clientToken }) {
  const { control } = useChatKit({
    api: { url, domainKey }
  });


  return (
    <ChatKit
      control={control}
      className="h-[600px] w-[320px]"
    />
  );
}

```

--------------------------------

### Prompt Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/startscreenprompt

Example of the 'prompt' property within StartScreenPrompt, which can be a string or an array of UserMessageContent.

```typescript
prompt:
  | string
  | UserMessageContent[];
```

--------------------------------

### React Customization

Source: https://openai.github.io/chatkit-js/customize

Example of customizing ChatKit using the `useChatKit` hook in React.

```javascript
import { useChatKit } from '@openai/chatkit-react';


const { control } = useChatKit({
  theme: {
    colorScheme: 'dark',
    radius: 'round',
    color: {
      accent: { primary: '#8B5CF6', level: 2 },
    },
  },
  header: {
    enabled: true,
    rightAction: {
      icon: 'light-mode',
      onClick: () => console.log('Toggle theme'),
    },
  },
  history: {
    enabled: true,
    showDelete: true,
    showRename: true,
  },
  startScreen: {
    greeting: 'How can we help?',
    prompts: [
      {
        label: 'Troubleshoot an issue',
        prompt: 'Help me fix an issue',
        icon: 'lifesaver',
      },
      {
        label: 'Request a feature',
        prompt: 'I have an idea',
        icon: 'lightbulb',
      },
    ],
  },
  composer: {
    placeholder: 'Ask the assistant…',
  },
  threadItemActions: {
    feedback: true,
    retry: true,
  },
});

```

--------------------------------

### Web Component Customization

Source: https://openai.github.io/chatkit-js/customize

Example of customizing ChatKit using the `chatkit.setOptions` method on the web component.

```javascript
chatkit.setOptions({
  theme: {
    colorScheme: 'dark',
    radius: 'round',
    color: {
      accent: { primary: '#8B5CF6', level: 2 },
    },
  },
  header: {
    enabled: true,
    rightAction: {
      icon: 'light-mode',
      onClick: () => console.log('Toggle theme'),
    },
  },
  history: {
    enabled: true,
    showDelete: true,
    showRename: true,
  },
  startScreen: {
    greeting: 'How can we help?',
    prompts: [
      {
        label: 'Troubleshoot an issue',
        prompt: 'Help me fix an issue',
        icon: 'lifesaver',
      },
      {
        label: 'Request a feature',
        prompt: 'I have an idea',
        icon: 'lightbulb',
      },
    ],
  },
  composer: {
    placeholder: 'Ask the assistant…',
  },
  threadItemActions: {
    feedback: true,
    retry: true,
  },
});

```

--------------------------------

### Style Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/fontobject

Example of the optional 'style' property for FontObject, defining the font style.

```typescript
optional style: "normal" | "italic" | "oblique";
```

--------------------------------

### Display Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/fontobject

Example of the optional 'display' property for FontObject, specifying font rendering behavior.

```typescript
optional display: "auto" | "block" | "swap" | "fallback" | "optional";
```

--------------------------------

### Description Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/modeloption

Example showing the 'description' property for a ModelOption.

```typescript
optional description: string;
```

--------------------------------

### Weight Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/fontobject

Example of the optional 'weight' property for FontObject, defining the font weight.

```typescript
optional weight: string | number;
```

--------------------------------

### StartScreenPrompt Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/startscreenprompt

Defines the structure of a StartScreenPrompt object, which is used to configure prompts displayed on the start screen.

```typescript
type StartScreenPrompt = {
  icon?: ChatKitIcon;
  label: string;
  prompt: string | UserMessageContent[];
};
```

--------------------------------

### chatkit.thread.load.start Event

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitevents

Emitted when ChatKit starts loading a thread (initial load or selected from history).

```typescript
chatkit.thread.load.start: CustomEvent<{
  threadId: string;
}>;

```

--------------------------------

### Description Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/modeloption

Example showing the optional 'description' string property for a ModelOption.

```typescript
optional description: string;

```

--------------------------------

### Family Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/fontobject

Example of the 'family' property for FontObject, defining the CSS font-family name.

```typescript
family: string;
```

--------------------------------

### UnicodeRange Property Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/fontobject

Example of the optional 'unicodeRange' property for FontObject, used for specifying unicode range descriptors.

```typescript
optional unicodeRange: string;
```

--------------------------------

### Default Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/modeloption

Example showing the 'default' property for a ModelOption.

```typescript
optional default: boolean;
```

--------------------------------

### Label Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/modeloption

Example showing the required 'label' string property for a ModelOption.

```typescript
label: string;

```

--------------------------------

### Optional Icon Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/entity

Example of the optional 'icon' property within an Entity.

```typescript
optional icon: string;
```

--------------------------------

### removeEventListener Example

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/interfaces/openaichatkit

An example of how to remove an event listener for a 'chatkit.error' event.

```typescript
chatKit.removeEventListener('chatkit.error', myErrorListener);
```

--------------------------------

### ID Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/modeloption

Example showing the required 'id' string property for a ModelOption.

```typescript
id: string;

```

--------------------------------

### composer Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for the composer.

```typescript
optional composer: ComposerOption;
```

--------------------------------

### Icon Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/startscreenprompt

Optional icon displayed with the prompt.

```typescript
icon?: ChatKitIcon;
```

--------------------------------

### tools

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/composeroption

When provided a list of tool options, the user will be able to select a tool from a menu in the composer.

```typescript
optional tools: ToolOption[];
```

--------------------------------

### composer Property Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/chatkitoptions

Configuration for the composer.

```typescript
optional composer: ComposerOption;

```

--------------------------------

### initialThread Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

The ID of the thread to show when ChatKit is mounted or opened for the first time. Passing `null` will show the new thread view.

```typescript
optional initialThread: null | string;
```

--------------------------------

### header Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for the header.

```typescript
optional header: HeaderOption;
```

--------------------------------

### onClientTool Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

A map of handlers for the client tools configured on your server. The keys are the names of the client tools, and the values are functions that will be called when the client tool is invoked. The object (or promise) returned from the function will be sent back to the server as the result of the client tool invocation.

```typescript
optional onClientTool: (toolCall: {
  name: string;
  params: Record<string, unknown>;
}) =>
  | Promise<Record<string, unknown>>
| Record<string, unknown>;
```

--------------------------------

### widgets Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for widgets.

```typescript
optional widgets: WidgetsOption;
```

--------------------------------

### models

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/composeroption

A list of models that users can choose from before sending a message.

```typescript
optional models: ModelOption[];
```

--------------------------------

### Title Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/headeroption

Configuration for header title display.

```typescript
optional title: {
  enabled?: boolean;
  text?: string;
};
```

--------------------------------

### Default Greeting Value

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/startscreenoption

The default value for the greeting property.

```typescript
'What can I help with today?';
```

--------------------------------

### theme Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Visual appearance configuration options for ChatKit.

```typescript
optional theme:
  | ColorScheme
  | ThemeOption;
```

--------------------------------

### Required Title Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/entity

Example of the required 'title' property within an Entity.

```typescript
title: string;
```

--------------------------------

### Optional Interactive Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/entity

Example of the optional 'interactive' property within an Entity.

```typescript
optional interactive: boolean;
```

--------------------------------

### entities Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for entities tags.

```typescript
optional entities: EntitiesOption;
```

--------------------------------

### Required ID Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/entity

Example of the required 'id' property within an Entity.

```typescript
id: string;
```

--------------------------------

### Models Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/composeroption

Defines the configuration for a list of models users can select from.

```typescript
optional models: ModelOption[];

```

--------------------------------

### history Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for the history panel.

```typescript
optional history: HistoryOption;
```

--------------------------------

### Optional Group Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/entity

Example of the optional 'group' property within an Entity.

```typescript
optional group: string;
```

--------------------------------

### Optional Data Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/entity

Example of the optional 'data' property within an Entity.

```typescript
optional data: Record<string, string>;
```

--------------------------------

### Tools Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/composeroption

Configures a list of tool options available for users to select in the composer.

```typescript
optional tools: ToolOption[];

```

--------------------------------

### thread Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for the chat thread.

```typescript
optional thread: ThreadOption;
```

--------------------------------

### Default Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/modeloption

Example showing the optional 'default' boolean property for a ModelOption.

```typescript
optional default: boolean;

```

--------------------------------

### threadItemActions Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for the thread item actions.

```typescript
optional threadItemActions: ThreadItemActionsOption;
```

--------------------------------

### HostedApiConfig Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/hostedapiconfig

Defines the structure of the HostedApiConfig object, which includes a method to get a client secret.

```typescript
type HostedApiConfig = {
  getClientSecret: (currentClientSecret: string | null) => Promise<string>;
};
```

--------------------------------

### Size Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional property to set the button's size.

```typescript
optional size: ControlSize;
```

--------------------------------

### StartScreenOption Type Alias

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/startscreenoption

Defines the structure for StartScreenOption, which can include an optional greeting and an array of optional StartScreenPrompt objects.

```typescript
type StartScreenOption = {
  greeting?: string;
  prompts?: StartScreenPrompt[];
};
```

--------------------------------

### On Click Action Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional property defining the action to perform when the button is clicked.

```typescript
optional onClickAction: ActionConfig;
```

--------------------------------

### gutterSize Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/textarea

Optional property to set the size of the gutter, with predefined string literal values.

```typescript
optional gutterSize: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
```

--------------------------------

### api Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for how ChatKit communicates with your backend.

```typescript
api:
  | CustomApiConfig
  | HostedApiConfig;
```

--------------------------------

### Attachments Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/composeroption

Details the configuration options for file attachments within the composer.

```typescript
optional attachments: {
  accept?: Record<string, string[]>;
  enabled: boolean;
  maxCount?: number;
  maxSize?: number | Record<string, number>;
};

```

--------------------------------

### attachments

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/composeroption

Configuration for file attachments in the composer.

```typescript
optional attachments: {
  accept?: Record<string, string[]>;
  enabled: boolean;
  maxCount?: number;
  maxSize?: number | Record<string, number>;
};
```

--------------------------------

### allowAutofillExtensions Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/textarea

Optional boolean property to allow autofill extensions.

```typescript
optional allowAutofillExtensions: boolean;
```

--------------------------------

### placeholder Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/datepicker

Optional placeholder string for the DatePicker.

```typescript
optional placeholder: string;
```

--------------------------------

### Placeholder Override Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/tooloption

Optional placeholder text for the composer input when the tool is selected.

```typescript
optional placeholderOverride: string;
```

--------------------------------

### disclaimer Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Configuration for disclaimer text.

```typescript
optional disclaimer: DisclaimerOption;
```

--------------------------------

### chatkit.response.start Event

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitevents

Emitted when the assistant begins sending a response.

```typescript
chatkit.response.start: CustomEvent<void>;

```

--------------------------------

### UseChatKitReturn type definition

Source: https://openai.github.io/chatkit-js/quick-reference/use-chatkit

UseChatKitReturn provides methods from the <openai-chatkit> web component, a control bundle, and a ref.

```typescript
type UseChatKitReturn = {
  focusComposer: () => Promise<void>;
  setThreadId: (threadId: string | null) => Promise<void>;
  sendUserMessage: (params: {
    text?: string;
    content?: UserMessageContent[];
    reply?: string;
    attachments?: Attachment[];
    newThread?: boolean;
    toolChoice?: ToolChoice;
    model?: string;
  }) => Promise<void>;
  setComposerValue: (params: {
    text?: string;
    content?: UserMessageContent[];
    reply?: string;
    attachments?: Attachment[];
    files?: File[];
    selectedToolId?: string;
    selectedModelId?: string;
  }) => Promise<void>;
  fetchUpdates: () => Promise<void>;
  sendCustomAction: (
    action: { type: string; payload?: Record<string, unknown> },
    itemId?: string,
  ) => Promise<void>;
  showHistory: () => Promise<void>;
  hideHistory: () => Promise<void>;
  control: ChatKitControl;
  ref: React.RefObject<OpenAIChatKit | null>;
};
```

--------------------------------

### Icon Size Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional property to set the size of the button's icons.

```typescript
optional iconSize: "sm" | "md" | "lg" | "xl" | "2xl";
```

--------------------------------

### Right Action Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/headeroption

Configuration for a custom button on the right side of the header.

```typescript
optional rightAction: {
  icon: HeaderIcon;
  onClick: () => void;
};
```

--------------------------------

### Left Action Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/headeroption

Configuration for a custom button on the left side of the header.

```typescript
optional leftAction: {
  icon: HeaderIcon;
  onClick: () => void;
};
```

--------------------------------

### Theme Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/basicroot

Details the optional 'theme' property, allowing 'light' or 'dark' themes.

```typescript
optional theme: "light" | "dark";
```

--------------------------------

### min Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/datepicker

Optional minimum date string for the DatePicker.

```typescript
optional min: string;
```

--------------------------------

### OnSubmitAction Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/form

An optional configuration for the action to be performed when the form is submitted.

```typescript
optional onSubmitAction: ActionConfig;
```

--------------------------------

### Label Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional string property for the button's label.

```typescript
optional label: string;
```

--------------------------------

### HeaderOption Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/headeroption

Defines the structure for configuring the header UI, including optional actions and title settings.

```typescript
type HeaderOption = {
  enabled?: boolean;
  leftAction?: {
    icon: HeaderIcon;
    onClick: () => void;
  };
  rightAction?: {
    icon: HeaderIcon;
    onClick: () => void;
  };
  title?: {
    enabled?: boolean;
    text?: string;
  };
};
```

--------------------------------

### Color Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional property to set the button color from a predefined list.

```typescript
optional color:
  | "primary"
  | "secondary"
  | "info"
  | "discovery"
  | "success"
  | "caution"
  | "warning"
  | "danger";
```

--------------------------------

### setOptions() Signature

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/interfaces/openaichatkit

Signature for the setOptions method, which applies configuration options to the ChatKit instance.

```typescript
setOptions(options: ChatKitOptions): void;
```

--------------------------------

### autoFocus Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/textarea

Optional boolean property to automatically focus the textarea on component mount.

```typescript
optional autoFocus: boolean;
```

--------------------------------

### Typography Option Type

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/themeoption

Represents optional typography customization for the ChatKit UI.

```typescript
optional typography: TypographyOption;

```

--------------------------------

### Dictation Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/composeroption

Specifies the settings for enabling dictation (voice input) in the composer.

```typescript
optional dictation: {
  enabled: boolean;
};

```

--------------------------------

### Style Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional property to set the button's style.

```typescript
optional style: "primary" | "secondary";
```

--------------------------------

### gutterSize Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/input

Optional string specifying the gutter size, with predefined options.

```typescript
optional gutterSize: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";

```

--------------------------------

### Short Label Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/tooloption

Optional label displayed in the button when the tool is selected.

```typescript
optional shortLabel: string;
```

--------------------------------

### Size Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/icon

Optional size property for the icon.

```typescript
optional size: IconSize;
```

--------------------------------

### Size Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/badge

Optional size property for the Badge.

```typescript
optional size: "sm" | "md" | "lg";
```

--------------------------------

### autoResize Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/textarea

Optional boolean property to enable automatic resizing of the textarea based on content.

```typescript
optional autoResize: boolean;
```

--------------------------------

### key? Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/caption

Optional key property for Caption.

```typescript
optional key: string;
```

--------------------------------

### useChatKit function signature

Source: https://openai.github.io/chatkit-js/quick-reference/use-chatkit

The useChatKit function prepares the <openai-chatkit> element for React.

```typescript
function useChatKit(options: UseChatKitOptions): UseChatKitReturn
```

--------------------------------

### options Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/radiogroup

Optional array of options for the RadioGroup.

```typescript
optional options: {
  disabled?: boolean;
  label: string;
  value: string;
}[];
```

--------------------------------

### ChatKitOptions Type Alias

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/chatkitoptions

Defines the structure for ChatKit initialization options.

```typescript
type ChatKitOptions = {
  api: CustomApiConfig | HostedApiConfig;
  composer?: ComposerOption;
  disclaimer?: DisclaimerOption;
  entities?: EntitiesOption;
  frameTitle?: string;
  header?: HeaderOption;
  history?: HistoryOption;
  initialThread?: null | string;
  locale?: SupportedLocale;
  onClientTool?: (toolCall: {
    name: string;
    params: Record<string, unknown>;
  }) => Promise<Record<string, unknown>> | Record<string, unknown>;
  startScreen?: StartScreenOption;
  theme?: ColorScheme | ThemeOption;
  thread?: ThreadOption;
  threadItemActions?: ThreadItemActionsOption;
  widgets?: WidgetsOption;
};

```

--------------------------------

### showHistory() Method Signature

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/interfaces/openaichatkit

The TypeScript signature for the showHistory() method, indicating it returns a Promise that resolves with void.

```typescript
showHistory(): Promise<void>;
```

--------------------------------

### dictation

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/composeroption

Dictation (voice input) settings for the composer.

```typescript
optional dictation: {
  enabled: boolean;
};
```

--------------------------------

### focusComposer Method Signature

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/interfaces/openaichatkit

The method signature for focusComposer.

```typescript
focusComposer(): Promise<void>;
```

--------------------------------

### size? Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/title

The optional size property for the Title type, referencing TitleSize.

```typescript
optional size: TitleSize;
```

--------------------------------

### chatkit.ready Event

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitevents

Emitted when the ChatKit frame has loaded.

```typescript
chatkit.ready: CustomEvent<void>;

```

--------------------------------

### showComposerMenu Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/entitiesoption

Boolean property to control the rendering of a composer button that triggers a tag search.

```typescript
optional showComposerMenu: boolean;
```

--------------------------------

### uploadStrategy Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/customapiconfig

An optional strategy for uploading attachments, required when attachments are enabled.

```typescript
optional uploadStrategy: FileUploadStrategy;
```

--------------------------------

### ThemeOption Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/themeoption

Defines the structure for visual appearance configuration options in ChatKit.

```typescript
type ThemeOption = {
  color?: ColorOption;
  colorScheme?: ColorScheme;
  density?: 'compact' | 'normal' | 'spacious';
  radius?: 'pill' | 'round' | 'soft' | 'sharp';
  typography?: TypographyOption;
};

```

--------------------------------

### Type Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Required string property indicating the component type is 'Button'.

```typescript
type: 'Button';
```

--------------------------------

### autoSelect Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/textarea

Optional boolean property to automatically select the text when the textarea is focused.

```typescript
optional autoSelect: boolean;
```

--------------------------------

### options property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/select

Required array of options for the select component.

```typescript
options: {
  label: string;
  value: string;
}
[];
```

--------------------------------

### domainKey Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/customapiconfig

The domain key used to verify the registered domain for the integration.

```typescript
domainKey: string;
```

--------------------------------

### placeholder Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/input

Optional string for the input's placeholder text.

```typescript
optional placeholder: string;

```

--------------------------------

### Density Type

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/themeoption

Defines the density options for spacing in the ChatKit UI.

```typescript
optional density: "compact" | "normal" | "spacious";

```

--------------------------------

### frameTitle Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Accessible title for the ChatKit iframe element.

```typescript
optional frameTitle: string;
```

--------------------------------

### fetchUpdates Method Signature

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/interfaces/openaichatkit

The method signature for fetchUpdates.

```typescript
fetchUpdates(): Promise<void>;
```

--------------------------------

### Grayscale Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/coloroption

Optional grayscale options property.

```typescript
optional grayscale: GrayscaleOptions;
```

--------------------------------

### ColorScheme Type

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/themeoption

Specifies the color scheme for the ChatKit UI.

```typescript
optional colorScheme: ColorScheme;

```

--------------------------------

### UseChatKitOptions type definition

Source: https://openai.github.io/chatkit-js/quick-reference/use-chatkit

UseChatKitOptions combines ChatKitOptions with camel-cased event handlers.

```typescript
type UseChatKitOptions = ChatKitOptions &
  Partial<{
    onReady: () => void;
    onResponseStart: () => void;
    onResponseEnd: () => void;
    onThreadChange: (event: { threadId: string | null }) => void;
    onThreadLoadStart: (event: { threadId: string }) => void;
    onThreadLoadEnd: (event: { threadId: string }) => void;
    onError: (event: { error: Error }) => void;
    onLog: (event: { name: string; data?: Record<string, unknown> }) => void;
    onEffect: (event: { name: string; data?: Record<string, unknown> }) => void;
    onDeeplink: (event: { name: string; data?: Record<string, unknown> }) => void;
  }>;
```

--------------------------------

### rows Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/textarea

Optional number property to set the initial number of rows for the textarea.

```typescript
optional rows: number;
```

--------------------------------

### ChatKitOptions Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

The TypeScript type definition for ChatKitOptions, outlining all available configuration properties.

```typescript
type ChatKitOptions = {
  api: CustomApiConfig | HostedApiConfig;
  composer?: ComposerOption;
  disclaimer?: DisclaimerOption;
  entities?: EntitiesOption;
  frameTitle?: string;
  header?: HeaderOption;
  history?: HistoryOption;
  initialThread?: null | string;
  locale?: SupportedLocale;
  onClientTool?: (toolCall: {
    name: string;
    params: Record<string, unknown>;
  }) => Promise<Record<string, unknown>> | Record<string, unknown>;
  startScreen?: StartScreenOption;
  theme?: ColorScheme | ThemeOption;
  thread?: ThreadOption;
  threadItemActions?: ThreadItemActionsOption;
  widgets?: WidgetsOption;
};
```

--------------------------------

### url Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/customapiconfig

The URL (relative or absolute) of the ChatKit API endpoint.

```typescript
url: string;
```

--------------------------------

### align Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/datepicker

Optional alignment for the DatePicker.

```typescript
optional align: "start" | "center" | "end";
```

--------------------------------

### showRename Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/historyoption

Optional boolean property to show the rename action for threads.

```typescript
optional showRename: boolean;
```

--------------------------------

### background Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/namespaces/widgets/type-aliases/card

The 'background' property allows customization of the Card's background, accepting a string or a ThemeColor type.

```typescript
optional background:
  | string
  | ThemeColor;

```

--------------------------------

### theme Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/namespaces/widgets/type-aliases/card

The 'theme' property allows setting the visual theme of the Card to either 'light' or 'dark'.

```typescript
optional theme: "light" | "dark";

```

--------------------------------

### allowAutofillExtensions Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/input

Optional boolean to enable autofill extensions.

```typescript
optional allowAutofillExtensions: boolean;

```

--------------------------------

### Image Attachment Preview URL

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/attachment

URL for rendering the image preview.

```typescript
preview_url: string;
```

--------------------------------

### alt? Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/image

Optional alt text for the image.

```typescript
optional alt: string;
```

--------------------------------

### Icon Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/tooloption

The icon displayed next to the tool in the menu.

```typescript
icon: ChatKitIcon;
```

--------------------------------

### FileUploadStrategy Type Alias

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/fileuploadstrategy

Defines the possible strategies for uploading files: 'two_phase' or 'direct' with an upload URL.

```typescript
type FileUploadStrategy =
  | {
      type: 'two_phase';
    }
  | {
      type: 'direct';
      uploadUrl: string;
    };
```

--------------------------------

### locale Configuration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/chatkitoptions

Locale override for ChatKit UI. If not provided, the browser’s locale will be used. If the locale is not supported, will fall back to English.

```typescript
optional locale: SupportedLocale;
```

--------------------------------

### Color Option Type

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/themeoption

Represents optional color customization for the ChatKit UI.

```typescript
optional color: ColorOption;

```

--------------------------------

### showComposerMenu Default Value

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/entitiesoption

The default value for the showComposerMenu property.

```typescript
false;
```

--------------------------------

### type Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/textarea

Required string literal property, must be 'Textarea'.

```typescript
type: 'Textarea';
```

--------------------------------

### enabled Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/historyoption

Optional boolean property to enable the history panel.

```typescript
optional enabled: boolean;
```

--------------------------------

### Size Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/label

Specifies the optional size property, which is of type TextSize.

```typescript
optional size: TextSize;
```

--------------------------------

### textAlign Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/basetextprops

Optional property to define the text alignment.

```typescript
optional textAlign: TextAlign;
```

--------------------------------

### Block Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional boolean property to control block display.

```typescript
optional block: boolean;
```

--------------------------------

### variant Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/textarea

Optional property to set the visual variant of the textarea, with predefined string literal values.

```typescript
optional variant: "soft" | "outline";
```

--------------------------------

### ColorScheme Default Value

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/themeoption

Default value for the colorScheme property.

```typescript
'light';
```

--------------------------------

### fontSources Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/typographyoption

Optional property for an array of FontObject.

```typescript
optional fontSources: FontObject[];
```

--------------------------------

### pattern Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/input

Optional string for the input's pattern (regex).

```typescript
optional pattern: string;

```

--------------------------------

### key Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/input

Optional string for the input's key.

```typescript
optional key: string;

```

--------------------------------

### Color Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/badge

Optional color property for the Badge.

```typescript
optional color: "secondary" | "success" | "danger" | "warning" | "info" | "discovery";
```

--------------------------------

### ComposerOption Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/type-aliases/composeroption

Defines the structure of the ComposerOption type, which configures the composer component.

```typescript
type ComposerOption = {
  attachments?: {
    accept?: Record<string, string[]>;
    enabled: boolean;
    maxCount?: number;
    maxSize?: number | Record<string, number>;
  };
  dictation?: {
    enabled: boolean;
  };
  models?: ModelOption[];
  placeholder?: string;
  tools?: ToolOption[];
};

```

--------------------------------

### Button Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Defines the structure and possible values for a Button component.

```typescript
type Button = {
  block?: boolean;
  color?:
    | 'primary'
    | 'secondary'
    | 'info'
    | 'discovery'
    | 'success'
    | 'caution'
    | 'warning'
    | 'danger';
  disabled?: boolean;
  iconEnd?: WidgetIcon;
  iconSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  iconStart?: WidgetIcon;
  id?: string;
  key?: string;
  label?: string;
  onClickAction?: ActionConfig;
  pill?: boolean;
  size?: ControlSize;
  style?: 'primary' | 'secondary';
  submit?: boolean;
  type: 'Button';
  uniform?: boolean;
  variant?: ControlVariant;
};
```

--------------------------------

### ChatKit Component Usage

Source: https://openai.github.io/chatkit-js/quick-reference/chatkit-component

Basic usage of the ChatKit component with the control object from useChatKit.

```jsx
<ChatKit control={control} {...props} />
```

--------------------------------

### Icon End Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional property for an icon displayed at the end of the button.

```typescript
optional iconEnd: WidgetIcon;
```

--------------------------------

### text Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/disclaimeroption

Required string property for the markdown text displayed below the composer.

```typescript
text: string;
```

--------------------------------

### size? Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/caption

Optional size property for Caption.

```typescript
optional size: CaptionSize;
```

--------------------------------

### Submit Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional boolean property to indicate if the button is a submit button.

```typescript
optional submit: boolean;
```

--------------------------------

### Density Default Value

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/themeoption

Default value for the density property.

```typescript
'normal';
```

--------------------------------

### side Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/datepicker

Optional side for the DatePicker.

```typescript
optional side: "top" | "bottom" | "left" | "right";
```

--------------------------------

### Pinned Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/tooloption

Determines if the tool is pinned to the composer.

```typescript
optional pinned: boolean;
```

--------------------------------

### fetch Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/customapiconfig

An optional custom fetch function to override the default fetch behavior for API requests, allowing for custom headers or credentials.

```typescript
optional fetch: typeof fetch;
```

--------------------------------

### size Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/card

Optional property to define the card's size.

```typescript
optional size: "sm" | "md" | "lg" | "full";
```

--------------------------------

### Transition Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/transition

Defines the structure of the Transition type, including its properties.

```typescript
type Transition = {
  children: WidgetComponent;
  id?: string;
  key?: string;
  type: 'Transition';
};
```

--------------------------------

### src Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/image

The source URL or path of the image.

```typescript
src: string;
```

--------------------------------

### Select Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/select

Defines the structure of a Select component.

```typescript
type Select = {
  block?: boolean;
  clearable?: boolean;
  defaultValue?: string;
  disabled?: boolean;
  id?: string;
  key?: string;
  name: string;
  onChangeAction?: ActionConfig;
  options: {
    label: string;
    value: string;
  }[];
  pill?: boolean;
  placeholder?: string;
  size?: ControlSize;
  type: 'Select';
  variant?: ControlVariant;
};
```

--------------------------------

### baseSize Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/typographyoption

Optional property for the base font size in pixels, with allowed values from 14 to 18.

```typescript
optional baseSize: 14 | 15 | 16 | 17 | 18;
```

--------------------------------

### weight Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/basetextprops

Optional property to set the font weight of the text.

```typescript
optional weight: "normal" | "medium" | "semibold" | "bold";
```

--------------------------------

### Variant Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/badge

Optional variant property for the Badge.

```typescript
optional variant: "solid" | "soft" | "outline";
```

--------------------------------

### Icon Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/icon

Defines the structure of an Icon object.

```typescript
type Icon = {
  color?: string | ThemeColor;
  id?: string;
  key?: string;
  name: WidgetIcon;
  size?: IconSize;
  type: 'Icon';
};
```

--------------------------------

### defaultValue Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/input

Optional string for the default value of the input.

```typescript
optional defaultValue: string;

```

--------------------------------

### Form Type Declaration

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/form

Defines the structure and properties of the Form component.

```typescript
type Form = {
  direction?: 'row' | 'col';
  id?: string;
  key?: string;
  onSubmitAction?: ActionConfig;
  type: 'Form';
} & BoxBaseProps;
```

--------------------------------

### frame? Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/image

Indicates whether a frame should be applied to the image.

```typescript
optional frame: boolean;
```

--------------------------------

### Badge Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/badge

The TypeScript definition for the Badge type.

```typescript
type Badge = {
  color?: 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'discovery';
  id?: string;
  key?: string;
  label: string;
  pill?: boolean;
  size?: 'sm' | 'md' | 'lg';
  type: 'Badge';
  variant?: 'solid' | 'soft' | 'outline';
};
```

--------------------------------

### showDelete Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/historyoption

Optional boolean property to show the delete action for threads.

```typescript
optional showDelete: boolean;
```

--------------------------------

### Surface Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/coloroption

Optional surface colors property.

```typescript
optional surface: SurfaceColors;
```

--------------------------------

### Uniform Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/button

Optional boolean property for uniform styling.

```typescript
optional uniform: boolean;
```

--------------------------------

### onAction Function Signature

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/widgetsoption

Signature for the optional onAction function within WidgetsOption.

```typescript
optional onAction: (action: {
  payload?: Record<string, unknown>;
  type: string;
}, widgetItem: {
  id: string;
  widget:   | Card
     | ListView
     | BasicRoot;
}) => Promise<void>;
```

--------------------------------

### defaultValue Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/datepicker

Optional default string value for the DatePicker.

```typescript
optional defaultValue: string;
```

--------------------------------

### Type Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/form

Defines the type of the component, which must be 'Form' for this component.

```typescript
type: 'Form';
```

--------------------------------

### CustomApiConfig Type Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/customapiconfig

Defines the structure for custom API configuration, including domain key, optional fetch function, optional upload strategy, and API URL.

```typescript
type CustomApiConfig = {
  domainKey: string;
  fetch?: typeof fetch;
  uploadStrategy?: FileUploadStrategy;
  url: string;
};
```

--------------------------------

### Type Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/icon

The type of the object, always 'Icon'.

```typescript
type: 'Icon';
```

--------------------------------

### size Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit-react/namespaces/widgets/type-aliases/card

The 'size' property determines the overall size of the Card, with predefined options: 'sm', 'md', 'lg', 'full'.

```typescript
optional size: "sm" | "md" | "lg" | "full";

```

--------------------------------

### getClientSecret Method Signature

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/type-aliases/hostedapiconfig

Shows the signature of the getClientSecret method, which takes an optional current client secret and returns a promise of a string.

```typescript
getClientSecret: (currentClientSecret: string | null) => Promise<string>;
```

--------------------------------

### Light Property Definition

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/themecolor

Specifies the type for the 'light' property within the ThemeColor object.

```typescript
light: string;

```

--------------------------------

### Style Property

Source: https://openai.github.io/chatkit-js/api/openai/chatkit/namespaces/widgets/type-aliases/border

Specifies the optional style of the border from a predefined set of values.

```typescript
optional style:
  | "solid"
  | "dashed"
  | "dotted"
  | "double"
  | "groove"
  | "ridge"
  | "inset"
  | "outset";
```