@townco/ui 0.1.17 → 0.1.19
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.
- package/dist/core/hooks/use-chat-input.d.ts +17 -17
- package/dist/core/hooks/use-chat-input.js +55 -64
- package/dist/core/hooks/use-chat-messages.js +114 -121
- package/dist/core/hooks/use-chat-session.d.ts +1 -1
- package/dist/core/hooks/use-chat-session.js +80 -78
- package/dist/gui/components/Button.d.ts +7 -23
- package/dist/gui/components/Button.js +27 -40
- package/dist/gui/components/Card.d.ts +7 -26
- package/dist/gui/components/Card.js +8 -54
- package/dist/gui/components/ChatEmptyState.d.ts +18 -0
- package/dist/gui/components/ChatEmptyState.js +22 -0
- package/dist/gui/components/ChatInput.js +29 -1
- package/dist/gui/components/ChatLayout.js +2 -2
- package/dist/gui/components/ChatSecondaryPanel.d.ts +25 -14
- package/dist/gui/components/ChatSecondaryPanel.js +60 -115
- package/dist/gui/components/ChatStatus.d.ts +2 -4
- package/dist/gui/components/ChatStatus.js +34 -45
- package/dist/gui/components/Conversation.d.ts +14 -17
- package/dist/gui/components/Conversation.js +83 -143
- package/dist/gui/components/Dialog.d.ts +11 -57
- package/dist/gui/components/HeightTransition.d.ts +7 -12
- package/dist/gui/components/HeightTransition.js +77 -88
- package/dist/gui/components/Input.d.ts +6 -13
- package/dist/gui/components/Input.js +16 -27
- package/dist/gui/components/Label.d.ts +1 -7
- package/dist/gui/components/MarkdownRenderer.d.ts +4 -6
- package/dist/gui/components/MarkdownRenderer.js +81 -178
- package/dist/gui/components/Message.d.ts +1 -1
- package/dist/gui/components/MessageContent.d.ts +22 -29
- package/dist/gui/components/PanelTabsHeader.d.ts +17 -0
- package/dist/gui/components/PanelTabsHeader.js +31 -0
- package/dist/gui/components/Reasoning.d.ts +24 -30
- package/dist/gui/components/Reasoning.js +60 -187
- package/dist/gui/components/Response.d.ts +9 -11
- package/dist/gui/components/Response.js +90 -229
- package/dist/gui/components/Select.d.ts +10 -69
- package/dist/gui/components/Tabs.d.ts +4 -24
- package/dist/gui/components/Task.d.ts +24 -28
- package/dist/gui/components/Task.js +31 -164
- package/dist/gui/components/Textarea.d.ts +7 -15
- package/dist/gui/components/Textarea.js +46 -63
- package/dist/gui/components/ThinkingBlock.d.ts +10 -20
- package/dist/gui/components/ThinkingBlock.js +35 -134
- package/dist/gui/components/TodoList.d.ts +10 -12
- package/dist/gui/components/TodoList.js +7 -22
- package/dist/gui/components/TodoListItem.d.ts +6 -9
- package/dist/gui/components/TodoListItem.js +4 -18
- package/dist/gui/components/index.d.ts +2 -0
- package/dist/gui/components/index.js +2 -0
- package/dist/gui/lib/utils.js +1 -1
- package/dist/index.test.js +1 -0
- package/dist/sdk/client/acp-client.d.ts +76 -88
- package/dist/sdk/client/acp-client.js +217 -215
- package/dist/sdk/schemas/agent.d.ts +64 -111
- package/dist/sdk/schemas/agent.js +24 -24
- package/dist/sdk/schemas/message.d.ts +147 -245
- package/dist/sdk/schemas/message.js +40 -40
- package/dist/sdk/schemas/session.d.ts +6 -6
- package/dist/sdk/transports/http.d.ts +55 -55
- package/dist/sdk/transports/http.js +3 -3
- package/dist/sdk/transports/stdio.d.ts +20 -20
- package/dist/sdk/transports/types.d.ts +42 -42
- package/dist/sdk/transports/websocket.d.ts +12 -12
- package/dist/sdk/transports/websocket.js +46 -52
- package/dist/tui/components/ChatView.d.ts +2 -4
- package/dist/tui/components/GameOfLife.js +35 -64
- package/dist/tui/components/InputBox.d.ts +11 -18
- package/dist/tui/components/InputBox.js +10 -70
- package/dist/tui/components/ReadlineInput.d.ts +6 -12
- package/dist/tui/components/ReadlineInput.js +237 -252
- package/dist/tui/components/SingleSelect.d.ts +9 -15
- package/dist/tui/components/SingleSelect.js +43 -84
- package/dist/tui/components/StatusBar.d.ts +6 -11
- package/dist/tui/components/StatusBar.js +67 -102
- package/package.json +2 -2
- package/src/styles/global.css +64 -0
- package/dist/core/hooks/index.d.ts.map +0 -1
- package/dist/core/hooks/index.js.map +0 -1
- package/dist/core/hooks/use-chat-input.d.ts.map +0 -1
- package/dist/core/hooks/use-chat-input.js.map +0 -1
- package/dist/core/hooks/use-chat-messages.d.ts.map +0 -1
- package/dist/core/hooks/use-chat-messages.js.map +0 -1
- package/dist/core/hooks/use-chat-session.d.ts.map +0 -1
- package/dist/core/hooks/use-chat-session.js.map +0 -1
- package/dist/core/index.d.ts.map +0 -1
- package/dist/core/index.js.map +0 -1
- package/dist/core/schemas/chat.d.ts.map +0 -1
- package/dist/core/schemas/chat.js.map +0 -1
- package/dist/core/schemas/index.d.ts.map +0 -1
- package/dist/core/schemas/index.js.map +0 -1
- package/dist/core/store/chat-store.d.ts.map +0 -1
- package/dist/core/store/chat-store.js.map +0 -1
- package/dist/gui/components/Button.d.ts.map +0 -1
- package/dist/gui/components/Button.js.map +0 -1
- package/dist/gui/components/Card.d.ts.map +0 -1
- package/dist/gui/components/Card.js.map +0 -1
- package/dist/gui/components/ChatInput.d.ts.map +0 -1
- package/dist/gui/components/ChatInput.js.map +0 -1
- package/dist/gui/components/ChatInterface.d.ts +0 -12
- package/dist/gui/components/ChatInterface.d.ts.map +0 -1
- package/dist/gui/components/ChatInterface.js +0 -204
- package/dist/gui/components/ChatInterface.js.map +0 -1
- package/dist/gui/components/ChatPreview.d.ts +0 -12
- package/dist/gui/components/ChatPreview.d.ts.map +0 -1
- package/dist/gui/components/ChatPreview.js +0 -214
- package/dist/gui/components/ChatPreview.js.map +0 -1
- package/dist/gui/components/ChatSecondaryPanel.d.ts.map +0 -1
- package/dist/gui/components/ChatSecondaryPanel.js.map +0 -1
- package/dist/gui/components/ChatStatus.d.ts.map +0 -1
- package/dist/gui/components/ChatStatus.js.map +0 -1
- package/dist/gui/components/ChatView.d.ts +0 -8
- package/dist/gui/components/ChatView.d.ts.map +0 -1
- package/dist/gui/components/ChatView.js +0 -42
- package/dist/gui/components/ChatView.js.map +0 -1
- package/dist/gui/components/ConfigPanel.d.ts +0 -20
- package/dist/gui/components/ConfigPanel.d.ts.map +0 -1
- package/dist/gui/components/ConfigPanel.js +0 -225
- package/dist/gui/components/ConfigPanel.js.map +0 -1
- package/dist/gui/components/Conversation.d.ts.map +0 -1
- package/dist/gui/components/Conversation.js.map +0 -1
- package/dist/gui/components/Dialog.d.ts.map +0 -1
- package/dist/gui/components/Dialog.js.map +0 -1
- package/dist/gui/components/HeightTransition.d.ts.map +0 -1
- package/dist/gui/components/HeightTransition.js.map +0 -1
- package/dist/gui/components/Input.d.ts.map +0 -1
- package/dist/gui/components/Input.js.map +0 -1
- package/dist/gui/components/InputBox.d.ts +0 -21
- package/dist/gui/components/InputBox.d.ts.map +0 -1
- package/dist/gui/components/InputBox.js +0 -90
- package/dist/gui/components/InputBox.js.map +0 -1
- package/dist/gui/components/Label.d.ts.map +0 -1
- package/dist/gui/components/Label.js.map +0 -1
- package/dist/gui/components/MarkdownRenderer.d.ts.map +0 -1
- package/dist/gui/components/MarkdownRenderer.js.map +0 -1
- package/dist/gui/components/Message.d.ts.map +0 -1
- package/dist/gui/components/Message.js.map +0 -1
- package/dist/gui/components/MessageContent.d.ts.map +0 -1
- package/dist/gui/components/MessageContent.js.map +0 -1
- package/dist/gui/components/MessageList.d.ts.map +0 -1
- package/dist/gui/components/MessageList.js.map +0 -1
- package/dist/gui/components/PlaygroundLayout.d.ts +0 -14
- package/dist/gui/components/PlaygroundLayout.d.ts.map +0 -1
- package/dist/gui/components/PlaygroundLayout.js +0 -49
- package/dist/gui/components/PlaygroundLayout.js.map +0 -1
- package/dist/gui/components/Reasoning.d.ts.map +0 -1
- package/dist/gui/components/Reasoning.js.map +0 -1
- package/dist/gui/components/Response.d.ts.map +0 -1
- package/dist/gui/components/Response.js.map +0 -1
- package/dist/gui/components/Select.d.ts.map +0 -1
- package/dist/gui/components/Select.js.map +0 -1
- package/dist/gui/components/StatusBar.d.ts +0 -12
- package/dist/gui/components/StatusBar.d.ts.map +0 -1
- package/dist/gui/components/StatusBar.js +0 -58
- package/dist/gui/components/StatusBar.js.map +0 -1
- package/dist/gui/components/Tabs.d.ts.map +0 -1
- package/dist/gui/components/Tabs.js.map +0 -1
- package/dist/gui/components/Task.d.ts.map +0 -1
- package/dist/gui/components/Task.js.map +0 -1
- package/dist/gui/components/Textarea.d.ts.map +0 -1
- package/dist/gui/components/Textarea.js.map +0 -1
- package/dist/gui/components/ThinkingBlock.d.ts.map +0 -1
- package/dist/gui/components/ThinkingBlock.js.map +0 -1
- package/dist/gui/components/TodoList.d.ts.map +0 -1
- package/dist/gui/components/TodoList.js.map +0 -1
- package/dist/gui/components/TodoListItem.d.ts.map +0 -1
- package/dist/gui/components/TodoListItem.js.map +0 -1
- package/dist/gui/components/index.d.ts.map +0 -1
- package/dist/gui/components/index.js.map +0 -1
- package/dist/gui/index.d.ts.map +0 -1
- package/dist/gui/index.js.map +0 -1
- package/dist/gui/lib/utils.d.ts.map +0 -1
- package/dist/gui/lib/utils.js.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/sdk/client/acp-client.d.ts.map +0 -1
- package/dist/sdk/client/acp-client.js.map +0 -1
- package/dist/sdk/client/index.d.ts.map +0 -1
- package/dist/sdk/client/index.js.map +0 -1
- package/dist/sdk/index.d.ts.map +0 -1
- package/dist/sdk/index.js.map +0 -1
- package/dist/sdk/schemas/agent.d.ts.map +0 -1
- package/dist/sdk/schemas/agent.js.map +0 -1
- package/dist/sdk/schemas/index.d.ts.map +0 -1
- package/dist/sdk/schemas/index.js.map +0 -1
- package/dist/sdk/schemas/message.d.ts.map +0 -1
- package/dist/sdk/schemas/message.js.map +0 -1
- package/dist/sdk/schemas/session.d.ts.map +0 -1
- package/dist/sdk/schemas/session.js.map +0 -1
- package/dist/sdk/transports/http.d.ts.map +0 -1
- package/dist/sdk/transports/http.js.map +0 -1
- package/dist/sdk/transports/index.d.ts.map +0 -1
- package/dist/sdk/transports/index.js.map +0 -1
- package/dist/sdk/transports/stdio.d.ts.map +0 -1
- package/dist/sdk/transports/stdio.js.map +0 -1
- package/dist/sdk/transports/types.d.ts.map +0 -1
- package/dist/sdk/transports/types.js.map +0 -1
- package/dist/sdk/transports/websocket.d.ts.map +0 -1
- package/dist/sdk/transports/websocket.js.map +0 -1
- package/dist/tui/components/ChatView.d.ts.map +0 -1
- package/dist/tui/components/ChatView.js.map +0 -1
- package/dist/tui/components/GameOfLife.d.ts.map +0 -1
- package/dist/tui/components/GameOfLife.js.map +0 -1
- package/dist/tui/components/InputBox.d.ts.map +0 -1
- package/dist/tui/components/InputBox.js.map +0 -1
- package/dist/tui/components/MessageList.d.ts.map +0 -1
- package/dist/tui/components/MessageList.js.map +0 -1
- package/dist/tui/components/ReadlineInput.d.ts.map +0 -1
- package/dist/tui/components/ReadlineInput.js.map +0 -1
- package/dist/tui/components/StatusBar.d.ts.map +0 -1
- package/dist/tui/components/StatusBar.js.map +0 -1
- package/dist/tui/components/index.d.ts.map +0 -1
- package/dist/tui/components/index.js.map +0 -1
- package/dist/tui/index.d.ts.map +0 -1
- package/dist/tui/index.js.map +0 -1
|
@@ -3,21 +3,18 @@ import * as React from "react";
|
|
|
3
3
|
* Conversation component inspired by shadcn.io/ai
|
|
4
4
|
* Auto-scrolling chat container that maintains scroll position during streaming
|
|
5
5
|
*/
|
|
6
|
-
export interface ConversationProps
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
scrollButton?: React.ReactNode;
|
|
6
|
+
export interface ConversationProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
7
|
+
/** Whether to auto-scroll to bottom on new messages */
|
|
8
|
+
autoScroll?: boolean;
|
|
9
|
+
/** Whether content is currently streaming */
|
|
10
|
+
isStreaming?: boolean;
|
|
11
|
+
/** Scroll behavior type */
|
|
12
|
+
scrollBehavior?: ScrollBehavior;
|
|
13
|
+
/** Threshold for considering user at bottom (px from bottom) */
|
|
14
|
+
scrollThreshold?: number;
|
|
15
|
+
/** Show scroll-to-bottom button when not at bottom */
|
|
16
|
+
showScrollButton?: boolean;
|
|
17
|
+
/** Custom scroll button */
|
|
18
|
+
scrollButton?: React.ReactNode;
|
|
20
19
|
}
|
|
21
|
-
export declare const Conversation: React.ForwardRefExoticComponent<
|
|
22
|
-
ConversationProps & React.RefAttributes<HTMLDivElement>
|
|
23
|
-
>;
|
|
20
|
+
export declare const Conversation: React.ForwardRefExoticComponent<ConversationProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,147 +1,87 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
export const Conversation = React.forwardRef(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
if (isNearBottom && autoScroll) {
|
|
88
|
-
scrollToBottom("auto");
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
|
-
resizeObserver.observe(container);
|
|
92
|
-
return () => {
|
|
93
|
-
resizeObserver.disconnect();
|
|
94
|
-
};
|
|
95
|
-
}, [isNearBottom, autoScroll, scrollToBottom]);
|
|
96
|
-
return _jsxs("div", {
|
|
97
|
-
className: "relative flex-1",
|
|
98
|
-
children: [
|
|
99
|
-
_jsx("div", {
|
|
100
|
-
ref: containerRef,
|
|
101
|
-
className: cn(
|
|
102
|
-
"h-full overflow-y-auto overflow-x-hidden",
|
|
103
|
-
"scrollbar-thin scrollbar-thumb-[border] scrollbar-track-transparent",
|
|
104
|
-
className,
|
|
105
|
-
),
|
|
106
|
-
...props,
|
|
107
|
-
children: _jsx("div", {
|
|
108
|
-
className: "flex flex-col gap-4 px-4 py-4",
|
|
109
|
-
children: children,
|
|
110
|
-
}),
|
|
111
|
-
}),
|
|
112
|
-
showButton &&
|
|
113
|
-
_jsx("div", {
|
|
114
|
-
className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10",
|
|
115
|
-
children:
|
|
116
|
-
scrollButton ||
|
|
117
|
-
_jsxs("button", {
|
|
118
|
-
type: "button",
|
|
119
|
-
onClick: () => scrollToBottom(),
|
|
120
|
-
className:
|
|
121
|
-
"px-4 py-2 rounded-full bg-card border border-border shadow-lg hover:shadow-xl hover:bg-card/90 transition-all text-sm font-medium text-foreground flex items-center gap-2",
|
|
122
|
-
"aria-label": "Scroll to bottom",
|
|
123
|
-
children: [
|
|
124
|
-
_jsx("svg", {
|
|
125
|
-
className: "w-4 h-4",
|
|
126
|
-
fill: "none",
|
|
127
|
-
stroke: "currentColor",
|
|
128
|
-
viewBox: "0 0 24 24",
|
|
129
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
130
|
-
role: "img",
|
|
131
|
-
"aria-label": "Down arrow",
|
|
132
|
-
children: _jsx("path", {
|
|
133
|
-
strokeLinecap: "round",
|
|
134
|
-
strokeLinejoin: "round",
|
|
135
|
-
strokeWidth: 2,
|
|
136
|
-
d: "M19 14l-7 7m0 0l-7-7m7 7V3",
|
|
137
|
-
}),
|
|
138
|
-
}),
|
|
139
|
-
"Scroll to bottom",
|
|
140
|
-
],
|
|
141
|
-
}),
|
|
142
|
-
}),
|
|
143
|
-
],
|
|
144
|
-
});
|
|
145
|
-
},
|
|
146
|
-
);
|
|
5
|
+
export const Conversation = React.forwardRef(({ autoScroll = true, isStreaming = false, scrollBehavior = "smooth", scrollThreshold = 100, showScrollButton = true, scrollButton, className, children, ...props }, ref) => {
|
|
6
|
+
const containerRef = useRef(null);
|
|
7
|
+
const [isNearBottom, setIsNearBottom] = useState(true);
|
|
8
|
+
const [showButton, setShowButton] = useState(false);
|
|
9
|
+
const lastScrollTopRef = useRef(0);
|
|
10
|
+
// Combine refs
|
|
11
|
+
React.useImperativeHandle(ref, () => {
|
|
12
|
+
if (!containerRef.current) {
|
|
13
|
+
throw new Error("Container ref not initialized");
|
|
14
|
+
}
|
|
15
|
+
return containerRef.current;
|
|
16
|
+
});
|
|
17
|
+
// Check if user is near bottom of scroll area
|
|
18
|
+
const checkScrollPosition = useCallback(() => {
|
|
19
|
+
const container = containerRef.current;
|
|
20
|
+
if (!container)
|
|
21
|
+
return;
|
|
22
|
+
const { scrollTop, scrollHeight, clientHeight } = container;
|
|
23
|
+
const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
|
|
24
|
+
const nearBottom = distanceFromBottom < scrollThreshold;
|
|
25
|
+
setIsNearBottom(nearBottom);
|
|
26
|
+
setShowButton(!nearBottom && showScrollButton);
|
|
27
|
+
lastScrollTopRef.current = scrollTop;
|
|
28
|
+
}, [scrollThreshold, showScrollButton]);
|
|
29
|
+
// Scroll to bottom
|
|
30
|
+
const scrollToBottom = useCallback((behavior = scrollBehavior) => {
|
|
31
|
+
const container = containerRef.current;
|
|
32
|
+
if (!container)
|
|
33
|
+
return;
|
|
34
|
+
container.scrollTo({
|
|
35
|
+
top: container.scrollHeight,
|
|
36
|
+
behavior,
|
|
37
|
+
});
|
|
38
|
+
}, [scrollBehavior]);
|
|
39
|
+
// Auto-scroll when new content appears and user is near bottom
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (!autoScroll)
|
|
42
|
+
return;
|
|
43
|
+
const container = containerRef.current;
|
|
44
|
+
if (!container)
|
|
45
|
+
return;
|
|
46
|
+
// Always scroll during streaming if user is near bottom
|
|
47
|
+
if (isStreaming && isNearBottom) {
|
|
48
|
+
scrollToBottom("auto");
|
|
49
|
+
}
|
|
50
|
+
// Scroll on new messages if near bottom
|
|
51
|
+
else if (!isStreaming && isNearBottom) {
|
|
52
|
+
scrollToBottom();
|
|
53
|
+
}
|
|
54
|
+
}, [autoScroll, isStreaming, isNearBottom, scrollToBottom]);
|
|
55
|
+
// Set up scroll listener
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
const container = containerRef.current;
|
|
58
|
+
if (!container)
|
|
59
|
+
return;
|
|
60
|
+
const handleScroll = () => {
|
|
61
|
+
checkScrollPosition();
|
|
62
|
+
};
|
|
63
|
+
container.addEventListener("scroll", handleScroll, { passive: true });
|
|
64
|
+
// Check initial position
|
|
65
|
+
checkScrollPosition();
|
|
66
|
+
return () => {
|
|
67
|
+
container.removeEventListener("scroll", handleScroll);
|
|
68
|
+
};
|
|
69
|
+
}, [checkScrollPosition]);
|
|
70
|
+
// Watch for resize events
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
const container = containerRef.current;
|
|
73
|
+
if (!container)
|
|
74
|
+
return;
|
|
75
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
76
|
+
if (isNearBottom && autoScroll) {
|
|
77
|
+
scrollToBottom("auto");
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
resizeObserver.observe(container);
|
|
81
|
+
return () => {
|
|
82
|
+
resizeObserver.disconnect();
|
|
83
|
+
};
|
|
84
|
+
}, [isNearBottom, autoScroll, scrollToBottom]);
|
|
85
|
+
return (_jsxs("div", { className: "relative flex-1", children: [_jsx("div", { ref: containerRef, className: cn("h-full overflow-y-auto overflow-x-hidden", "scrollbar-thin scrollbar-thumb-[border] scrollbar-track-transparent", className), ...props, children: _jsx("div", { className: "flex flex-col gap-4 px-4 py-4", children: children }) }), showButton && (_jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: scrollButton || (_jsxs("button", { type: "button", onClick: () => scrollToBottom(), className: "px-4 py-2 rounded-full bg-card border border-border shadow-lg hover:shadow-xl hover:bg-card/90 transition-all text-sm font-medium text-foreground flex items-center gap-2", "aria-label": "Scroll to bottom", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Down arrow", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }), "Scroll to bottom"] })) }))] }));
|
|
86
|
+
});
|
|
147
87
|
Conversation.displayName = "Conversation";
|
|
@@ -1,65 +1,19 @@
|
|
|
1
1
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
4
|
-
declare const DialogTrigger: React.ForwardRefExoticComponent<
|
|
5
|
-
DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>
|
|
6
|
-
>;
|
|
4
|
+
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
5
|
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
8
|
-
declare const DialogClose: React.ForwardRefExoticComponent<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
declare const DialogOverlay: React.ForwardRefExoticComponent<
|
|
12
|
-
Omit<
|
|
13
|
-
DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>,
|
|
14
|
-
"ref"
|
|
15
|
-
> &
|
|
16
|
-
React.RefAttributes<HTMLDivElement>
|
|
17
|
-
>;
|
|
18
|
-
declare const DialogContent: React.ForwardRefExoticComponent<
|
|
19
|
-
Omit<
|
|
20
|
-
DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>,
|
|
21
|
-
"ref"
|
|
22
|
-
> &
|
|
23
|
-
React.RefAttributes<HTMLDivElement>
|
|
24
|
-
>;
|
|
6
|
+
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
25
9
|
declare const DialogHeader: {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
...props
|
|
29
|
-
}: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
30
|
-
displayName: string;
|
|
10
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
displayName: string;
|
|
31
12
|
};
|
|
32
13
|
declare const DialogFooter: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
...props
|
|
36
|
-
}: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
37
|
-
displayName: string;
|
|
38
|
-
};
|
|
39
|
-
declare const DialogTitle: React.ForwardRefExoticComponent<
|
|
40
|
-
Omit<
|
|
41
|
-
DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>,
|
|
42
|
-
"ref"
|
|
43
|
-
> &
|
|
44
|
-
React.RefAttributes<HTMLHeadingElement>
|
|
45
|
-
>;
|
|
46
|
-
declare const DialogDescription: React.ForwardRefExoticComponent<
|
|
47
|
-
Omit<
|
|
48
|
-
DialogPrimitive.DialogDescriptionProps &
|
|
49
|
-
React.RefAttributes<HTMLParagraphElement>,
|
|
50
|
-
"ref"
|
|
51
|
-
> &
|
|
52
|
-
React.RefAttributes<HTMLParagraphElement>
|
|
53
|
-
>;
|
|
54
|
-
export {
|
|
55
|
-
Dialog,
|
|
56
|
-
DialogPortal,
|
|
57
|
-
DialogOverlay,
|
|
58
|
-
DialogClose,
|
|
59
|
-
DialogTrigger,
|
|
60
|
-
DialogContent,
|
|
61
|
-
DialogHeader,
|
|
62
|
-
DialogFooter,
|
|
63
|
-
DialogTitle,
|
|
64
|
-
DialogDescription,
|
|
14
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
displayName: string;
|
|
65
16
|
};
|
|
17
|
+
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
18
|
+
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
19
|
+
export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
|
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
2
|
interface HeightTransitionProps {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
durationMs?: number;
|
|
5
|
+
easing?: string;
|
|
6
|
+
pinContentTo?: "top" | "bottom";
|
|
7
|
+
className?: string;
|
|
8
8
|
}
|
|
9
|
-
export declare function HeightTransition({
|
|
10
|
-
|
|
11
|
-
durationMs,
|
|
12
|
-
easing,
|
|
13
|
-
pinContentTo,
|
|
14
|
-
className,
|
|
15
|
-
}: HeightTransitionProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function HeightTransition({ children, durationMs, easing, pinContentTo, className, }: HeightTransitionProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -1,91 +1,80 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef } from "react";
|
|
2
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useRef } from "react";
|
|
3
3
|
import { cn } from "../lib/utils.js";
|
|
4
|
-
export function HeightTransition({
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}, [onEndTransition, transitionTo]);
|
|
81
|
-
return _jsx("div", {
|
|
82
|
-
ref: containerRef,
|
|
83
|
-
className: cn("overflow-hidden relative", className),
|
|
84
|
-
style: { willChange: "height" },
|
|
85
|
-
children: _jsx("div", {
|
|
86
|
-
ref: contentRef,
|
|
87
|
-
className: "w-full",
|
|
88
|
-
children: children,
|
|
89
|
-
}),
|
|
90
|
-
});
|
|
4
|
+
export function HeightTransition({ children, durationMs = 320, easing = "ease", pinContentTo = "top", className, }) {
|
|
5
|
+
const containerRef = useRef(null);
|
|
6
|
+
const contentRef = useRef(null);
|
|
7
|
+
const prevHeightRef = useRef(null);
|
|
8
|
+
const isAnimatingRef = useRef(false);
|
|
9
|
+
const durationRef = useRef(durationMs);
|
|
10
|
+
const easingRef = useRef(easing);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
durationRef.current = durationMs;
|
|
13
|
+
easingRef.current = easing;
|
|
14
|
+
}, [durationMs, easing]);
|
|
15
|
+
const transitionTo = useCallback((next) => {
|
|
16
|
+
const el = containerRef.current;
|
|
17
|
+
const contentEl = contentRef.current;
|
|
18
|
+
if (!el || !contentEl)
|
|
19
|
+
return;
|
|
20
|
+
const prev = prevHeightRef.current ?? el.getBoundingClientRect().height;
|
|
21
|
+
if (Math.abs(prev - next) < 0.5) {
|
|
22
|
+
prevHeightRef.current = next;
|
|
23
|
+
el.style.height = `${next}px`;
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
if (isAnimatingRef.current)
|
|
27
|
+
return;
|
|
28
|
+
isAnimatingRef.current = true;
|
|
29
|
+
el.style.transition = "none";
|
|
30
|
+
el.style.height = `${prev}px`;
|
|
31
|
+
void el.getBoundingClientRect();
|
|
32
|
+
el.style.transition = `height ${durationRef.current}ms ${easingRef.current}`;
|
|
33
|
+
el.style.height = `${next}px`;
|
|
34
|
+
contentEl.style.position = "absolute";
|
|
35
|
+
if (pinContentTo === "top") {
|
|
36
|
+
contentEl.style.top = "0";
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
contentEl.style.bottom = "0";
|
|
40
|
+
}
|
|
41
|
+
prevHeightRef.current = next;
|
|
42
|
+
}, [pinContentTo]);
|
|
43
|
+
const onEndTransition = useCallback((e) => {
|
|
44
|
+
const el = containerRef.current;
|
|
45
|
+
const contentEl = contentRef.current;
|
|
46
|
+
if (!el || !contentEl)
|
|
47
|
+
return;
|
|
48
|
+
if (e.propertyName !== "height")
|
|
49
|
+
return;
|
|
50
|
+
if (e.target !== el)
|
|
51
|
+
return;
|
|
52
|
+
el.style.transition = "";
|
|
53
|
+
el.style.height = `auto`;
|
|
54
|
+
contentEl.style.removeProperty("position");
|
|
55
|
+
contentEl.style.removeProperty("top");
|
|
56
|
+
contentEl.style.removeProperty("bottom");
|
|
57
|
+
isAnimatingRef.current = false;
|
|
58
|
+
}, []);
|
|
59
|
+
// Observe intrinsic content height changes and animate container height accordingly
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
const el = containerRef.current;
|
|
62
|
+
const contentEl = contentRef.current;
|
|
63
|
+
if (!el || !contentEl)
|
|
64
|
+
return;
|
|
65
|
+
const initial = contentEl.scrollHeight;
|
|
66
|
+
prevHeightRef.current = initial;
|
|
67
|
+
const ro = new ResizeObserver(() => {
|
|
68
|
+
const next = contentEl.scrollHeight;
|
|
69
|
+
transitionTo(next);
|
|
70
|
+
});
|
|
71
|
+
ro.observe(contentEl);
|
|
72
|
+
el.addEventListener("transitionend", onEndTransition);
|
|
73
|
+
return () => {
|
|
74
|
+
ro.disconnect();
|
|
75
|
+
el.removeEventListener("transitionend", onEndTransition);
|
|
76
|
+
};
|
|
77
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
78
|
+
}, [onEndTransition, transitionTo]);
|
|
79
|
+
return (_jsx("div", { ref: containerRef, className: cn("overflow-hidden relative", className), style: { willChange: "height" }, children: _jsx("div", { ref: contentRef, className: "w-full", children: children }) }));
|
|
91
80
|
}
|
|
@@ -1,16 +1,9 @@
|
|
|
1
1
|
import { type VariantProps } from "class-variance-authority";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
declare const inputVariants: (
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
) => string;
|
|
10
|
-
export interface InputProps
|
|
11
|
-
extends React.InputHTMLAttributes<HTMLInputElement>,
|
|
12
|
-
VariantProps<typeof inputVariants> {}
|
|
13
|
-
declare const Input: React.ForwardRefExoticComponent<
|
|
14
|
-
InputProps & React.RefAttributes<HTMLInputElement>
|
|
15
|
-
>;
|
|
3
|
+
declare const inputVariants: (props?: ({
|
|
4
|
+
variant?: "success" | "default" | "error" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
|
|
7
|
+
}
|
|
8
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
16
9
|
export { Input, inputVariants };
|
|
@@ -1,32 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
2
|
import { cva } from "class-variance-authority";
|
|
2
3
|
import * as React from "react";
|
|
3
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
);
|
|
21
|
-
const Input = React.forwardRef(
|
|
22
|
-
({ className, type, variant, ...props }, ref) => {
|
|
23
|
-
return _jsx("input", {
|
|
24
|
-
type: type,
|
|
25
|
-
className: cn(inputVariants({ variant, className })),
|
|
26
|
-
ref: ref,
|
|
27
|
-
...props,
|
|
28
|
-
});
|
|
29
|
-
},
|
|
30
|
-
);
|
|
5
|
+
const inputVariants = cva("flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
|
|
6
|
+
variants: {
|
|
7
|
+
variant: {
|
|
8
|
+
default: "border-input focus-visible:ring-ring",
|
|
9
|
+
error: "border-destructive focus-visible:ring-destructive",
|
|
10
|
+
success: "border-green-500 focus-visible:ring-green-500",
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
defaultVariants: {
|
|
14
|
+
variant: "default",
|
|
15
|
+
},
|
|
16
|
+
});
|
|
17
|
+
const Input = React.forwardRef(({ className, type, variant, ...props }, ref) => {
|
|
18
|
+
return (_jsx("input", { type: type, className: cn(inputVariants({ variant, className })), ref: ref, ...props }));
|
|
19
|
+
});
|
|
31
20
|
Input.displayName = "Input";
|
|
32
21
|
export { Input, inputVariants };
|
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
declare const Label: React.ForwardRefExoticComponent<
|
|
4
|
-
Omit<
|
|
5
|
-
LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>,
|
|
6
|
-
"ref"
|
|
7
|
-
> &
|
|
8
|
-
React.RefAttributes<HTMLLabelElement>
|
|
9
|
-
>;
|
|
3
|
+
declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
|
|
10
4
|
export { Label };
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
interface MarkdownRendererProps {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
content: string;
|
|
3
|
+
className?: string;
|
|
4
4
|
}
|
|
5
|
-
export declare function MarkdownRenderer({
|
|
6
|
-
|
|
7
|
-
className,
|
|
8
|
-
}: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element | null;
|
|
5
|
+
export declare function MarkdownRenderer({ content, className, }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element | null;
|
|
6
|
+
export {};
|