@app-studio/web 0.9.81 → 0.9.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: ChatWidget
|
|
3
|
+
description: A comprehensive chat interface component with support for various message types, attachments, and context integration.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# ChatWidget
|
|
7
|
+
|
|
8
|
+
The `ChatWidget` provides a polished, interactive chat UI. It supports user and assistant messages, rich content types (including reasoning blocks and tool outputs), file attachments, and context-aware inputs.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import { ChatWidget } from 'app-studio';
|
|
14
|
+
import { useState } from 'react';
|
|
15
|
+
|
|
16
|
+
const MyChat = () => {
|
|
17
|
+
const [messages, setMessages] = useState([
|
|
18
|
+
{ id: '1', role: 'assistant', content: 'Hello! How can I help you?', timestamp: new Date() }
|
|
19
|
+
]);
|
|
20
|
+
|
|
21
|
+
const handleSend = (text: string) => {
|
|
22
|
+
// Add user message
|
|
23
|
+
const userMsg = { id: Date.now().toString(), role: 'user', content: text, timestamp: new Date() };
|
|
24
|
+
setMessages(prev => [...prev, userMsg]);
|
|
25
|
+
|
|
26
|
+
// Simulate reponse
|
|
27
|
+
setTimeout(() => {
|
|
28
|
+
setMessages(prev => [...prev, {
|
|
29
|
+
id: (Date.now() + 1).toString(),
|
|
30
|
+
role: 'assistant',
|
|
31
|
+
content: 'I received your message!',
|
|
32
|
+
timestamp: new Date()
|
|
33
|
+
}]);
|
|
34
|
+
}, 1000);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<div style={{ height: 500, width: 400 }}>
|
|
39
|
+
<ChatWidget
|
|
40
|
+
messages={messages}
|
|
41
|
+
onSubmit={handleSend}
|
|
42
|
+
variant="default"
|
|
43
|
+
inputPlaceholder="Type a message..."
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Props
|
|
51
|
+
|
|
52
|
+
| Prop | Type | Default | Description |
|
|
53
|
+
| :--- | :--- | :--- | :--- |
|
|
54
|
+
| `messages` | `Message[]` | `[]` | Array of message objects to display. |
|
|
55
|
+
| `inputValue` | `string` | - | Value for the message input (controlled mode). |
|
|
56
|
+
| `onInputChange` | `(value: string) => void` | - | Callback when input value changes. |
|
|
57
|
+
| `onSubmit` | `(message: string) => void` | - | Callback when a message is sent. |
|
|
58
|
+
| `inputPlaceholder` | `string` | - | Placeholder text for the input area. |
|
|
59
|
+
| `disableInput` | `boolean` | `false` | Whether the input area is disabled. |
|
|
60
|
+
| `variant` | `'default' \| 'glassy' \| 'minimal'` | `'default'` | Visual style variant of the widget. |
|
|
61
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | General size scale of the widget. |
|
|
62
|
+
| `showTimestamps` | `boolean` | `false` | Whether to display timestamps below messages. |
|
|
63
|
+
| `enableAttachments` | `boolean` | `false` | Shows the attachment (paperclip) button. |
|
|
64
|
+
| `enableContextPicker` | `boolean` | `false` | Shows the context picker (+ button) in the input area. |
|
|
65
|
+
| `selectedContextElements` | `ContextElement[]` | `[]` | List of context elements currently selected/attached to the input. |
|
|
66
|
+
| `isLoading` | `boolean` | `false` | Displays a loading indicator if true. |
|
|
67
|
+
| `loadingText` | `string` | - | Text to display alongside the loading indicator. |
|
|
68
|
+
| `maxHeight` | `string \| number` | - | Maximum height for the messages display area. |
|
|
69
|
+
|
|
70
|
+
## Types
|
|
71
|
+
|
|
72
|
+
### Message
|
|
73
|
+
|
|
74
|
+
```typescript
|
|
75
|
+
type MessageRole = 'user' | 'assistant';
|
|
76
|
+
type MessageType = 'text' | 'error' | 'system' | 'tool';
|
|
77
|
+
|
|
78
|
+
interface Message {
|
|
79
|
+
id: string;
|
|
80
|
+
role: MessageRole;
|
|
81
|
+
content: string;
|
|
82
|
+
timestamp: Date;
|
|
83
|
+
reasoning?: string; // Collapsible "thinking" process block
|
|
84
|
+
messageType?: MessageType; // Defaults to 'text'
|
|
85
|
+
attachments?: Attachment[];
|
|
86
|
+
contextElements?: ContextElement[];
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### ContextElement
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
interface ContextElement {
|
|
94
|
+
id: string;
|
|
95
|
+
name: string;
|
|
96
|
+
tagName: string;
|
|
97
|
+
rect?: DOMRect;
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## Variants
|
|
102
|
+
|
|
103
|
+
- **default**: Standard solid background appearance.
|
|
104
|
+
- **glassy**: Semi-transparent background with blur effects (requires appropriate container/background).
|
|
105
|
+
- **minimal**: Stripped down appearance, suitable for embedding in tighter spaces.
|
|
106
|
+
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: EditComponent
|
|
3
|
+
description: A floating or overlay toolbar designed for contextual editing of elements, with support for custom tools and positioning.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# EditComponent
|
|
7
|
+
|
|
8
|
+
The `EditComponent` is a versatile toolbar that positions itself relative to a target element. It is commonly used for inline editing interfaces, providing a set of tools (icons) that can trigger actions or open sub-panels.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import { EditComponent } from 'app-studio';
|
|
14
|
+
import { useRef, useState } from 'react';
|
|
15
|
+
|
|
16
|
+
const MyComponent = () => {
|
|
17
|
+
const [target, setTarget] = useState<HTMLElement | null>(null);
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<>
|
|
21
|
+
<div
|
|
22
|
+
onClick={(e) => setTarget(e.currentTarget)}
|
|
23
|
+
style={{ width: 100, height: 100, background: 'red' }}
|
|
24
|
+
>
|
|
25
|
+
Click me
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<EditComponent
|
|
29
|
+
targetElement={target}
|
|
30
|
+
onClose={() => setTarget(null)}
|
|
31
|
+
side="right"
|
|
32
|
+
sideOffset={12}
|
|
33
|
+
variant="floating"
|
|
34
|
+
onToolAction={(toolId) => console.log('Action:', toolId)}
|
|
35
|
+
/>
|
|
36
|
+
</>
|
|
37
|
+
);
|
|
38
|
+
};
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Props
|
|
42
|
+
|
|
43
|
+
| Prop | Type | Default | Description |
|
|
44
|
+
| :--- | :--- | :--- | :--- |
|
|
45
|
+
| `targetElement` | `HTMLElement \| null` | - | The DOM element to which the toolbar should be anchored. If `null`, the component is hidden. |
|
|
46
|
+
| `defaultToolId` | `string` | - | The ID of the tool that should be active/open by default. |
|
|
47
|
+
| `onClose` | `() => void` | - | Callback function triggered when the toolbar or its active panel requests to close. |
|
|
48
|
+
| `side` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'right'` | The preferred side of the target element to place the toolbar. |
|
|
49
|
+
| `sideOffset` | `number` | `12` | The distance (in pixels) between the target element and the toolbar. |
|
|
50
|
+
| `variant` | `'floating' \| 'overlay'` | `'floating'` | The display mode. `'floating'` places the toolbar outside the element, while `'overlay'` positions it inside/on top of the element. |
|
|
51
|
+
| `items` | `ToolbarItem[]` | `[...]` | Configuration for the toolbar items/icons. See `ToolbarItem` definition. |
|
|
52
|
+
| `onToolAction` | `(id: string) => void` | - | Callback triggered when a tool with `actionOnly: true` is clicked. |
|
|
53
|
+
|
|
54
|
+
### ToolbarItem Interface
|
|
55
|
+
|
|
56
|
+
```typescript
|
|
57
|
+
interface ToolbarItem {
|
|
58
|
+
id: string; // Unique identifier for the tool
|
|
59
|
+
icon: string; // Icon name to display
|
|
60
|
+
label?: string; // Optional tooltip label
|
|
61
|
+
special?: boolean; // If true, applies special styling (e.g., dark background)
|
|
62
|
+
actionOnly?: boolean; // If true, clicking triggers onToolAction without opening a panel
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Positioning Behavior
|
|
67
|
+
|
|
68
|
+
The component uses an intelligent positioning system (`useElementPosition`) that tracks the target element's position on scroll and resize.
|
|
69
|
+
|
|
70
|
+
- **Floating**: Attempts to stick to the specified `side`. If there isn't enough space, it may flip or adjust (though currently typically locks to the initial best side upon opening).
|
|
71
|
+
- **Overlay**: Fixed positioning relative to the top-left of the target element (plus offset).
|
|
72
|
+
|
|
73
|
+
## Panels
|
|
74
|
+
|
|
75
|
+
When a tool is selected (and is not `actionOnly`), the `EditComponent` renders an `EditPanel` component. This panel is positioned adjacent to the toolbar based on the toolbar's orientation and position.
|
|
76
|
+
|