GitVita
New repositoryImport repositoryNew issue
Your repositories Your dashboard Sign in

openai/chatkit-python

Public

mirrored fromhttps://github.com/openai/chatkit-pythonAvailable

Watch0Fork0Star0
CodeCommitsIssuesPull requestsActionsInsightsSecurity
b5a38edc0f37f541e035aa392111f94d9fafa058

Branches

Tags

  • No tags available.
0Branches0Tags
Go to file
Add file
Code

Clone

HTTPS

Download ZIP

chatkit-python/docs

docs/widgets.md

539lines · modecode

RawDownload
Latest commit unavailable.
1# ChatKit Widgets
2
3This reference is generated from the `chatkit.widgets` module. Every component inherits the common props `id`, `key`, and `type`. Optional props default to `None` unless noted.
4
5## Badge
6
7Small badge indicating status or categorization.
8
9| Field | Type | Default |
10| --- | --- | --- |
11| `key` | `str | None` | None |
12| `id` | `str | None` | None |
13| `type` | `Badge` | 'Badge' |
14| `label` | `str` | |
15| `color` | `secondary | success | danger | warning | info | discovery | None` | None |
16| `variant` | `solid | soft | outline | None` | None |
17| `size` | `sm | md | lg | None` | None |
18| `pill` | `bool | None` | None |
19
20## Box
21
22Generic flex container with direction control.
23
24| Field | Type | Default |
25| --- | --- | --- |
26| `children` | `list['WidgetComponent'] | None` | None |
27| `align` | `start | center | end | baseline | stretch | None` | None |
28| `justify` | `start | center | end | between | around | evenly | stretch | None` | None |
29| `wrap` | `nowrap | wrap | wrap-reverse | None` | None |
30| `flex` | `int | str | None` | None |
31| `gap` | `int | str | None` | None |
32| `height` | `float | str | None` | None |
33| `width` | `float | str | None` | None |
34| `size` | `float | str | None` | None |
35| `minHeight` | `int | str | None` | None |
36| `minWidth` | `int | str | None` | None |
37| `minSize` | `int | str | None` | None |
38| `maxHeight` | `int | str | None` | None |
39| `maxWidth` | `int | str | None` | None |
40| `maxSize` | `int | str | None` | None |
41| `padding` | `float | str | Spacing | None` | None |
42| `margin` | `float | str | Spacing | None` | None |
43| `border` | `int | Border | Borders | None` | None |
44| `radius` | `2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | full | 100% | none | None` | None |
45| `background` | `str | ThemeColor | None` | None |
46| `aspectRatio` | `float | str | None` | None |
47| `key` | `str | None` | None |
48| `id` | `str | None` | None |
49| `type` | `Box` | 'Box' |
50| `direction` | `row | col | None` | None |
51
52## Button
53
54Button component optionally wired to an action.
55
56| Field | Type | Default |
57| --- | --- | --- |
58| `key` | `str | None` | None |
59| `id` | `str | None` | None |
60| `type` | `Button` | 'Button' |
61| `submit` | `bool | None` | None |
62| `label` | `str | None` | None |
63| `onClickAction` | `ActionConfig | None` | None |
64| `iconStart` | `WidgetIcon | None` | None |
65| `iconEnd` | `WidgetIcon | None` | None |
66| `style` | `primary | secondary | None` | None |
67| `iconSize` | `sm | md | lg | xl | 2xl | None` | None |
68| `color` | `primary | secondary | info | discovery | success | caution | warning | danger | None` | None |
69| `variant` | `solid | soft | outline | ghost | None` | None |
70| `size` | `3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | None` | None |
71| `pill` | `bool | None` | None |
72| `uniform` | `bool | None` | None |
73| `block` | `bool | None` | None |
74| `disabled` | `bool | None` | None |
75
76## Caption
77
78Widget rendering supporting caption text.
79
80| Field | Type | Default |
81| --- | --- | --- |
82| `key` | `str | None` | None |
83| `id` | `str | None` | None |
84| `type` | `Caption` | 'Caption' |
85| `value` | `str` | |
86| `color` | `str | ThemeColor | None` | None |
87| `weight` | `normal | medium | semibold | bold | None` | None |
88| `size` | `sm | md | lg | None` | None |
89| `textAlign` | `start | center | end | None` | None |
90| `truncate` | `bool | None` | None |
91| `maxLines` | `int | None` | None |
92
93## Card
94
95Versatile container used for structuring widget content.
96
97| Field | Type | Default |
98| --- | --- | --- |
99| `key` | `str | None` | None |
100| `id` | `str | None` | None |
101| `type` | `Card` | 'Card' |
102| `asForm` | `bool | None` | None |
103| `children` | `list['WidgetComponent']` | |
104| `background` | `str | ThemeColor | None` | None |
105| `size` | `sm | md | lg | full | None` | None |
106| `padding` | `float | str | Spacing | None` | None |
107| `status` | `WidgetStatusWithFavicon | WidgetStatusWithIcon | None` | None |
108| `collapsed` | `bool | None` | None |
109| `confirm` | `CardAction | None` | None |
110| `cancel` | `CardAction | None` | None |
111| `theme` | `light | dark | None` | None |
112
113## Chart
114
115Data visualization component for simple bar/line/area charts.
116
117| Field | Type | Default |
118| --- | --- | --- |
119| `key` | `str | None` | None |
120| `id` | `str | None` | None |
121| `type` | `Chart` | 'Chart' |
122| `data` | `list[dict[str, str | int | float]]` | |
123| `series` | `list[Series]` | |
124| `xAxis` | `str | XAxisConfig` | |
125| `showYAxis` | `bool | None` | None |
126| `showLegend` | `bool | None` | None |
127| `showTooltip` | `bool | None` | None |
128| `barGap` | `int | None` | None |
129| `barCategoryGap` | `int | None` | None |
130| `flex` | `int | str | None` | None |
131| `height` | `int | str | None` | None |
132| `width` | `int | str | None` | None |
133| `size` | `int | str | None` | None |
134| `minHeight` | `int | str | None` | None |
135| `minWidth` | `int | str | None` | None |
136| `minSize` | `int | str | None` | None |
137| `maxHeight` | `int | str | None` | None |
138| `maxWidth` | `int | str | None` | None |
139| `maxSize` | `int | str | None` | None |
140| `aspectRatio` | `float | str | None` | None |
141
142## Checkbox
143
144Checkbox input component.
145
146| Field | Type | Default |
147| --- | --- | --- |
148| `key` | `str | None` | None |
149| `id` | `str | None` | None |
150| `type` | `Checkbox` | 'Checkbox' |
151| `name` | `str` | |
152| `label` | `str | None` | None |
153| `defaultChecked` | `str | None` | None |
154| `onChangeAction` | `ActionConfig | None` | None |
155| `disabled` | `bool | None` | None |
156| `required` | `bool | None` | None |
157
158## Col
159
160Vertical flex container.
161
162| Field | Type | Default |
163| --- | --- | --- |
164| `children` | `list['WidgetComponent'] | None` | None |
165| `align` | `start | center | end | baseline | stretch | None` | None |
166| `justify` | `start | center | end | between | around | evenly | stretch | None` | None |
167| `wrap` | `nowrap | wrap | wrap-reverse | None` | None |
168| `flex` | `int | str | None` | None |
169| `gap` | `int | str | None` | None |
170| `height` | `float | str | None` | None |
171| `width` | `float | str | None` | None |
172| `size` | `float | str | None` | None |
173| `minHeight` | `int | str | None` | None |
174| `minWidth` | `int | str | None` | None |
175| `minSize` | `int | str | None` | None |
176| `maxHeight` | `int | str | None` | None |
177| `maxWidth` | `int | str | None` | None |
178| `maxSize` | `int | str | None` | None |
179| `padding` | `float | str | Spacing | None` | None |
180| `margin` | `float | str | Spacing | None` | None |
181| `border` | `int | Border | Borders | None` | None |
182| `radius` | `2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | full | 100% | none | None` | None |
183| `background` | `str | ThemeColor | None` | None |
184| `aspectRatio` | `float | str | None` | None |
185| `key` | `str | None` | None |
186| `id` | `str | None` | None |
187| `type` | `Col` | 'Col' |
188
189## DatePicker
190
191Date picker input component.
192
193| Field | Type | Default |
194| --- | --- | --- |
195| `key` | `str | None` | None |
196| `id` | `str | None` | None |
197| `type` | `DatePicker` | 'DatePicker' |
198| `name` | `str` | |
199| `onChangeAction` | `ActionConfig | None` | None |
200| `placeholder` | `str | None` | None |
201| `defaultValue` | `datetime | None` | None |
202| `min` | `datetime | None` | None |
203| `max` | `datetime | None` | None |
204| `variant` | `solid | soft | outline | ghost | None` | None |
205| `size` | `3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | None` | None |
206| `side` | `top | bottom | left | right | None` | None |
207| `align` | `start | center | end | None` | None |
208| `pill` | `bool | None` | None |
209| `block` | `bool | None` | None |
210| `clearable` | `bool | None` | None |
211| `disabled` | `bool | None` | None |
212
213## Divider
214
215Visual divider separating content sections.
216
217| Field | Type | Default |
218| --- | --- | --- |
219| `key` | `str | None` | None |
220| `id` | `str | None` | None |
221| `type` | `Divider` | 'Divider' |
222| `color` | `str | ThemeColor | None` | None |
223| `size` | `int | str | None` | None |
224| `spacing` | `int | str | None` | None |
225| `flush` | `bool | None` | None |
226
227## Form
228
229Form wrapper capable of submitting ``onSubmitAction``.
230
231| Field | Type | Default |
232| --- | --- | --- |
233| `children` | `list['WidgetComponent'] | None` | None |
234| `align` | `start | center | end | baseline | stretch | None` | None |
235| `justify` | `start | center | end | between | around | evenly | stretch | None` | None |
236| `wrap` | `nowrap | wrap | wrap-reverse | None` | None |
237| `flex` | `int | str | None` | None |
238| `gap` | `int | str | None` | None |
239| `height` | `float | str | None` | None |
240| `width` | `float | str | None` | None |
241| `size` | `float | str | None` | None |
242| `minHeight` | `int | str | None` | None |
243| `minWidth` | `int | str | None` | None |
244| `minSize` | `int | str | None` | None |
245| `maxHeight` | `int | str | None` | None |
246| `maxWidth` | `int | str | None` | None |
247| `maxSize` | `int | str | None` | None |
248| `padding` | `float | str | Spacing | None` | None |
249| `margin` | `float | str | Spacing | None` | None |
250| `border` | `int | Border | Borders | None` | None |
251| `radius` | `2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | full | 100% | none | None` | None |
252| `background` | `str | ThemeColor | None` | None |
253| `aspectRatio` | `float | str | None` | None |
254| `key` | `str | None` | None |
255| `id` | `str | None` | None |
256| `type` | `Form` | 'Form' |
257| `onSubmitAction` | `ActionConfig | None` | None |
258| `direction` | `row | col | None` | None |
259
260## Icon
261
262Icon component referencing a built-in icon name.
263
264| Field | Type | Default |
265| --- | --- | --- |
266| `key` | `str | None` | None |
267| `id` | `str | None` | None |
268| `type` | `Icon` | 'Icon' |
269| `name` | `WidgetIcon` | |
270| `color` | `str | ThemeColor | None` | None |
271| `size` | `xs | sm | md | lg | xl | 2xl | 3xl | None` | None |
272
273## Image
274
275Image component with sizing and fitting controls.
276
277| Field | Type | Default |
278| --- | --- | --- |
279| `key` | `str | None` | None |
280| `id` | `str | None` | None |
281| `type` | `Image` | 'Image' |
282| `src` | `str` | |
283| `alt` | `str | None` | None |
284| `fit` | `cover | contain | fill | scale-down | none | None` | None |
285| `position` | `top left | top | top right | left | center | right | bottom left | bottom | bottom right | None` | None |
286| `radius` | `2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | full | 100% | none | None` | None |
287| `frame` | `bool | None` | None |
288| `flush` | `bool | None` | None |
289| `height` | `int | str | None` | None |
290| `width` | `int | str | None` | None |
291| `size` | `int | str | None` | None |
292| `minHeight` | `int | str | None` | None |
293| `minWidth` | `int | str | None` | None |
294| `minSize` | `int | str | None` | None |
295| `maxHeight` | `int | str | None` | None |
296| `maxWidth` | `int | str | None` | None |
297| `maxSize` | `int | str | None` | None |
298| `margin` | `int | str | Spacing | None` | None |
299| `background` | `str | ThemeColor | None` | None |
300| `aspectRatio` | `float | str | None` | None |
301| `flex` | `int | str | None` | None |
302
303## Input
304
305Single-line text input component.
306
307| Field | Type | Default |
308| --- | --- | --- |
309| `key` | `str | None` | None |
310| `id` | `str | None` | None |
311| `type` | `Input` | 'Input' |
312| `name` | `str` | |
313| `inputType` | `number | email | text | password | tel | url | None` | None |
314| `defaultValue` | `str | None` | None |
315| `required` | `bool | None` | None |
316| `pattern` | `str | None` | None |
317| `placeholder` | `str | None` | None |
318| `allowAutofillExtensions` | `bool | None` | None |
319| `autoSelect` | `bool | None` | None |
320| `autoFocus` | `bool | None` | None |
321| `disabled` | `bool | None` | None |
322| `variant` | `soft | outline | None` | None |
323| `size` | `3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | None` | None |
324| `gutterSize` | `2xs | xs | sm | md | lg | xl | None` | None |
325| `pill` | `bool | None` | None |
326
327## Label
328
329Form label associated with a field.
330
331| Field | Type | Default |
332| --- | --- | --- |
333| `key` | `str | None` | None |
334| `id` | `str | None` | None |
335| `type` | `Label` | 'Label' |
336| `value` | `str` | |
337| `fieldName` | `str` | |
338| `size` | `xs | sm | md | lg | xl | None` | None |
339| `weight` | `normal | medium | semibold | bold | None` | None |
340| `textAlign` | `start | center | end | None` | None |
341| `color` | `str | ThemeColor | None` | None |
342
343## ListView
344
345Container component for rendering collections of list items.
346
347| Field | Type | Default |
348| --- | --- | --- |
349| `key` | `str | None` | None |
350| `id` | `str | None` | None |
351| `type` | `ListView` | 'ListView' |
352| `children` | `list[ListViewItem]` | |
353| `limit` | `int | auto | None` | None |
354| `status` | `WidgetStatusWithFavicon | WidgetStatusWithIcon | None` | None |
355| `theme` | `light | dark | None` | None |
356
357## ListViewItem
358
359Single row inside a ``ListView`` component.
360
361| Field | Type | Default |
362| --- | --- | --- |
363| `key` | `str | None` | None |
364| `id` | `str | None` | None |
365| `type` | `ListViewItem` | 'ListViewItem' |
366| `children` | `list['WidgetComponent']` | |
367| `onClickAction` | `ActionConfig | None` | None |
368| `gap` | `int | str | None` | None |
369| `align` | `start | center | end | baseline | stretch | None` | None |
370
371## Markdown
372
373Widget rendering Markdown content, optionally streamed.
374
375| Field | Type | Default |
376| --- | --- | --- |
377| `key` | `str | None` | None |
378| `id` | `str | None` | None |
379| `type` | `Markdown` | 'Markdown' |
380| `value` | `str` | |
381| `streaming` | `bool | None` | None |
382
383## RadioGroup
384
385Grouped radio input control.
386
387| Field | Type | Default |
388| --- | --- | --- |
389| `key` | `str | None` | None |
390| `id` | `str | None` | None |
391| `type` | `RadioGroup` | 'RadioGroup' |
392| `name` | `str` | |
393| `options` | `list[RadioOption] | None` | None |
394| `ariaLabel` | `str | None` | None |
395| `onChangeAction` | `ActionConfig | None` | None |
396| `defaultValue` | `str | None` | None |
397| `direction` | `row | col | None` | None |
398| `disabled` | `bool | None` | None |
399| `required` | `bool | None` | None |
400
401## Row
402
403Horizontal flex container.
404
405| Field | Type | Default |
406| --- | --- | --- |
407| `children` | `list['WidgetComponent'] | None` | None |
408| `align` | `start | center | end | baseline | stretch | None` | None |
409| `justify` | `start | center | end | between | around | evenly | stretch | None` | None |
410| `wrap` | `nowrap | wrap | wrap-reverse | None` | None |
411| `flex` | `int | str | None` | None |
412| `gap` | `int | str | None` | None |
413| `height` | `float | str | None` | None |
414| `width` | `float | str | None` | None |
415| `size` | `float | str | None` | None |
416| `minHeight` | `int | str | None` | None |
417| `minWidth` | `int | str | None` | None |
418| `minSize` | `int | str | None` | None |
419| `maxHeight` | `int | str | None` | None |
420| `maxWidth` | `int | str | None` | None |
421| `maxSize` | `int | str | None` | None |
422| `padding` | `float | str | Spacing | None` | None |
423| `margin` | `float | str | Spacing | None` | None |
424| `border` | `int | Border | Borders | None` | None |
425| `radius` | `2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | full | 100% | none | None` | None |
426| `background` | `str | ThemeColor | None` | None |
427| `aspectRatio` | `float | str | None` | None |
428| `key` | `str | None` | None |
429| `id` | `str | None` | None |
430| `type` | `Row` | 'Row' |
431
432## Select
433
434Select dropdown component.
435
436| Field | Type | Default |
437| --- | --- | --- |
438| `key` | `str | None` | None |
439| `id` | `str | None` | None |
440| `type` | `Select` | 'Select' |
441| `name` | `str` | |
442| `options` | `list[SelectOption]` | |
443| `onChangeAction` | `ActionConfig | None` | None |
444| `placeholder` | `str | None` | None |
445| `defaultValue` | `str | None` | None |
446| `variant` | `solid | soft | outline | ghost | None` | None |
447| `size` | `3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | None` | None |
448| `pill` | `bool | None` | None |
449| `block` | `bool | None` | None |
450| `clearable` | `bool | None` | None |
451| `disabled` | `bool | None` | None |
452
453## Spacer
454
455Flexible spacer used to push content apart.
456
457| Field | Type | Default |
458| --- | --- | --- |
459| `key` | `str | None` | None |
460| `id` | `str | None` | None |
461| `type` | `Spacer` | 'Spacer' |
462| `minSize` | `int | str | None` | None |
463
464## Text
465
466Widget rendering plain text with typography controls.
467
468| Field | Type | Default |
469| --- | --- | --- |
470| `key` | `str | None` | None |
471| `id` | `str | None` | None |
472| `type` | `Text` | 'Text' |
473| `value` | `str` | |
474| `streaming` | `bool | None` | None |
475| `italic` | `bool | None` | None |
476| `lineThrough` | `bool | None` | None |
477| `color` | `str | ThemeColor | None` | None |
478| `weight` | `normal | medium | semibold | bold | None` | None |
479| `width` | `float | str | None` | None |
480| `size` | `xs | sm | md | lg | xl | None` | None |
481| `textAlign` | `start | center | end | None` | None |
482| `truncate` | `bool | None` | None |
483| `minLines` | `int | None` | None |
484| `maxLines` | `int | None` | None |
485| `editable` | `False | EditableProps | None` | None |
486
487## Textarea
488
489Multiline text input component.
490
491| Field | Type | Default |
492| --- | --- | --- |
493| `key` | `str | None` | None |
494| `id` | `str | None` | None |
495| `type` | `Textarea` | 'Textarea' |
496| `name` | `str` | |
497| `defaultValue` | `str | None` | None |
498| `required` | `bool | None` | None |
499| `pattern` | `str | None` | None |
500| `placeholder` | `str | None` | None |
501| `autoSelect` | `bool | None` | None |
502| `autoFocus` | `bool | None` | None |
503| `disabled` | `bool | None` | None |
504| `variant` | `soft | outline | None` | None |
505| `size` | `3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | None` | None |
506| `gutterSize` | `2xs | xs | sm | md | lg | xl | None` | None |
507| `rows` | `int | None` | None |
508| `autoResize` | `bool | None` | None |
509| `maxRows` | `int | None` | None |
510| `allowAutofillExtensions` | `bool | None` | None |
511
512## Title
513
514Widget rendering prominent headline text.
515
516| Field | Type | Default |
517| --- | --- | --- |
518| `key` | `str | None` | None |
519| `id` | `str | None` | None |
520| `type` | `Title` | 'Title' |
521| `value` | `str` | |
522| `color` | `str | ThemeColor | None` | None |
523| `weight` | `normal | medium | semibold | bold | None` | None |
524| `size` | `sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | None` | None |
525| `textAlign` | `start | center | end | None` | None |
526| `truncate` | `bool | None` | None |
527| `maxLines` | `int | None` | None |
528
529## Transition
530
531Wrapper enabling transitions for a child component.
532
533| Field | Type | Default |
534| --- | --- | --- |
535| `key` | `str | None` | None |
536| `id` | `str | None` | None |
537| `type` | `Transition` | 'Transition' |
538| `children` | `WidgetComponent | None` | |
539
540