@townco/ui 0.1.6 → 0.1.8

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.
Files changed (255) hide show
  1. package/README.md +11 -11
  2. package/dist/core/hooks/index.d.ts +1 -0
  3. package/dist/core/hooks/index.js +1 -0
  4. package/dist/core/hooks/use-chat-input.d.ts +17 -17
  5. package/dist/core/hooks/use-chat-input.js +55 -64
  6. package/dist/core/hooks/use-chat-messages.d.ts +11 -11
  7. package/dist/core/hooks/use-chat-messages.js +114 -121
  8. package/dist/core/hooks/use-chat-session.d.ts +5 -5
  9. package/dist/core/hooks/use-chat-session.js +80 -78
  10. package/dist/core/hooks/use-media-query.d.ts +5 -5
  11. package/dist/core/hooks/use-media-query.js +42 -38
  12. package/dist/core/index.d.ts +1 -1
  13. package/dist/core/index.js +1 -1
  14. package/dist/core/schemas/chat.d.ts +56 -83
  15. package/dist/core/schemas/chat.js +25 -27
  16. package/dist/core/store/chat-store.d.ts +22 -28
  17. package/dist/core/store/chat-store.js +50 -59
  18. package/dist/gui/components/Button.d.ts +7 -23
  19. package/dist/gui/components/Button.js +27 -40
  20. package/dist/gui/components/Card.d.ts +7 -26
  21. package/dist/gui/components/Card.js +8 -54
  22. package/dist/gui/components/ChatHeader.d.ts +31 -58
  23. package/dist/gui/components/ChatHeader.js +68 -171
  24. package/dist/gui/components/ChatInput.d.ts +54 -58
  25. package/dist/gui/components/ChatInput.js +207 -194
  26. package/dist/gui/components/ChatInputCommandMenu.d.ts +20 -0
  27. package/dist/gui/components/ChatInputCommandMenu.js +62 -0
  28. package/dist/gui/components/ChatLayout.d.ts +41 -71
  29. package/dist/gui/components/ChatLayout.js +87 -214
  30. package/dist/gui/components/ChatPanelTabContent.d.ts +9 -18
  31. package/dist/gui/components/ChatPanelTabContent.js +10 -88
  32. package/dist/gui/components/ChatSecondaryPanel.d.ts +11 -14
  33. package/dist/gui/components/ChatSecondaryPanel.js +38 -115
  34. package/dist/gui/components/ChatSidebar.d.ts +13 -26
  35. package/dist/gui/components/ChatSidebar.js +14 -48
  36. package/dist/gui/components/ChatStatus.d.ts +2 -4
  37. package/dist/gui/components/ChatStatus.js +34 -45
  38. package/dist/gui/components/Conversation.d.ts +14 -17
  39. package/dist/gui/components/Conversation.js +83 -143
  40. package/dist/gui/components/Dialog.d.ts +11 -57
  41. package/dist/gui/components/Dialog.js +8 -84
  42. package/dist/gui/components/DropdownMenu.d.ts +20 -101
  43. package/dist/gui/components/DropdownMenu.js +14 -161
  44. package/dist/gui/components/HeightTransition.d.ts +7 -12
  45. package/dist/gui/components/HeightTransition.js +77 -88
  46. package/dist/gui/components/Input.d.ts +6 -13
  47. package/dist/gui/components/Input.js +16 -27
  48. package/dist/gui/components/Label.d.ts +1 -7
  49. package/dist/gui/components/Label.js +2 -12
  50. package/dist/gui/components/MarkdownRenderer.d.ts +4 -6
  51. package/dist/gui/components/MarkdownRenderer.js +81 -178
  52. package/dist/gui/components/Message.d.ts +22 -25
  53. package/dist/gui/components/Message.js +97 -44
  54. package/dist/gui/components/MessageContent.d.ts +22 -29
  55. package/dist/gui/components/MessageContent.js +85 -157
  56. package/dist/gui/components/Reasoning.d.ts +24 -30
  57. package/dist/gui/components/Reasoning.js +60 -187
  58. package/dist/gui/components/Response.d.ts +9 -11
  59. package/dist/gui/components/Response.js +90 -229
  60. package/dist/gui/components/Select.d.ts +10 -69
  61. package/dist/gui/components/Select.js +12 -118
  62. package/dist/gui/components/Sonner.d.ts +1 -3
  63. package/dist/gui/components/Sonner.js +18 -29
  64. package/dist/gui/components/Tabs.d.ts +4 -24
  65. package/dist/gui/components/Tabs.js +4 -32
  66. package/dist/gui/components/Task.d.ts +24 -28
  67. package/dist/gui/components/Task.js +31 -164
  68. package/dist/gui/components/Textarea.d.ts +7 -15
  69. package/dist/gui/components/Textarea.js +46 -63
  70. package/dist/gui/components/ThinkingBlock.d.ts +10 -20
  71. package/dist/gui/components/ThinkingBlock.js +35 -134
  72. package/dist/gui/components/TodoList.d.ts +10 -12
  73. package/dist/gui/components/TodoList.js +7 -22
  74. package/dist/gui/components/TodoListItem.d.ts +6 -9
  75. package/dist/gui/components/TodoListItem.js +4 -18
  76. package/dist/gui/components/index.d.ts +16 -59
  77. package/dist/gui/components/index.js +18 -42
  78. package/dist/gui/lib/utils.js +1 -1
  79. package/dist/index.d.ts +1 -1
  80. package/dist/index.js +1 -1
  81. package/dist/index.test.js +1 -0
  82. package/dist/sdk/client/acp-client.d.ts +76 -88
  83. package/dist/sdk/client/acp-client.js +217 -215
  84. package/dist/sdk/index.d.ts +1 -1
  85. package/dist/sdk/index.js +1 -1
  86. package/dist/sdk/schemas/agent.d.ts +64 -111
  87. package/dist/sdk/schemas/agent.js +24 -24
  88. package/dist/sdk/schemas/message.d.ts +147 -245
  89. package/dist/sdk/schemas/message.js +40 -40
  90. package/dist/sdk/schemas/session.d.ts +135 -219
  91. package/dist/sdk/schemas/session.js +27 -27
  92. package/dist/sdk/transports/http.d.ts +55 -55
  93. package/dist/sdk/transports/http.js +469 -472
  94. package/dist/sdk/transports/stdio.d.ts +20 -20
  95. package/dist/sdk/transports/stdio.js +286 -289
  96. package/dist/sdk/transports/types.d.ts +42 -42
  97. package/dist/sdk/transports/websocket.d.ts +12 -12
  98. package/dist/sdk/transports/websocket.js +46 -52
  99. package/dist/tui/components/ChatView.d.ts +2 -4
  100. package/dist/tui/components/ChatView.js +18 -51
  101. package/dist/tui/components/GameOfLife.js +35 -64
  102. package/dist/tui/components/InputBox.d.ts +11 -18
  103. package/dist/tui/components/InputBox.js +10 -70
  104. package/dist/tui/components/MessageList.d.ts +2 -4
  105. package/dist/tui/components/MessageList.js +10 -37
  106. package/dist/tui/components/MultiSelect.d.ts +10 -15
  107. package/dist/tui/components/MultiSelect.js +73 -116
  108. package/dist/tui/components/ReadlineInput.d.ts +6 -12
  109. package/dist/tui/components/ReadlineInput.js +237 -252
  110. package/dist/tui/components/SingleSelect.d.ts +9 -15
  111. package/dist/tui/components/SingleSelect.js +43 -84
  112. package/dist/tui/components/StatusBar.d.ts +6 -11
  113. package/dist/tui/components/StatusBar.js +67 -102
  114. package/dist/tui/index.d.ts +1 -1
  115. package/dist/tui/index.js +1 -1
  116. package/package.json +6 -4
  117. package/src/styles/global.css +2 -0
  118. package/dist/core/hooks/index.d.ts.map +0 -1
  119. package/dist/core/hooks/index.js.map +0 -1
  120. package/dist/core/hooks/use-chat-input.d.ts.map +0 -1
  121. package/dist/core/hooks/use-chat-input.js.map +0 -1
  122. package/dist/core/hooks/use-chat-messages.d.ts.map +0 -1
  123. package/dist/core/hooks/use-chat-messages.js.map +0 -1
  124. package/dist/core/hooks/use-chat-session.d.ts.map +0 -1
  125. package/dist/core/hooks/use-chat-session.js.map +0 -1
  126. package/dist/core/index.d.ts.map +0 -1
  127. package/dist/core/index.js.map +0 -1
  128. package/dist/core/schemas/chat.d.ts.map +0 -1
  129. package/dist/core/schemas/chat.js.map +0 -1
  130. package/dist/core/schemas/index.d.ts.map +0 -1
  131. package/dist/core/schemas/index.js.map +0 -1
  132. package/dist/core/store/chat-store.d.ts.map +0 -1
  133. package/dist/core/store/chat-store.js.map +0 -1
  134. package/dist/gui/components/Button.d.ts.map +0 -1
  135. package/dist/gui/components/Button.js.map +0 -1
  136. package/dist/gui/components/Card.d.ts.map +0 -1
  137. package/dist/gui/components/Card.js.map +0 -1
  138. package/dist/gui/components/ChatInput.d.ts.map +0 -1
  139. package/dist/gui/components/ChatInput.js.map +0 -1
  140. package/dist/gui/components/ChatInterface.d.ts +0 -12
  141. package/dist/gui/components/ChatInterface.d.ts.map +0 -1
  142. package/dist/gui/components/ChatInterface.js +0 -204
  143. package/dist/gui/components/ChatInterface.js.map +0 -1
  144. package/dist/gui/components/ChatPreview.d.ts +0 -12
  145. package/dist/gui/components/ChatPreview.d.ts.map +0 -1
  146. package/dist/gui/components/ChatPreview.js +0 -214
  147. package/dist/gui/components/ChatPreview.js.map +0 -1
  148. package/dist/gui/components/ChatSecondaryPanel.d.ts.map +0 -1
  149. package/dist/gui/components/ChatSecondaryPanel.js.map +0 -1
  150. package/dist/gui/components/ChatStatus.d.ts.map +0 -1
  151. package/dist/gui/components/ChatStatus.js.map +0 -1
  152. package/dist/gui/components/ChatView.d.ts +0 -8
  153. package/dist/gui/components/ChatView.d.ts.map +0 -1
  154. package/dist/gui/components/ChatView.js +0 -42
  155. package/dist/gui/components/ChatView.js.map +0 -1
  156. package/dist/gui/components/ConfigPanel.d.ts +0 -20
  157. package/dist/gui/components/ConfigPanel.d.ts.map +0 -1
  158. package/dist/gui/components/ConfigPanel.js +0 -225
  159. package/dist/gui/components/ConfigPanel.js.map +0 -1
  160. package/dist/gui/components/Conversation.d.ts.map +0 -1
  161. package/dist/gui/components/Conversation.js.map +0 -1
  162. package/dist/gui/components/Dialog.d.ts.map +0 -1
  163. package/dist/gui/components/Dialog.js.map +0 -1
  164. package/dist/gui/components/HeightTransition.d.ts.map +0 -1
  165. package/dist/gui/components/HeightTransition.js.map +0 -1
  166. package/dist/gui/components/Input.d.ts.map +0 -1
  167. package/dist/gui/components/Input.js.map +0 -1
  168. package/dist/gui/components/InputBox.d.ts +0 -21
  169. package/dist/gui/components/InputBox.d.ts.map +0 -1
  170. package/dist/gui/components/InputBox.js +0 -90
  171. package/dist/gui/components/InputBox.js.map +0 -1
  172. package/dist/gui/components/Label.d.ts.map +0 -1
  173. package/dist/gui/components/Label.js.map +0 -1
  174. package/dist/gui/components/MarkdownRenderer.d.ts.map +0 -1
  175. package/dist/gui/components/MarkdownRenderer.js.map +0 -1
  176. package/dist/gui/components/Message.d.ts.map +0 -1
  177. package/dist/gui/components/Message.js.map +0 -1
  178. package/dist/gui/components/MessageContent.d.ts.map +0 -1
  179. package/dist/gui/components/MessageContent.js.map +0 -1
  180. package/dist/gui/components/MessageList.d.ts.map +0 -1
  181. package/dist/gui/components/MessageList.js.map +0 -1
  182. package/dist/gui/components/PlaygroundLayout.d.ts +0 -14
  183. package/dist/gui/components/PlaygroundLayout.d.ts.map +0 -1
  184. package/dist/gui/components/PlaygroundLayout.js +0 -49
  185. package/dist/gui/components/PlaygroundLayout.js.map +0 -1
  186. package/dist/gui/components/Reasoning.d.ts.map +0 -1
  187. package/dist/gui/components/Reasoning.js.map +0 -1
  188. package/dist/gui/components/Response.d.ts.map +0 -1
  189. package/dist/gui/components/Response.js.map +0 -1
  190. package/dist/gui/components/Select.d.ts.map +0 -1
  191. package/dist/gui/components/Select.js.map +0 -1
  192. package/dist/gui/components/StatusBar.d.ts +0 -12
  193. package/dist/gui/components/StatusBar.d.ts.map +0 -1
  194. package/dist/gui/components/StatusBar.js +0 -58
  195. package/dist/gui/components/StatusBar.js.map +0 -1
  196. package/dist/gui/components/Tabs.d.ts.map +0 -1
  197. package/dist/gui/components/Tabs.js.map +0 -1
  198. package/dist/gui/components/Task.d.ts.map +0 -1
  199. package/dist/gui/components/Task.js.map +0 -1
  200. package/dist/gui/components/Textarea.d.ts.map +0 -1
  201. package/dist/gui/components/Textarea.js.map +0 -1
  202. package/dist/gui/components/ThinkingBlock.d.ts.map +0 -1
  203. package/dist/gui/components/ThinkingBlock.js.map +0 -1
  204. package/dist/gui/components/TodoList.d.ts.map +0 -1
  205. package/dist/gui/components/TodoList.js.map +0 -1
  206. package/dist/gui/components/TodoListItem.d.ts.map +0 -1
  207. package/dist/gui/components/TodoListItem.js.map +0 -1
  208. package/dist/gui/components/index.d.ts.map +0 -1
  209. package/dist/gui/components/index.js.map +0 -1
  210. package/dist/gui/index.d.ts.map +0 -1
  211. package/dist/gui/index.js.map +0 -1
  212. package/dist/gui/lib/utils.d.ts.map +0 -1
  213. package/dist/gui/lib/utils.js.map +0 -1
  214. package/dist/index.d.ts.map +0 -1
  215. package/dist/index.js.map +0 -1
  216. package/dist/sdk/client/acp-client.d.ts.map +0 -1
  217. package/dist/sdk/client/acp-client.js.map +0 -1
  218. package/dist/sdk/client/index.d.ts.map +0 -1
  219. package/dist/sdk/client/index.js.map +0 -1
  220. package/dist/sdk/index.d.ts.map +0 -1
  221. package/dist/sdk/index.js.map +0 -1
  222. package/dist/sdk/schemas/agent.d.ts.map +0 -1
  223. package/dist/sdk/schemas/agent.js.map +0 -1
  224. package/dist/sdk/schemas/index.d.ts.map +0 -1
  225. package/dist/sdk/schemas/index.js.map +0 -1
  226. package/dist/sdk/schemas/message.d.ts.map +0 -1
  227. package/dist/sdk/schemas/message.js.map +0 -1
  228. package/dist/sdk/schemas/session.d.ts.map +0 -1
  229. package/dist/sdk/schemas/session.js.map +0 -1
  230. package/dist/sdk/transports/http.d.ts.map +0 -1
  231. package/dist/sdk/transports/http.js.map +0 -1
  232. package/dist/sdk/transports/index.d.ts.map +0 -1
  233. package/dist/sdk/transports/index.js.map +0 -1
  234. package/dist/sdk/transports/stdio.d.ts.map +0 -1
  235. package/dist/sdk/transports/stdio.js.map +0 -1
  236. package/dist/sdk/transports/types.d.ts.map +0 -1
  237. package/dist/sdk/transports/types.js.map +0 -1
  238. package/dist/sdk/transports/websocket.d.ts.map +0 -1
  239. package/dist/sdk/transports/websocket.js.map +0 -1
  240. package/dist/tui/components/ChatView.d.ts.map +0 -1
  241. package/dist/tui/components/ChatView.js.map +0 -1
  242. package/dist/tui/components/GameOfLife.d.ts.map +0 -1
  243. package/dist/tui/components/GameOfLife.js.map +0 -1
  244. package/dist/tui/components/InputBox.d.ts.map +0 -1
  245. package/dist/tui/components/InputBox.js.map +0 -1
  246. package/dist/tui/components/MessageList.d.ts.map +0 -1
  247. package/dist/tui/components/MessageList.js.map +0 -1
  248. package/dist/tui/components/ReadlineInput.d.ts.map +0 -1
  249. package/dist/tui/components/ReadlineInput.js.map +0 -1
  250. package/dist/tui/components/StatusBar.d.ts.map +0 -1
  251. package/dist/tui/components/StatusBar.js.map +0 -1
  252. package/dist/tui/components/index.d.ts.map +0 -1
  253. package/dist/tui/components/index.js.map +0 -1
  254. package/dist/tui/index.d.ts.map +0 -1
  255. package/dist/tui/index.js.map +0 -1
@@ -1,27 +1,14 @@
1
1
  import * as React from "react";
2
- export interface ChatSidebarRootProps
3
- extends React.HTMLAttributes<HTMLDivElement> {}
4
- declare const ChatSidebarRoot: React.ForwardRefExoticComponent<
5
- ChatSidebarRootProps & React.RefAttributes<HTMLDivElement>
6
- >;
7
- export interface ChatSidebarHeaderProps
8
- extends React.HTMLAttributes<HTMLDivElement> {}
9
- declare const ChatSidebarHeader: React.ForwardRefExoticComponent<
10
- ChatSidebarHeaderProps & React.RefAttributes<HTMLDivElement>
11
- >;
12
- export interface ChatSidebarContentProps
13
- extends React.HTMLAttributes<HTMLDivElement> {}
14
- declare const ChatSidebarContent: React.ForwardRefExoticComponent<
15
- ChatSidebarContentProps & React.RefAttributes<HTMLDivElement>
16
- >;
17
- export interface ChatSidebarFooterProps
18
- extends React.HTMLAttributes<HTMLDivElement> {}
19
- declare const ChatSidebarFooter: React.ForwardRefExoticComponent<
20
- ChatSidebarFooterProps & React.RefAttributes<HTMLDivElement>
21
- >;
22
- export {
23
- ChatSidebarRoot as Root,
24
- ChatSidebarHeader as Header,
25
- ChatSidebarContent as Content,
26
- ChatSidebarFooter as Footer,
27
- };
2
+ export interface ChatSidebarRootProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ }
4
+ declare const ChatSidebarRoot: React.ForwardRefExoticComponent<ChatSidebarRootProps & React.RefAttributes<HTMLDivElement>>;
5
+ export interface ChatSidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
6
+ }
7
+ declare const ChatSidebarHeader: React.ForwardRefExoticComponent<ChatSidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
8
+ export interface ChatSidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {
9
+ }
10
+ declare const ChatSidebarContent: React.ForwardRefExoticComponent<ChatSidebarContentProps & React.RefAttributes<HTMLDivElement>>;
11
+ export interface ChatSidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
12
+ }
13
+ declare const ChatSidebarFooter: React.ForwardRefExoticComponent<ChatSidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
14
+ export { ChatSidebarRoot as Root, ChatSidebarHeader as Header, ChatSidebarContent as Content, ChatSidebarFooter as Footer, };
@@ -1,57 +1,23 @@
1
- import * as React from "react";
2
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
3
  import { cn } from "../lib/utils.js";
4
-
5
- const ChatSidebarRoot = React.forwardRef(
6
- ({ className, children, ...props }, ref) => {
7
- return _jsx("div", {
8
- ref: ref,
9
- className: cn("flex h-full flex-col", className),
10
- ...props,
11
- children: children,
12
- });
13
- },
14
- );
4
+ const ChatSidebarRoot = React.forwardRef(({ className, children, ...props }, ref) => {
5
+ return (_jsx("div", { ref: ref, className: cn("flex h-full flex-col", className), ...props, children: children }));
6
+ });
15
7
  ChatSidebarRoot.displayName = "ChatSidebar.Root";
16
- const ChatSidebarHeader = React.forwardRef(
17
- ({ className, children, ...props }, ref) => {
18
- return _jsx("div", {
19
- ref: ref,
20
- className: cn("border-b border-border px-4 py-3", className),
21
- ...props,
22
- children: children,
23
- });
24
- },
25
- );
8
+ const ChatSidebarHeader = React.forwardRef(({ className, children, ...props }, ref) => {
9
+ return (_jsx("div", { ref: ref, className: cn("border-b border-border px-4 py-3", className), ...props, children: children }));
10
+ });
26
11
  ChatSidebarHeader.displayName = "ChatSidebar.Header";
27
- const ChatSidebarContent = React.forwardRef(
28
- ({ className, children, ...props }, ref) => {
29
- return _jsx("div", {
30
- ref: ref,
31
- className: cn("flex-1 overflow-y-auto p-4", className),
32
- ...props,
33
- children: children,
34
- });
35
- },
36
- );
12
+ const ChatSidebarContent = React.forwardRef(({ className, children, ...props }, ref) => {
13
+ return (_jsx("div", { ref: ref, className: cn("flex-1 overflow-y-auto p-4", className), ...props, children: children }));
14
+ });
37
15
  ChatSidebarContent.displayName = "ChatSidebar.Content";
38
- const ChatSidebarFooter = React.forwardRef(
39
- ({ className, children, ...props }, ref) => {
40
- return _jsx("div", {
41
- ref: ref,
42
- className: cn("border-t border-border px-4 py-3", className),
43
- ...props,
44
- children: children,
45
- });
46
- },
47
- );
16
+ const ChatSidebarFooter = React.forwardRef(({ className, children, ...props }, ref) => {
17
+ return (_jsx("div", { ref: ref, className: cn("border-t border-border px-4 py-3", className), ...props, children: children }));
18
+ });
48
19
  ChatSidebarFooter.displayName = "ChatSidebar.Footer";
49
20
  /* -------------------------------------------------------------------------------------------------
50
21
  * Exports
51
22
  * -----------------------------------------------------------------------------------------------*/
52
- export {
53
- ChatSidebarRoot as Root,
54
- ChatSidebarHeader as Header,
55
- ChatSidebarContent as Content,
56
- ChatSidebarFooter as Footer,
57
- };
23
+ export { ChatSidebarRoot as Root, ChatSidebarHeader as Header, ChatSidebarContent as Content, ChatSidebarFooter as Footer, };
@@ -1,8 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { type ReactNode } from "react";
3
3
  export interface ChatStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
4
- children: ReactNode;
4
+ children: ReactNode;
5
5
  }
6
- export declare const ChatStatus: React.ForwardRefExoticComponent<
7
- ChatStatusProps & React.RefAttributes<HTMLSpanElement>
8
- >;
6
+ export declare const ChatStatus: React.ForwardRefExoticComponent<ChatStatusProps & React.RefAttributes<HTMLSpanElement>>;
@@ -1,49 +1,38 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  import * as React from "react";
2
3
  import { useEffect, useRef, useState } from "react";
3
- import { jsx as _jsx } from "react/jsx-runtime";
4
4
  import { cn } from "../lib/utils.js";
5
- export const ChatStatus = React.forwardRef(
6
- ({ children, className, ...props }, ref) => {
7
- const [displayContent, setDisplayContent] = useState(children);
8
- const [isTransitioning, setIsTransitioning] = useState(false);
9
- const previousContentRef = useRef(children);
10
- const isInitialMountRef = useRef(true);
11
- useEffect(() => {
12
- // Skip transition on initial mount
13
- if (isInitialMountRef.current) {
14
- isInitialMountRef.current = false;
15
- previousContentRef.current = children;
16
- return;
17
- }
18
- // Only transition if content actually changed
19
- if (previousContentRef.current === children) {
20
- return;
21
- }
22
- // Start transition out
23
- setIsTransitioning(true);
24
- // After fade out, update content and fade in
25
- const timeoutId = setTimeout(() => {
26
- setDisplayContent(children);
27
- previousContentRef.current = children;
28
- // Trigger fade in
29
- requestAnimationFrame(() => {
30
- setIsTransitioning(false);
31
- });
32
- }, 150); // Half of transition duration (300ms total)
33
- return () => {
34
- clearTimeout(timeoutId);
35
- };
36
- }, [children]);
37
- return _jsx("span", {
38
- ref: ref,
39
- className: cn(
40
- "text-sm text-foreground opacity-60 transition-opacity duration-300",
41
- isTransitioning ? "opacity-0" : "opacity-60",
42
- className,
43
- ),
44
- ...props,
45
- children: displayContent,
46
- });
47
- },
48
- );
5
+ export const ChatStatus = React.forwardRef(({ children, className, ...props }, ref) => {
6
+ const [displayContent, setDisplayContent] = useState(children);
7
+ const [isTransitioning, setIsTransitioning] = useState(false);
8
+ const previousContentRef = useRef(children);
9
+ const isInitialMountRef = useRef(true);
10
+ useEffect(() => {
11
+ // Skip transition on initial mount
12
+ if (isInitialMountRef.current) {
13
+ isInitialMountRef.current = false;
14
+ previousContentRef.current = children;
15
+ return;
16
+ }
17
+ // Only transition if content actually changed
18
+ if (previousContentRef.current === children) {
19
+ return;
20
+ }
21
+ // Start transition out
22
+ setIsTransitioning(true);
23
+ // After fade out, update content and fade in
24
+ const timeoutId = setTimeout(() => {
25
+ setDisplayContent(children);
26
+ previousContentRef.current = children;
27
+ // Trigger fade in
28
+ requestAnimationFrame(() => {
29
+ setIsTransitioning(false);
30
+ });
31
+ }, 150); // Half of transition duration (300ms total)
32
+ return () => {
33
+ clearTimeout(timeoutId);
34
+ };
35
+ }, [children]);
36
+ return (_jsx("span", { ref: ref, className: cn("text-sm text-foreground opacity-60 transition-opacity duration-300", isTransitioning ? "opacity-0" : "opacity-60", className), ...props, children: displayContent }));
37
+ });
49
38
  ChatStatus.displayName = "ChatStatus";
@@ -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
- extends React.HTMLAttributes<HTMLDivElement> {
8
- /** Whether to auto-scroll to bottom on new messages */
9
- autoScroll?: boolean;
10
- /** Whether content is currently streaming */
11
- isStreaming?: boolean;
12
- /** Scroll behavior type */
13
- scrollBehavior?: ScrollBehavior;
14
- /** Threshold for considering user at bottom (px from bottom) */
15
- scrollThreshold?: number;
16
- /** Show scroll-to-bottom button when not at bottom */
17
- showScrollButton?: boolean;
18
- /** Custom scroll button */
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
- autoScroll = true,
9
- isStreaming = false,
10
- scrollBehavior = "smooth",
11
- scrollThreshold = 100,
12
- showScrollButton = true,
13
- scrollButton,
14
- className,
15
- children,
16
- ...props
17
- },
18
- ref,
19
- ) => {
20
- const containerRef = useRef(null);
21
- const [isNearBottom, setIsNearBottom] = useState(true);
22
- const [showButton, setShowButton] = useState(false);
23
- const lastScrollTopRef = useRef(0);
24
- // Combine refs
25
- React.useImperativeHandle(ref, () => {
26
- if (!containerRef.current) {
27
- throw new Error("Container ref not initialized");
28
- }
29
- return containerRef.current;
30
- });
31
- // Check if user is near bottom of scroll area
32
- const checkScrollPosition = useCallback(() => {
33
- const container = containerRef.current;
34
- if (!container) return;
35
- const { scrollTop, scrollHeight, clientHeight } = container;
36
- const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
37
- const nearBottom = distanceFromBottom < scrollThreshold;
38
- setIsNearBottom(nearBottom);
39
- setShowButton(!nearBottom && showScrollButton);
40
- lastScrollTopRef.current = scrollTop;
41
- }, [scrollThreshold, showScrollButton]);
42
- // Scroll to bottom
43
- const scrollToBottom = useCallback(
44
- (behavior = scrollBehavior) => {
45
- const container = containerRef.current;
46
- if (!container) return;
47
- container.scrollTo({
48
- top: container.scrollHeight,
49
- behavior,
50
- });
51
- },
52
- [scrollBehavior],
53
- );
54
- // Auto-scroll when new content appears and user is near bottom
55
- useEffect(() => {
56
- if (!autoScroll) return;
57
- const container = containerRef.current;
58
- if (!container) return;
59
- // Always scroll during streaming if user is near bottom
60
- if (isStreaming && isNearBottom) {
61
- scrollToBottom("auto");
62
- }
63
- // Scroll on new messages if near bottom
64
- else if (!isStreaming && isNearBottom) {
65
- scrollToBottom();
66
- }
67
- }, [autoScroll, isStreaming, isNearBottom, scrollToBottom]);
68
- // Set up scroll listener
69
- useEffect(() => {
70
- const container = containerRef.current;
71
- if (!container) return;
72
- const handleScroll = () => {
73
- checkScrollPosition();
74
- };
75
- container.addEventListener("scroll", handleScroll, { passive: true });
76
- // Check initial position
77
- checkScrollPosition();
78
- return () => {
79
- container.removeEventListener("scroll", handleScroll);
80
- };
81
- }, [checkScrollPosition]);
82
- // Watch for resize events
83
- useEffect(() => {
84
- const container = containerRef.current;
85
- if (!container) return;
86
- const resizeObserver = new ResizeObserver(() => {
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
- DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>
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
- className,
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
- className,
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, };