@townco/ui 0.1.0 → 0.1.6
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 +64 -55
- package/dist/core/hooks/use-chat-messages.d.ts +11 -11
- package/dist/core/hooks/use-chat-messages.js +121 -114
- package/dist/core/hooks/use-chat-session.d.ts +5 -5
- package/dist/core/hooks/use-chat-session.js +78 -80
- package/dist/core/hooks/use-media-query.d.ts +5 -5
- package/dist/core/hooks/use-media-query.js +38 -38
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.js +1 -1
- package/dist/core/schemas/chat.d.ts +83 -56
- package/dist/core/schemas/chat.js +27 -25
- package/dist/core/store/chat-store.d.ts +28 -22
- package/dist/core/store/chat-store.js +59 -50
- package/dist/gui/components/Button.d.ts +23 -7
- package/dist/gui/components/Button.js +40 -27
- package/dist/gui/components/Card.d.ts +26 -7
- package/dist/gui/components/Card.js +54 -8
- package/dist/gui/components/ChatHeader.d.ts +58 -31
- package/dist/gui/components/ChatHeader.js +171 -66
- package/dist/gui/components/ChatInput.d.ts +58 -36
- package/dist/gui/components/ChatInput.js +191 -121
- package/dist/gui/components/ChatInterface.d.ts +9 -6
- package/dist/gui/components/ChatInterface.js +162 -90
- package/dist/gui/components/ChatLayout.d.ts +71 -41
- package/dist/gui/components/ChatLayout.js +214 -87
- package/dist/gui/components/ChatPanelTabContent.d.ts +18 -9
- package/dist/gui/components/ChatPanelTabContent.js +88 -10
- package/dist/gui/components/ChatPreview.d.ts +9 -6
- package/dist/gui/components/ChatPreview.js +212 -162
- package/dist/gui/components/ChatSecondaryPanel.d.ts +14 -11
- package/dist/gui/components/ChatSecondaryPanel.js +115 -38
- package/dist/gui/components/ChatSidebar.d.ts +26 -13
- package/dist/gui/components/ChatSidebar.js +48 -14
- package/dist/gui/components/ChatStatus.d.ts +4 -2
- package/dist/gui/components/ChatStatus.js +45 -34
- package/dist/gui/components/ChatView.d.ts +5 -3
- package/dist/gui/components/ChatView.js +38 -9
- package/dist/gui/components/ConfigPanel.d.ts +16 -12
- package/dist/gui/components/ConfigPanel.js +218 -41
- package/dist/gui/components/Conversation.d.ts +17 -14
- package/dist/gui/components/Conversation.js +143 -83
- package/dist/gui/components/Dialog.d.ts +57 -11
- package/dist/gui/components/Dialog.js +84 -8
- package/dist/gui/components/DropdownMenu.d.ts +101 -20
- package/dist/gui/components/DropdownMenu.js +161 -14
- package/dist/gui/components/HeightTransition.d.ts +12 -7
- package/dist/gui/components/HeightTransition.js +88 -77
- package/dist/gui/components/Input.d.ts +13 -6
- package/dist/gui/components/Input.js +27 -16
- package/dist/gui/components/InputBox.d.ts +19 -12
- package/dist/gui/components/InputBox.js +86 -14
- package/dist/gui/components/Label.d.ts +7 -1
- package/dist/gui/components/Label.js +12 -2
- package/dist/gui/components/MarkdownRenderer.d.ts +6 -4
- package/dist/gui/components/MarkdownRenderer.js +178 -81
- package/dist/gui/components/Message.d.ts +25 -18
- package/dist/gui/components/Message.js +44 -23
- package/dist/gui/components/MessageContent.d.ts +29 -22
- package/dist/gui/components/MessageContent.js +157 -85
- package/dist/gui/components/PlaygroundLayout.d.ts +9 -5
- package/dist/gui/components/PlaygroundLayout.js +43 -12
- package/dist/gui/components/Reasoning.d.ts +30 -24
- package/dist/gui/components/Reasoning.js +187 -60
- package/dist/gui/components/Response.d.ts +11 -9
- package/dist/gui/components/Response.js +229 -90
- package/dist/gui/components/Select.d.ts +69 -10
- package/dist/gui/components/Select.js +118 -12
- package/dist/gui/components/Sonner.d.ts +3 -1
- package/dist/gui/components/Sonner.js +29 -18
- package/dist/gui/components/StatusBar.d.ts +9 -5
- package/dist/gui/components/StatusBar.js +56 -9
- package/dist/gui/components/Tabs.d.ts +24 -4
- package/dist/gui/components/Tabs.js +32 -4
- package/dist/gui/components/Task.d.ts +28 -24
- package/dist/gui/components/Task.js +164 -31
- package/dist/gui/components/Textarea.d.ts +15 -7
- package/dist/gui/components/Textarea.js +63 -46
- package/dist/gui/components/ThinkingBlock.d.ts +20 -10
- package/dist/gui/components/ThinkingBlock.js +134 -35
- package/dist/gui/components/TodoList.d.ts +12 -10
- package/dist/gui/components/TodoList.js +22 -7
- package/dist/gui/components/TodoListItem.d.ts +9 -6
- package/dist/gui/components/TodoListItem.js +18 -4
- package/dist/gui/components/index.d.ts +59 -8
- package/dist/gui/components/index.js +42 -8
- package/dist/gui/lib/utils.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.test.js +0 -1
- package/dist/sdk/client/acp-client.d.ts +88 -76
- package/dist/sdk/client/acp-client.js +215 -217
- package/dist/sdk/index.d.ts +1 -1
- package/dist/sdk/index.js +1 -1
- package/dist/sdk/schemas/agent.d.ts +111 -64
- package/dist/sdk/schemas/agent.js +24 -24
- package/dist/sdk/schemas/message.d.ts +245 -147
- package/dist/sdk/schemas/message.js +40 -40
- package/dist/sdk/schemas/session.d.ts +219 -135
- package/dist/sdk/schemas/session.js +27 -27
- package/dist/sdk/transports/http.d.ts +55 -55
- package/dist/sdk/transports/http.js +472 -469
- package/dist/sdk/transports/stdio.d.ts +20 -20
- package/dist/sdk/transports/stdio.js +289 -286
- package/dist/sdk/transports/types.d.ts +42 -42
- package/dist/sdk/transports/websocket.d.ts +12 -12
- package/dist/sdk/transports/websocket.js +52 -46
- package/dist/tui/components/ChatView.d.ts +4 -2
- package/dist/tui/components/ChatView.js +51 -18
- package/dist/tui/components/GameOfLife.js +64 -35
- package/dist/tui/components/InputBox.d.ts +18 -11
- package/dist/tui/components/InputBox.js +70 -10
- package/dist/tui/components/MessageList.d.ts +4 -2
- package/dist/tui/components/MessageList.js +37 -10
- package/dist/tui/components/MultiSelect.d.ts +15 -9
- package/dist/tui/components/MultiSelect.js +116 -69
- package/dist/tui/components/ReadlineInput.d.ts +12 -6
- package/dist/tui/components/ReadlineInput.js +252 -237
- package/dist/tui/components/SingleSelect.d.ts +15 -9
- package/dist/tui/components/SingleSelect.js +84 -43
- package/dist/tui/components/StatusBar.d.ts +11 -6
- package/dist/tui/components/StatusBar.js +102 -67
- package/dist/tui/index.d.ts +1 -1
- package/dist/tui/index.js +1 -1
- package/package.json +2 -3
|
@@ -2,51 +2,81 @@ import * as React from "react";
|
|
|
2
2
|
type PanelSize = "hidden" | "small" | "large";
|
|
3
3
|
type PanelTabType = "todo" | "files" | "database";
|
|
4
4
|
interface ChatLayoutContextValue {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
sidebarOpen: boolean;
|
|
6
|
+
setSidebarOpen: (open: boolean) => void;
|
|
7
|
+
panelSize: PanelSize;
|
|
8
|
+
setPanelSize: (size: PanelSize) => void;
|
|
9
|
+
activeTab: PanelTabType;
|
|
10
|
+
setActiveTab: (tab: PanelTabType) => void;
|
|
11
11
|
}
|
|
12
12
|
declare const useChatLayoutContext: () => ChatLayoutContextValue;
|
|
13
|
-
export interface ChatLayoutRootProps
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
export interface ChatLayoutRootProps
|
|
14
|
+
extends React.HTMLAttributes<HTMLDivElement> {
|
|
15
|
+
/** Initial sidebar open state */
|
|
16
|
+
defaultSidebarOpen?: boolean;
|
|
17
|
+
/** Initial panel size state */
|
|
18
|
+
defaultPanelSize?: PanelSize;
|
|
19
|
+
/** Initial active tab */
|
|
20
|
+
defaultActiveTab?: PanelTabType;
|
|
20
21
|
}
|
|
21
|
-
declare const ChatLayoutRoot: React.ForwardRefExoticComponent<
|
|
22
|
-
|
|
22
|
+
declare const ChatLayoutRoot: React.ForwardRefExoticComponent<
|
|
23
|
+
ChatLayoutRootProps & React.RefAttributes<HTMLDivElement>
|
|
24
|
+
>;
|
|
25
|
+
export interface ChatLayoutHeaderProps
|
|
26
|
+
extends React.HTMLAttributes<HTMLDivElement> {}
|
|
27
|
+
declare const ChatLayoutHeader: React.ForwardRefExoticComponent<
|
|
28
|
+
ChatLayoutHeaderProps & React.RefAttributes<HTMLDivElement>
|
|
29
|
+
>;
|
|
30
|
+
export interface ChatLayoutMainProps
|
|
31
|
+
extends React.HTMLAttributes<HTMLDivElement> {}
|
|
32
|
+
declare const ChatLayoutMain: React.ForwardRefExoticComponent<
|
|
33
|
+
ChatLayoutMainProps & React.RefAttributes<HTMLDivElement>
|
|
34
|
+
>;
|
|
35
|
+
export interface ChatLayoutBodyProps
|
|
36
|
+
extends React.HTMLAttributes<HTMLDivElement> {
|
|
37
|
+
/** Whether to show toaster */
|
|
38
|
+
showToaster?: boolean;
|
|
23
39
|
}
|
|
24
|
-
declare const
|
|
25
|
-
|
|
40
|
+
declare const ChatLayoutBody: React.ForwardRefExoticComponent<
|
|
41
|
+
ChatLayoutBodyProps & React.RefAttributes<HTMLDivElement>
|
|
42
|
+
>;
|
|
43
|
+
export interface ChatLayoutMessagesProps
|
|
44
|
+
extends React.HTMLAttributes<HTMLDivElement> {
|
|
45
|
+
/** Callback when scroll position changes */
|
|
46
|
+
onScrollChange?: (isAtBottom: boolean) => void;
|
|
47
|
+
/** Whether to show scroll to bottom button */
|
|
48
|
+
showScrollToBottom?: boolean;
|
|
26
49
|
}
|
|
27
|
-
declare const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
50
|
+
declare const ChatLayoutMessages: React.ForwardRefExoticComponent<
|
|
51
|
+
ChatLayoutMessagesProps & React.RefAttributes<HTMLDivElement>
|
|
52
|
+
>;
|
|
53
|
+
export interface ChatLayoutFooterProps
|
|
54
|
+
extends React.HTMLAttributes<HTMLDivElement> {}
|
|
55
|
+
declare const ChatLayoutFooter: React.ForwardRefExoticComponent<
|
|
56
|
+
ChatLayoutFooterProps & React.RefAttributes<HTMLDivElement>
|
|
57
|
+
>;
|
|
58
|
+
export interface ChatLayoutSidebarProps
|
|
59
|
+
extends React.HTMLAttributes<HTMLDivElement> {}
|
|
60
|
+
declare const ChatLayoutSidebar: React.ForwardRefExoticComponent<
|
|
61
|
+
ChatLayoutSidebarProps & React.RefAttributes<HTMLDivElement>
|
|
62
|
+
>;
|
|
63
|
+
export interface ChatLayoutAsideProps
|
|
64
|
+
extends React.HTMLAttributes<HTMLDivElement> {
|
|
65
|
+
/** Show panel on these breakpoints (default: lg and above) */
|
|
66
|
+
breakpoint?: "md" | "lg" | "xl" | "2xl";
|
|
31
67
|
}
|
|
32
|
-
declare const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
export interface ChatLayoutAsideProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
47
|
-
/** Show panel on these breakpoints (default: lg and above) */
|
|
48
|
-
breakpoint?: "md" | "lg" | "xl" | "2xl";
|
|
49
|
-
}
|
|
50
|
-
declare const ChatLayoutAside: React.ForwardRefExoticComponent<ChatLayoutAsideProps & React.RefAttributes<HTMLDivElement>>;
|
|
51
|
-
export { ChatLayoutRoot as Root, ChatLayoutHeader as Header, ChatLayoutMain as Main, ChatLayoutBody as Body, ChatLayoutMessages as Messages, ChatLayoutFooter as Footer, ChatLayoutSidebar as Sidebar, ChatLayoutAside as Aside, useChatLayoutContext, };
|
|
68
|
+
declare const ChatLayoutAside: React.ForwardRefExoticComponent<
|
|
69
|
+
ChatLayoutAsideProps & React.RefAttributes<HTMLDivElement>
|
|
70
|
+
>;
|
|
71
|
+
export {
|
|
72
|
+
ChatLayoutRoot as Root,
|
|
73
|
+
ChatLayoutHeader as Header,
|
|
74
|
+
ChatLayoutMain as Main,
|
|
75
|
+
ChatLayoutBody as Body,
|
|
76
|
+
ChatLayoutMessages as Messages,
|
|
77
|
+
ChatLayoutFooter as Footer,
|
|
78
|
+
ChatLayoutSidebar as Sidebar,
|
|
79
|
+
ChatLayoutAside as Aside,
|
|
80
|
+
useChatLayoutContext,
|
|
81
|
+
};
|
|
52
82
|
export type { PanelSize, PanelTabType };
|
|
@@ -1,105 +1,232 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
1
|
import { ArrowDown } from "lucide-react";
|
|
3
2
|
import * as React from "react";
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
5
|
import { Toaster } from "./Sonner.js";
|
|
6
|
+
|
|
6
7
|
const ChatLayoutContext = React.createContext(undefined);
|
|
7
8
|
const useChatLayoutContext = () => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
const context = React.useContext(ChatLayoutContext);
|
|
10
|
+
if (!context) {
|
|
11
|
+
throw new Error(
|
|
12
|
+
"ChatLayout components must be used within ChatLayout.Root",
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
return context;
|
|
13
16
|
};
|
|
14
|
-
const ChatLayoutRoot = React.forwardRef(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
const ChatLayoutRoot = React.forwardRef(
|
|
18
|
+
(
|
|
19
|
+
{
|
|
20
|
+
defaultSidebarOpen = false,
|
|
21
|
+
defaultPanelSize = "hidden",
|
|
22
|
+
defaultActiveTab = "todo",
|
|
23
|
+
className,
|
|
24
|
+
children,
|
|
25
|
+
...props
|
|
26
|
+
},
|
|
27
|
+
ref,
|
|
28
|
+
) => {
|
|
29
|
+
const [sidebarOpen, setSidebarOpen] = React.useState(defaultSidebarOpen);
|
|
30
|
+
const [panelSize, setPanelSize] = React.useState(defaultPanelSize);
|
|
31
|
+
const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
|
|
32
|
+
return _jsx(ChatLayoutContext.Provider, {
|
|
33
|
+
value: {
|
|
34
|
+
sidebarOpen,
|
|
35
|
+
setSidebarOpen,
|
|
36
|
+
panelSize,
|
|
37
|
+
setPanelSize,
|
|
38
|
+
activeTab,
|
|
39
|
+
setActiveTab,
|
|
40
|
+
},
|
|
41
|
+
children: _jsx("div", {
|
|
42
|
+
ref: ref,
|
|
43
|
+
className: cn(
|
|
44
|
+
"flex h-screen flex-row bg-background text-foreground",
|
|
45
|
+
className,
|
|
46
|
+
),
|
|
47
|
+
...props,
|
|
48
|
+
children: children,
|
|
49
|
+
}),
|
|
50
|
+
});
|
|
51
|
+
},
|
|
52
|
+
);
|
|
27
53
|
ChatLayoutRoot.displayName = "ChatLayout.Root";
|
|
28
|
-
const ChatLayoutHeader = React.forwardRef(
|
|
29
|
-
|
|
30
|
-
|
|
54
|
+
const ChatLayoutHeader = React.forwardRef(
|
|
55
|
+
({ className, children, ...props }, ref) => {
|
|
56
|
+
return _jsx("div", {
|
|
57
|
+
ref: ref,
|
|
58
|
+
className: cn(
|
|
59
|
+
"relative z-10 border-b border-border bg-card shrink-0",
|
|
60
|
+
className,
|
|
61
|
+
),
|
|
62
|
+
...props,
|
|
63
|
+
children: children,
|
|
64
|
+
});
|
|
65
|
+
},
|
|
66
|
+
);
|
|
31
67
|
ChatLayoutHeader.displayName = "ChatLayout.Header";
|
|
32
|
-
const ChatLayoutMain = React.forwardRef(
|
|
33
|
-
|
|
34
|
-
|
|
68
|
+
const ChatLayoutMain = React.forwardRef(
|
|
69
|
+
({ className, children, ...props }, ref) => {
|
|
70
|
+
return _jsx("div", {
|
|
71
|
+
ref: ref,
|
|
72
|
+
className: cn("flex flex-1 flex-col overflow-hidden", className),
|
|
73
|
+
...props,
|
|
74
|
+
children: children,
|
|
75
|
+
});
|
|
76
|
+
},
|
|
77
|
+
);
|
|
35
78
|
ChatLayoutMain.displayName = "ChatLayout.Main";
|
|
36
|
-
const ChatLayoutBody = React.forwardRef(
|
|
37
|
-
|
|
38
|
-
|
|
79
|
+
const ChatLayoutBody = React.forwardRef(
|
|
80
|
+
({ showToaster = true, className, children, ...props }, ref) => {
|
|
81
|
+
return _jsxs("div", {
|
|
82
|
+
ref: ref,
|
|
83
|
+
className: cn("relative flex flex-1 flex-col overflow-hidden", className),
|
|
84
|
+
...props,
|
|
85
|
+
children: [children, showToaster && _jsx(Toaster, {})],
|
|
86
|
+
});
|
|
87
|
+
},
|
|
88
|
+
);
|
|
39
89
|
ChatLayoutBody.displayName = "ChatLayout.Body";
|
|
40
|
-
const ChatLayoutMessages = React.forwardRef(
|
|
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
|
-
|
|
90
|
+
const ChatLayoutMessages = React.forwardRef(
|
|
91
|
+
(
|
|
92
|
+
{
|
|
93
|
+
className,
|
|
94
|
+
children,
|
|
95
|
+
onScrollChange,
|
|
96
|
+
showScrollToBottom = true,
|
|
97
|
+
...props
|
|
98
|
+
},
|
|
99
|
+
ref,
|
|
100
|
+
) => {
|
|
101
|
+
const [showScrollButton, setShowScrollButton] = React.useState(false);
|
|
102
|
+
const scrollContainerRef = React.useRef(null);
|
|
103
|
+
// Merge refs
|
|
104
|
+
React.useImperativeHandle(ref, () => scrollContainerRef.current);
|
|
105
|
+
// Check if user is at bottom of scroll
|
|
106
|
+
const checkScrollPosition = React.useCallback(() => {
|
|
107
|
+
const container = scrollContainerRef.current;
|
|
108
|
+
if (!container) return;
|
|
109
|
+
const { scrollTop, scrollHeight, clientHeight } = container;
|
|
110
|
+
const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
|
|
111
|
+
const isAtBottom = distanceFromBottom < 100; // 100px threshold
|
|
112
|
+
setShowScrollButton(!isAtBottom && showScrollToBottom);
|
|
113
|
+
onScrollChange?.(isAtBottom);
|
|
114
|
+
}, [onScrollChange, showScrollToBottom]);
|
|
115
|
+
// Handle scroll events
|
|
116
|
+
const handleScroll = React.useCallback(() => {
|
|
117
|
+
checkScrollPosition();
|
|
118
|
+
}, [checkScrollPosition]);
|
|
119
|
+
// Scroll to bottom function
|
|
120
|
+
const scrollToBottom = React.useCallback(() => {
|
|
121
|
+
const container = scrollContainerRef.current;
|
|
122
|
+
if (!container) return;
|
|
123
|
+
container.scrollTo({
|
|
124
|
+
top: container.scrollHeight,
|
|
125
|
+
behavior: "smooth",
|
|
126
|
+
});
|
|
127
|
+
}, []);
|
|
128
|
+
// Check scroll position on mount and when children change
|
|
129
|
+
React.useEffect(() => {
|
|
130
|
+
checkScrollPosition();
|
|
131
|
+
}, [checkScrollPosition]);
|
|
132
|
+
return _jsxs("div", {
|
|
133
|
+
className: "relative flex-1 overflow-hidden",
|
|
134
|
+
children: [
|
|
135
|
+
_jsx("div", {
|
|
136
|
+
ref: scrollContainerRef,
|
|
137
|
+
className: cn("h-full overflow-y-auto", className),
|
|
138
|
+
onScroll: handleScroll,
|
|
139
|
+
...props,
|
|
140
|
+
children: children,
|
|
141
|
+
}),
|
|
142
|
+
showScrollButton &&
|
|
143
|
+
_jsx("button", {
|
|
144
|
+
type: "button",
|
|
145
|
+
onClick: scrollToBottom,
|
|
146
|
+
className: cn(
|
|
147
|
+
"absolute bottom-4 left-1/2 -translate-x-1/2 z-10",
|
|
148
|
+
"flex items-center justify-center p-2 rounded-full",
|
|
149
|
+
"bg-card border border-border shadow-lg",
|
|
150
|
+
"text-foreground",
|
|
151
|
+
"hover:bg-accent hover:text-accent-foreground",
|
|
152
|
+
"transition-all duration-200 ease-in-out",
|
|
153
|
+
"animate-in fade-in slide-in-from-bottom-2",
|
|
154
|
+
),
|
|
155
|
+
"aria-label": "Scroll to bottom",
|
|
156
|
+
children: _jsx(ArrowDown, { className: "h-4 w-4" }),
|
|
157
|
+
}),
|
|
158
|
+
],
|
|
159
|
+
});
|
|
160
|
+
},
|
|
161
|
+
);
|
|
76
162
|
ChatLayoutMessages.displayName = "ChatLayout.Messages";
|
|
77
|
-
const ChatLayoutFooter = React.forwardRef(
|
|
78
|
-
|
|
79
|
-
|
|
163
|
+
const ChatLayoutFooter = React.forwardRef(
|
|
164
|
+
({ className, children, ...props }, ref) => {
|
|
165
|
+
return _jsx("div", {
|
|
166
|
+
ref: ref,
|
|
167
|
+
className: cn(
|
|
168
|
+
"bg-linear-to-t from-background to-transparent px-4 pb-4",
|
|
169
|
+
className,
|
|
170
|
+
),
|
|
171
|
+
...props,
|
|
172
|
+
children: children,
|
|
173
|
+
});
|
|
174
|
+
},
|
|
175
|
+
);
|
|
80
176
|
ChatLayoutFooter.displayName = "ChatLayout.Footer";
|
|
81
|
-
const ChatLayoutSidebar = React.forwardRef(
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
177
|
+
const ChatLayoutSidebar = React.forwardRef(
|
|
178
|
+
({ className, children, ...props }, ref) => {
|
|
179
|
+
const { sidebarOpen } = useChatLayoutContext();
|
|
180
|
+
if (!sidebarOpen) return null;
|
|
181
|
+
return _jsx("div", {
|
|
182
|
+
ref: ref,
|
|
183
|
+
className: cn(
|
|
184
|
+
"border-r border-border bg-card w-64 overflow-y-auto",
|
|
185
|
+
className,
|
|
186
|
+
),
|
|
187
|
+
...props,
|
|
188
|
+
children: children,
|
|
189
|
+
});
|
|
190
|
+
},
|
|
191
|
+
);
|
|
87
192
|
ChatLayoutSidebar.displayName = "ChatLayout.Sidebar";
|
|
88
|
-
const ChatLayoutAside = React.forwardRef(
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
193
|
+
const ChatLayoutAside = React.forwardRef(
|
|
194
|
+
({ breakpoint = "lg", className, children, ...props }, ref) => {
|
|
195
|
+
const { panelSize } = useChatLayoutContext();
|
|
196
|
+
// Hidden state - don't render
|
|
197
|
+
if (panelSize === "hidden") return null;
|
|
198
|
+
return _jsx("div", {
|
|
199
|
+
ref: ref,
|
|
200
|
+
className: cn(
|
|
201
|
+
// Hidden by default, visible at breakpoint
|
|
202
|
+
"hidden border-l border-border bg-card overflow-y-auto transition-all duration-300",
|
|
203
|
+
// Breakpoint visibility
|
|
204
|
+
breakpoint === "md" && "md:block",
|
|
205
|
+
breakpoint === "lg" && "lg:block",
|
|
206
|
+
breakpoint === "xl" && "xl:block",
|
|
207
|
+
breakpoint === "2xl" && "2xl:block",
|
|
208
|
+
// Size variants
|
|
209
|
+
panelSize === "small" && "w-80",
|
|
210
|
+
panelSize === "large" && "w-[32rem]",
|
|
211
|
+
className,
|
|
212
|
+
),
|
|
213
|
+
...props,
|
|
214
|
+
children: children,
|
|
215
|
+
});
|
|
216
|
+
},
|
|
217
|
+
);
|
|
101
218
|
ChatLayoutAside.displayName = "ChatLayout.Aside";
|
|
102
219
|
/* -------------------------------------------------------------------------------------------------
|
|
103
220
|
* Exports
|
|
104
221
|
* -----------------------------------------------------------------------------------------------*/
|
|
105
|
-
export {
|
|
222
|
+
export {
|
|
223
|
+
ChatLayoutRoot as Root,
|
|
224
|
+
ChatLayoutHeader as Header,
|
|
225
|
+
ChatLayoutMain as Main,
|
|
226
|
+
ChatLayoutBody as Body,
|
|
227
|
+
ChatLayoutMessages as Messages,
|
|
228
|
+
ChatLayoutFooter as Footer,
|
|
229
|
+
ChatLayoutSidebar as Sidebar,
|
|
230
|
+
ChatLayoutAside as Aside,
|
|
231
|
+
useChatLayoutContext,
|
|
232
|
+
};
|
|
@@ -4,15 +4,24 @@ import type { TodoItem } from "./TodoListItem.js";
|
|
|
4
4
|
* Shared tab content components for both mobile (ChatHeader) and desktop (Panel) views
|
|
5
5
|
* Following component architecture best practices
|
|
6
6
|
*/
|
|
7
|
-
export interface TodoTabContentProps
|
|
8
|
-
|
|
7
|
+
export interface TodoTabContentProps
|
|
8
|
+
extends React.HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
todos: TodoItem[];
|
|
9
10
|
}
|
|
10
|
-
export declare const TodoTabContent: React.ForwardRefExoticComponent<
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
export declare const TodoTabContent: React.ForwardRefExoticComponent<
|
|
12
|
+
TodoTabContentProps & React.RefAttributes<HTMLDivElement>
|
|
13
|
+
>;
|
|
14
|
+
export interface FilesTabContentProps
|
|
15
|
+
extends React.HTMLAttributes<HTMLDivElement> {
|
|
16
|
+
files?: string[];
|
|
13
17
|
}
|
|
14
|
-
export declare const FilesTabContent: React.ForwardRefExoticComponent<
|
|
15
|
-
|
|
16
|
-
|
|
18
|
+
export declare const FilesTabContent: React.ForwardRefExoticComponent<
|
|
19
|
+
FilesTabContentProps & React.RefAttributes<HTMLDivElement>
|
|
20
|
+
>;
|
|
21
|
+
export interface DatabaseTabContentProps
|
|
22
|
+
extends React.HTMLAttributes<HTMLDivElement> {
|
|
23
|
+
data?: unknown;
|
|
17
24
|
}
|
|
18
|
-
export declare const DatabaseTabContent: React.ForwardRefExoticComponent<
|
|
25
|
+
export declare const DatabaseTabContent: React.ForwardRefExoticComponent<
|
|
26
|
+
DatabaseTabContentProps & React.RefAttributes<HTMLDivElement>
|
|
27
|
+
>;
|
|
@@ -1,15 +1,93 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
1
|
import * as React from "react";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from "../lib/utils.js";
|
|
4
|
-
export const TodoTabContent = React.forwardRef(
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
export const TodoTabContent = React.forwardRef(
|
|
5
|
+
({ todos, className, ...props }, ref) => {
|
|
6
|
+
return _jsxs("div", {
|
|
7
|
+
ref: ref,
|
|
8
|
+
className: cn("space-y-4", className),
|
|
9
|
+
...props,
|
|
10
|
+
children: [
|
|
11
|
+
_jsx("h3", { className: "font-semibold text-lg", children: "Tasks" }),
|
|
12
|
+
_jsx("div", {
|
|
13
|
+
className: "space-y-2",
|
|
14
|
+
children:
|
|
15
|
+
todos.length === 0
|
|
16
|
+
? _jsx("p", {
|
|
17
|
+
className: "text-sm text-muted-foreground",
|
|
18
|
+
children: "No tasks yet",
|
|
19
|
+
})
|
|
20
|
+
: todos.map((todo) =>
|
|
21
|
+
_jsx(
|
|
22
|
+
"div",
|
|
23
|
+
{ className: "text-sm", children: todo.text },
|
|
24
|
+
todo.id,
|
|
25
|
+
),
|
|
26
|
+
),
|
|
27
|
+
}),
|
|
28
|
+
],
|
|
29
|
+
});
|
|
30
|
+
},
|
|
31
|
+
);
|
|
7
32
|
TodoTabContent.displayName = "TodoTabContent";
|
|
8
|
-
export const FilesTabContent = React.forwardRef(
|
|
9
|
-
|
|
10
|
-
|
|
33
|
+
export const FilesTabContent = React.forwardRef(
|
|
34
|
+
({ files = [], className, ...props }, ref) => {
|
|
35
|
+
return _jsxs("div", {
|
|
36
|
+
ref: ref,
|
|
37
|
+
className: cn("space-y-4", className),
|
|
38
|
+
...props,
|
|
39
|
+
children: [
|
|
40
|
+
_jsx("h3", { className: "font-semibold text-lg", children: "Files" }),
|
|
41
|
+
files.length === 0
|
|
42
|
+
? _jsx("p", {
|
|
43
|
+
className: "text-sm text-muted-foreground",
|
|
44
|
+
children: "No files attached",
|
|
45
|
+
})
|
|
46
|
+
: _jsx("div", {
|
|
47
|
+
className: "space-y-2",
|
|
48
|
+
children: files.map((file) =>
|
|
49
|
+
_jsx("div", { className: "text-sm", children: file }, file),
|
|
50
|
+
),
|
|
51
|
+
}),
|
|
52
|
+
],
|
|
53
|
+
});
|
|
54
|
+
},
|
|
55
|
+
);
|
|
11
56
|
FilesTabContent.displayName = "FilesTabContent";
|
|
12
|
-
export const DatabaseTabContent = React.forwardRef(
|
|
13
|
-
|
|
14
|
-
|
|
57
|
+
export const DatabaseTabContent = React.forwardRef(
|
|
58
|
+
({ data, className, ...props }, ref) => {
|
|
59
|
+
return _jsxs("div", {
|
|
60
|
+
ref: ref,
|
|
61
|
+
className: cn("space-y-4", className),
|
|
62
|
+
...props,
|
|
63
|
+
children: [
|
|
64
|
+
_jsx("h3", {
|
|
65
|
+
className: "font-semibold text-lg",
|
|
66
|
+
children: "Database",
|
|
67
|
+
}),
|
|
68
|
+
_jsxs("div", {
|
|
69
|
+
className: "text-sm text-muted-foreground",
|
|
70
|
+
children: [
|
|
71
|
+
_jsx("p", {
|
|
72
|
+
children:
|
|
73
|
+
"Database viewer - panel automatically expanded to large size",
|
|
74
|
+
}),
|
|
75
|
+
_jsxs("div", {
|
|
76
|
+
className: "mt-4 p-4 border border-border rounded",
|
|
77
|
+
children: [
|
|
78
|
+
_jsx("p", { children: "Your large data table would go here" }),
|
|
79
|
+
data && typeof data === "object"
|
|
80
|
+
? _jsx("pre", {
|
|
81
|
+
className: "mt-2 text-xs overflow-auto",
|
|
82
|
+
children: JSON.stringify(data, null, 2),
|
|
83
|
+
})
|
|
84
|
+
: null,
|
|
85
|
+
],
|
|
86
|
+
}),
|
|
87
|
+
],
|
|
88
|
+
}),
|
|
89
|
+
],
|
|
90
|
+
});
|
|
91
|
+
},
|
|
92
|
+
);
|
|
15
93
|
DatabaseTabContent.displayName = "DatabaseTabContent";
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import type { ThemeConfig } from "./ConfigPanel.js";
|
|
2
2
|
interface ChatPreviewProps {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
config: ThemeConfig;
|
|
4
|
+
status: string;
|
|
5
|
+
iframeSrc?: string;
|
|
6
6
|
}
|
|
7
|
-
export declare function ChatPreview({
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
export declare function ChatPreview({
|
|
8
|
+
config,
|
|
9
|
+
status,
|
|
10
|
+
iframeSrc,
|
|
11
|
+
}: ChatPreviewProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
//# sourceMappingURL=ChatPreview.d.ts.map
|