Source: https://app-studio-6167b.web.app/docs/ChatWidget

@app-studio/components

# ChatWidget

---

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget.tsx)

## Import

```ts
import { ChatWidget } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { View, Button, Text, Vertical } from 'app-studio';
import { ChatWidgetWidget } from '@app-studio/components';

export function WidgetDemo() {
  const [showWidget, setShowWidget] = useState(true);

  return (
    <View
      height="400px"
      position="relative"
      border="1px dashed #ccc"
      borderRadius="12px"
      padding="24px"
    >
      <Vertical gap={16}>
        <Text fontSize="18px" fontWeight="bold">
          Interactive Widget Demo
        </Text>
        <Text color="color-gray-600">
          The widget is fixed to the bottom-right of this container (visually
          simulating a page). Click the floating action button to open the chat.
        </Text>
        <Text color="color-gray-600">
          Try the &quot;Plus&quot; icon in the chat input to enter &quot;Context
          Selection Mode&quot; and pick elements on this page.
        </Text>

        <Button onClick={() => setShowWidget(!showWidget)} width="fit-content">
          {showWidget ? 'Hide Widget' : 'Show Widget'}
        </Button>

        {/* Dummy elements to pick */}
        <View display="flex" gap="16px" flexWrap="wrap" marginTop="24px">
          <View
            padding="16px"
            backgroundColor="color-blue-100"
            borderRadius="8px"
            id="box-1"
          >
            Pick me (Box 1)
          </View>
          <View
            padding="16px"
            backgroundColor="color-green-100"
            borderRadius="8px"
            id="box-2"
          >
            Pick me (Box 2)
          </View>
          <View
            padding="16px"
            backgroundColor="color-purple-100"
            borderRadius="8px"
            id="text-element"
          >
            <Text>Text Element</Text>
          </View>
        </View>
      </Vertical>

      {/* Render widget inside this relative container for demo purposes (usually it's fixed to body) */}
      {showWidget && (
        <View
          position="absolute"
          bottom={0}
          right={0}
          width="100%"
          height="100%"
          pointerEvents="none"
        >
          <View pointerEvents="auto">
            <ChatWidgetWidget
              bubbleSize="md"
              initialMessages={[
                {
                  id: 'welcome',
                  role: 'assistant',
                  content:
                    'Hi! Click the + button to select an element from the page.',
                  timestamp: new Date(),
                },
                {
                  id: 'system-msg',
                  role: 'assistant',
                  messageType: 'system',
                  content: 'System: Context selection mode enabled',
                  timestamp: new Date(),
                },
                {
                  id: 'reasoning-demo',
                  role: 'assistant',
                  content: 'I can also show my thinking process!',
                  reasoning:
                    'The user might want to know about internal logic. I should demonstrate the reasoning block.',
                  timestamp: new Date(),
                },
                {
                  id: 'tool-call',
                  role: 'assistant',
                  messageType: 'tool',
                  content: 'Called function: getElementById("box-1")',
                  timestamp: new Date(),
                },
              ]}
            />
          </View>
        </View>
      )}
    </View>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ChatWidget**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `messages` | `Message[]` | `[]` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L11) |
| `inputValue` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L13) |
| `onInputChange` | `((value: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L15) |
| `onSubmit` | `((message: string) => void)` | `—` | Called when the user submits. The signature shows the submitted payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L17) |
| `inputPlaceholder` | `string` | `'Type a message...'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L19) |
| `disableInput` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L21) |
| `variant` | `Variant` `"default"``"glassy"``"minimal"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L23) |
| `size` | `Size` `"sm"``"md"``"lg"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L25) |
| `showTimestamps` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L27) |
| `enableAttachments` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L29) |
| `enableContextPicker` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L31) |
| `selectedContextElements` | `{ id: string; name: string; }[]` | `[]` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L33) |
| `onContextPickerClick` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L35) |
| `onRemoveContextElement` | `((id: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L37) |
| `isLoading` | `boolean` | `false` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L39) |
| `loadingText` | `string` | `'Loading...'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L41) |
| `styles` | `ChatWidgetStyles` | `{}` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L43) |
| `maxHeight` | `string \| number` | `'600px'` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `none \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `none` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **1** \| **1.3** \| **12** \| **7** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L45) |

Common inherited styling props (7)

**ChatWidget inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.