@hanzo/ui 8.3.4 → 8.4.0

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 (16) hide show
  1. package/dist/chat/Chat.cjs +59 -0
  2. package/dist/chat/Chat.d.ts +42 -0
  3. package/dist/chat/Chat.d.ts.map +1 -0
  4. package/dist/chat/Chat.js +57 -0
  5. package/dist/chat/Chat.js.map +1 -0
  6. package/dist/chat/index.cjs +3 -1
  7. package/dist/chat/index.d.ts +1 -0
  8. package/dist/chat/index.d.ts.map +1 -1
  9. package/dist/chat/index.js +1 -0
  10. package/dist/chat/index.js.map +1 -1
  11. package/dist/gallery.cjs +6 -1
  12. package/dist/gallery.d.ts.map +1 -1
  13. package/dist/gallery.html +2 -2
  14. package/dist/gallery.js +7 -2
  15. package/dist/gallery.js.map +1 -1
  16. package/package.json +1 -1
package/dist/chat/Chat.cjs ADDED
@@ -0,0 +1,59 @@
1
+ 'use client';"use strict";
2
+ 'use client';
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.Chat = Chat;
5
+ const jsx_runtime_1 = require("react/jsx-runtime");
6
+ /**
7
+ * Chat — the thread and its composer, as one component.
8
+ *
9
+ * `Thread`, `Message` and `Composer` are the parts, and every surface that has
10
+ * ever shown a conversation has written the same twenty lines to put them
11
+ * together: map the turns, hold the draft, clear it on send, pass `busy`. Six
12
+ * surfaces, six copies, and they drifted — which is what this is.
13
+ *
14
+ * It takes the thread and does not own it. That distinction is the whole reason
15
+ * the previous attempt could not be adopted: a widget holding its own `useChat`
16
+ * gives a surface no way to read the conversation, so a page that wants to know
17
+ * whether anything has been said yet has to run a SECOND `useChat` and ends up
18
+ * with two threads. Here the surface holds it and passes it down, so
19
+ * `@hanzo/ai`'s `useChat` result spreads straight in:
20
+ *
21
+ * ```tsx
22
+ * const chat = useChat({ model: 'enso' }) // @hanzo/ai/react — the state
23
+ * <Chat {...chat} /> // @hanzo/ui/chat — the picture
24
+ * ```
25
+ *
26
+ * What it DOES own is the draft, because a half-typed message is a fact about
27
+ * this screen and nothing outside it: it does not survive navigation, no other
28
+ * component reads it, and lifting it would put a keystroke through the surface's
29
+ * state on every letter.
30
+ *
31
+ * No transport, no store, no routing — `@hanzo/ui` stays fetch-free, so nothing
32
+ * here imports `@hanzo/ai`. `messages` is read structurally, which is what lets
33
+ * that hold while the two packages still compose exactly.
34
+ */
35
+ const gui_1 = require("@hanzo/gui");
36
+ const react_1 = require("react");
37
+ const ink_1 = require("../backends/gui/ink.cjs");
38
+ const Composer_1 = require("./Composer.cjs");
39
+ const Message_1 = require("./Message.cjs");
40
+ const Thread_1 = require("./Thread.cjs");
41
+ function Chat({ messages, streaming = false, onSend, onStop, body, empty, composer, ...thread }) {
42
+ const [draft, setDraft] = (0, react_1.useState)('');
43
+ // Clearing here rather than in an effect on `messages` is what keeps a send
44
+ // from racing the answer: the draft is gone the moment it is sent, and a
45
+ // surface that rejects the turn does not get a cleared box back.
46
+ const send = (0, react_1.useCallback)(() => {
47
+ const text = draft.trim();
48
+ if (!text)
49
+ return;
50
+ setDraft('');
51
+ onSend(text);
52
+ }, [draft, onSend]);
53
+ const last = messages.length - 1;
54
+ // No `minHeight: 0` on the frame: rnw's View base and gui's stack base both
55
+ // set it already, measured on the rendered element — and gui publishes no
56
+ // such prop, so writing it type-errors rather than silently doing nothing,
57
+ // which is the one member of that family this substrate catches for you.
58
+ return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, width: "100%", children: [messages.length === 0 && empty ? (empty) : ((0, jsx_runtime_1.jsx)(Thread_1.Thread, { flex: 1, ...thread, children: messages.map((turn, i) => ((0, jsx_runtime_1.jsx)(Message_1.Message, { role: turn.role, busy: streaming && i === last && turn.role === 'assistant', children: body ? body(turn) : (0, ink_1.ink)(turn.content ?? '') }, turn.id))) })), (0, jsx_runtime_1.jsx)(Composer_1.Composer, { value: draft, onChange: setDraft, onSend: send, busy: streaming, ...(onStop ? { onStop } : {}), ...composer })] }));
59
+ }
package/dist/chat/Chat.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ import { type ReactNode } from 'react';
2
+ import { type ComposerProps } from './Composer.js';
3
+ import { type Role } from './Message.js';
4
+ import { type ThreadProps } from './Thread.js';
5
+ /**
6
+ * One turn, as little of it as a picture needs: who spoke, what they said, and
7
+ * an identity to key the list on.
8
+ *
9
+ * Structural on purpose — `@hanzo/ai`'s `ChatMessage` satisfies it without
10
+ * either package importing the other, and a surface with its own richer turn
11
+ * type satisfies it too.
12
+ */
13
+ export interface Turn {
14
+ id: string;
15
+ role: Role;
16
+ content?: string;
17
+ }
18
+ export interface ChatProps extends Omit<ThreadProps, 'children' | 'ref'> {
19
+ /** The conversation, oldest first. */
20
+ messages: Turn[];
21
+ /** A turn is arriving: the last one carries the caret and the composer stops. */
22
+ streaming?: boolean;
23
+ /** Send the draft. The composer clears itself once this is called. */
24
+ onSend: (text: string) => void;
25
+ /** End the turn in flight. Absent, the composer offers no stop. */
26
+ onStop?: () => void;
27
+ /**
28
+ * Render a turn's body. Defaults to its text.
29
+ *
30
+ * A surface with a markdown pipeline passes it here — the plugin set is
31
+ * per-surface (nine plugins, one plugin, or a regex under a bundle ceiling
32
+ * that cannot afford a parser), so this package ships none and renders the
33
+ * words plainly until someone says otherwise.
34
+ */
35
+ body?: (turn: Turn) => ReactNode;
36
+ /** Shown instead of the thread while nothing has been said. */
37
+ empty?: ReactNode;
38
+ /** The composer's own props — placeholder, hint, the send control, the field. */
39
+ composer?: Partial<ComposerProps>;
40
+ }
41
+ export declare function Chat({ messages, streaming, onSend, onStop, body, empty, composer, ...thread }: ChatProps): import("react/jsx-runtime").JSX.Element;
42
+ //# sourceMappingURL=Chat.d.ts.map
package/dist/chat/Chat.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":"AAgCA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG7D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAW,KAAK,IAAI,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAEnD;;;;;;;GAOG;AACH,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,KAAK,CAAC;IACtE,sCAAsC;IACtC,QAAQ,EAAE,IAAI,EAAE,CAAA;IAChB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sEAAsE;IACtE,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAA;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;CAClC;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAiB,EACjB,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,SAAS,2CA8CX"}
package/dist/chat/Chat.js ADDED
@@ -0,0 +1,57 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ /**
4
+ * Chat — the thread and its composer, as one component.
5
+ *
6
+ * `Thread`, `Message` and `Composer` are the parts, and every surface that has
7
+ * ever shown a conversation has written the same twenty lines to put them
8
+ * together: map the turns, hold the draft, clear it on send, pass `busy`. Six
9
+ * surfaces, six copies, and they drifted — which is what this is.
10
+ *
11
+ * It takes the thread and does not own it. That distinction is the whole reason
12
+ * the previous attempt could not be adopted: a widget holding its own `useChat`
13
+ * gives a surface no way to read the conversation, so a page that wants to know
14
+ * whether anything has been said yet has to run a SECOND `useChat` and ends up
15
+ * with two threads. Here the surface holds it and passes it down, so
16
+ * `@hanzo/ai`'s `useChat` result spreads straight in:
17
+ *
18
+ * ```tsx
19
+ * const chat = useChat({ model: 'enso' }) // @hanzo/ai/react — the state
20
+ * <Chat {...chat} /> // @hanzo/ui/chat — the picture
21
+ * ```
22
+ *
23
+ * What it DOES own is the draft, because a half-typed message is a fact about
24
+ * this screen and nothing outside it: it does not survive navigation, no other
25
+ * component reads it, and lifting it would put a keystroke through the surface's
26
+ * state on every letter.
27
+ *
28
+ * No transport, no store, no routing — `@hanzo/ui` stays fetch-free, so nothing
29
+ * here imports `@hanzo/ai`. `messages` is read structurally, which is what lets
30
+ * that hold while the two packages still compose exactly.
31
+ */
32
+ import { YStack } from '@hanzo/gui';
33
+ import { useCallback, useState } from 'react';
34
+ import { ink } from '../backends/gui/ink.js';
35
+ import { Composer } from './Composer.js';
36
+ import { Message } from './Message.js';
37
+ import { Thread } from './Thread.js';
38
+ export function Chat({ messages, streaming = false, onSend, onStop, body, empty, composer, ...thread }) {
39
+ const [draft, setDraft] = useState('');
40
+ // Clearing here rather than in an effect on `messages` is what keeps a send
41
+ // from racing the answer: the draft is gone the moment it is sent, and a
42
+ // surface that rejects the turn does not get a cleared box back.
43
+ const send = useCallback(() => {
44
+ const text = draft.trim();
45
+ if (!text)
46
+ return;
47
+ setDraft('');
48
+ onSend(text);
49
+ }, [draft, onSend]);
50
+ const last = messages.length - 1;
51
+ // No `minHeight: 0` on the frame: rnw's View base and gui's stack base both
52
+ // set it already, measured on the rendered element — and gui publishes no
53
+ // such prop, so writing it type-errors rather than silently doing nothing,
54
+ // which is the one member of that family this substrate catches for you.
55
+ return (_jsxs(YStack, { flex: 1, width: "100%", children: [messages.length === 0 && empty ? (empty) : (_jsx(Thread, { flex: 1, ...thread, children: messages.map((turn, i) => (_jsx(Message, { role: turn.role, busy: streaming && i === last && turn.role === 'assistant', children: body ? body(turn) : ink(turn.content ?? '') }, turn.id))) })), _jsx(Composer, { value: draft, onChange: setDraft, onSend: send, busy: streaming, ...(onStop ? { onStop } : {}), ...composer })] }));
56
+ }
57
+ //# sourceMappingURL=Chat.js.map
package/dist/chat/Chat.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAE7D,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,OAAO,EAAa,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAwCnD,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,GAAG,MAAM,EACC;IACV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,4EAA4E;IAC5E,yEAAyE;IACzE,iEAAiE;IACjE,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;QACzB,IAAI,CAAC,IAAI;YAAE,OAAM;QACjB,QAAQ,CAAC,EAAE,CAAC,CAAA;QACZ,MAAM,CAAC,IAAI,CAAC,CAAA;IACd,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAEnB,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;IAEhC,4EAA4E;IAC5E,0EAA0E;IAC1E,2EAA2E;IAC3E,yEAAyE;IACzE,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,aAC1B,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAChC,KAAK,CACN,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,KAAM,MAAM,YACxB,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,KAAC,OAAO,IAEN,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,YAEzD,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,IAJvC,IAAI,CAAC,EAAE,CAKJ,CACX,CAAC,GACK,CACV,EACD,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,KACX,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC1B,QAAQ,GACZ,IACK,CACV,CAAA;AACH,CAAC"}
package/dist/chat/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  'use client';"use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.SourceCard = exports.Sources = exports.Failure = exports.Step = exports.Code = exports.Aside = exports.AsideToggle = exports.ShareButton = exports.HeaderButton = exports.Header = exports.SidebarUser = exports.SidebarFolder = exports.SidebarItem = exports.SidebarSection = exports.SidebarScroll = exports.SidebarNewChat = exports.SidebarIconButton = exports.SidebarHeader = exports.Sidebar = exports.SLACK = exports.pinned = exports.sends = exports.ready = exports.Thread = exports.Message = exports.Caret = exports.ASK = exports.Composer = void 0;
3
+ exports.SourceCard = exports.Sources = exports.Failure = exports.Step = exports.Code = exports.Aside = exports.AsideToggle = exports.ShareButton = exports.HeaderButton = exports.Header = exports.SidebarUser = exports.SidebarFolder = exports.SidebarItem = exports.SidebarSection = exports.SidebarScroll = exports.SidebarNewChat = exports.SidebarIconButton = exports.SidebarHeader = exports.Sidebar = exports.SLACK = exports.pinned = exports.sends = exports.ready = exports.Thread = exports.Message = exports.Caret = exports.ASK = exports.Composer = exports.Chat = void 0;
4
4
  /**
5
5
  * @hanzo/ui/chat — the one chat shell, on @hanzo/gui primitives.
6
6
  *
@@ -31,6 +31,8 @@ exports.SourceCard = exports.Sources = exports.Failure = exports.Step = exports.
31
31
  * they ship at `@hanzo/ui/models` and `@hanzo/ui/product`. Nobody hunting for a
32
32
  * copy button looks in a chat module.
33
33
  */
34
+ var Chat_1 = require("./Chat.cjs");
35
+ Object.defineProperty(exports, "Chat", { enumerable: true, get: function () { return Chat_1.Chat; } });
34
36
  var Composer_1 = require("./Composer.cjs");
35
37
  Object.defineProperty(exports, "Composer", { enumerable: true, get: function () { return Composer_1.Composer; } });
36
38
  Object.defineProperty(exports, "ASK", { enumerable: true, get: function () { return Composer_1.ASK; } });
package/dist/chat/index.d.ts CHANGED
@@ -28,6 +28,7 @@
28
28
  * they ship at `@hanzo/ui/models` and `@hanzo/ui/product`. Nobody hunting for a
29
29
  * copy button looks in a chat module.
30
30
  */
31
+ export { Chat, type ChatProps, type Turn } from './Chat.js';
31
32
  export { Composer, ASK, type ComposerProps } from './Composer.js';
32
33
  export { Caret, Message, type MessageProps, type Role } from './Message.js';
33
34
  export { Thread, type ThreadProps } from './Thread.js';
package/dist/chat/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chat/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,IAAI,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,QAAQ,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAEnD,OAAO,EACL,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,WAAW,CAAA;AAElB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,WAAW,EACX,KAAK,EACL,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAEtD,OAAO,EACL,OAAO,EACP,UAAU,EACV,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,eAAe,GACrB,MAAM,WAAW,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chat/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,IAAI,EAAE,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,QAAQ,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAEnD,OAAO,EACL,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,WAAW,CAAA;AAElB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,WAAW,EACX,KAAK,EACL,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAEtD,OAAO,EACL,OAAO,EACP,UAAU,EACV,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,eAAe,GACrB,MAAM,WAAW,CAAA"}
package/dist/chat/index.js CHANGED
@@ -28,6 +28,7 @@
28
28
  * they ship at `@hanzo/ui/models` and `@hanzo/ui/product`. Nobody hunting for a
29
29
  * copy button looks in a chat module.
30
30
  */
31
+ export { Chat } from './Chat.js';
31
32
  export { Composer, ASK } from './Composer.js';
32
33
  export { Caret, Message } from './Message.js';
33
34
  export { Thread } from './Thread.js';
package/dist/chat/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/chat/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAsB,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgC,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAa,MAAM,QAAQ,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAEnD,OAAO,EACL,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,GASZ,MAAM,WAAW,CAAA;AAElB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,WAAW,EACX,KAAK,GAMN,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,IAAI,EAA4B,MAAM,QAAQ,CAAA;AACvD,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAA;AAEtD,OAAO,EACL,OAAO,EACP,UAAU,GAIX,MAAM,WAAW,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/chat/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,IAAI,EAA6B,MAAM,QAAQ,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAsB,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgC,MAAM,WAAW,CAAA;AACxE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAa,MAAM,QAAQ,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAEnD,OAAO,EACL,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,GASZ,MAAM,WAAW,CAAA;AAElB,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,WAAW,EACX,KAAK,GAMN,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,IAAI,EAA4B,MAAM,QAAQ,CAAA;AACvD,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAA;AAEtD,OAAO,EACL,OAAO,EACP,UAAU,GAIX,MAAM,WAAW,CAAA"}
package/dist/gallery.cjs CHANGED
@@ -26,6 +26,11 @@ const BUTTON_VARIANTS = [
26
26
  ];
27
27
  const BUTTON_SIZES = ['default', 'sm', 'lg', 'icon', 'icon-sm', 'icon-lg'];
28
28
  const BADGE_VARIANTS = ['default', 'secondary', 'destructive', 'outline'];
29
+ /** A thread for `Chat`, which takes the turns as data rather than as children. */
30
+ const TURNS = [
31
+ { id: 't1', role: 'user', content: 'ask' },
32
+ { id: 't2', role: 'assistant', content: 'answering' },
33
+ ];
29
34
  /** The chat shell is callbacks-out, and this list only needs them to exist. */
30
35
  const NOOP = () => { };
31
36
  /** Two: one with a host and one without, so the card's second line and its
@@ -79,6 +84,6 @@ const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex'
79
84
  tabs: [
80
85
  { id: 'console', title: 'Console', closable: false, content: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "console" }) },
81
86
  ],
82
- }, children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "center" }) }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "product-arrangements", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%', maxWidth: 320 }, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: 120 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: "100%", height: 72, rounded: "$4" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton.Text, { lines: 3 })] }), (0, jsx_runtime_1.jsx)(TooltipAnchor_1.TooltipAnchor, { description: "Delete this agent", children: (0, jsx_runtime_1.jsx)(gui_1.Button, { children: "hinted" }) }), (0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsx)(DialogTemplate_1.DialogTemplate, { title: "Delete agent", description: "This removes every run recorded against it.", confirm: { label: 'Delete', tone: 'danger' }, children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "body" }) }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "chat", children: [(0, jsx_runtime_1.jsxs)(gui_1.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: [(0, jsx_runtime_1.jsxs)(chat_1.Header, { title: "A conversation with a long enough name to clamp", leading: (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {}), onOpenMenu: NOOP, children: [(0, jsx_runtime_1.jsx)(chat_1.ShareButton, {}), (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {})] }), (0, jsx_runtime_1.jsx)(gui_1.Fill, { children: (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "plain Fill \u2014 the middle, without a Thread" }) }), (0, jsx_runtime_1.jsxs)(chat_1.Thread, { children: [(0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "ask" }), (0, jsx_runtime_1.jsxs)(chat_1.Message, { role: "assistant", icon: (0, jsx_runtime_1.jsx)(gui_1.Spinner, {}), actions: (0, jsx_runtime_1.jsx)(gui_1.Badge, { children: "copy" }), children: [(0, jsx_runtime_1.jsx)(chat_1.Step, { name: "shell", status: "running", detail: "git status --porcelain" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "write", status: "done", detail: "src/index.ts", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "json", value: "{}", children: '{}' }) }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "fetch", status: "error", detail: "timed out", children: "plain body" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "plan", status: "cancelled" }), (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "typescript", value: "const x = 1", children: "const x = 1" }), (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES })] }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", busy: true, children: "answering" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { onRetry: NOOP, children: "The model stopped before finishing." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { children: "Rate limited." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", body: { bg: '$color5', rounded: '$3' }, children: "restyled bubble" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "system", children: "note" })] }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "a draft", onChange: NOOP, onSend: NOOP, hint: "Enter to send", children: (0, jsx_runtime_1.jsx)(gui_1.Badge, { children: "tool" }) }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "", onChange: NOOP, onSend: NOOP, onStop: NOOP, busy: true })] }), (0, jsx_runtime_1.jsx)(chat_1.Aside, { children: (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: '100%', maxWidth: 260, height: 320 }, children: (0, jsx_runtime_1.jsxs)(chat_1.Sidebar, { children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarHeader, { title: "Hanzo", onOpenSwitcher: NOOP, onSearch: NOOP, onCollapse: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.SidebarNewChat, { onPress: NOOP }), (0, jsx_runtime_1.jsxs)(chat_1.SidebarScroll, { children: [(0, jsx_runtime_1.jsxs)(chat_1.SidebarSection, { label: "Today", children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { active: true, onPress: NOOP, children: "Selected thread" }), (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Another thread" })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarFolder, { name: "Archive", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Nested thread" }) })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarUser, { name: "z", secondary: "z@hanzo.ai", onPress: NOOP, onHelp: NOOP })] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "box", children: [(0, jsx_runtime_1.jsx)(box_1.Box, { className: "flex items-center gap-4 px-6 py-3 rounded-lg border", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "utility classes" }) }), (0, jsx_runtime_1.jsx)(box_1.Box, { className: "flex-col gap-2 max-w-3xl mx-auto overflow-hidden", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "column" }) })] })] }));
87
+ }, children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "center" }) }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "product-arrangements", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%', maxWidth: 320 }, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: 120 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: "100%", height: 72, rounded: "$4" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton.Text, { lines: 3 })] }), (0, jsx_runtime_1.jsx)(TooltipAnchor_1.TooltipAnchor, { description: "Delete this agent", children: (0, jsx_runtime_1.jsx)(gui_1.Button, { children: "hinted" }) }), (0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsx)(DialogTemplate_1.DialogTemplate, { title: "Delete agent", description: "This removes every run recorded against it.", confirm: { label: 'Delete', tone: 'danger' }, children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "body" }) }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "chat", children: [(0, jsx_runtime_1.jsxs)(gui_1.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: [(0, jsx_runtime_1.jsxs)(chat_1.Header, { title: "A conversation with a long enough name to clamp", leading: (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {}), onOpenMenu: NOOP, children: [(0, jsx_runtime_1.jsx)(chat_1.ShareButton, {}), (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {})] }), (0, jsx_runtime_1.jsx)(gui_1.Fill, { children: (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "plain Fill \u2014 the middle, without a Thread" }) }), (0, jsx_runtime_1.jsxs)(chat_1.Thread, { children: [(0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "ask" }), (0, jsx_runtime_1.jsxs)(chat_1.Message, { role: "assistant", icon: (0, jsx_runtime_1.jsx)(gui_1.Spinner, {}), actions: (0, jsx_runtime_1.jsx)(gui_1.Badge, { children: "copy" }), children: [(0, jsx_runtime_1.jsx)(chat_1.Step, { name: "shell", status: "running", detail: "git status --porcelain" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "write", status: "done", detail: "src/index.ts", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "json", value: "{}", children: '{}' }) }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "fetch", status: "error", detail: "timed out", children: "plain body" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "plan", status: "cancelled" }), (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "typescript", value: "const x = 1", children: "const x = 1" }), (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES })] }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", busy: true, children: "answering" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { onRetry: NOOP, children: "The model stopped before finishing." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { children: "Rate limited." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", body: { bg: '$color5', rounded: '$3' }, children: "restyled bubble" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "system", children: "note" })] }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "a draft", onChange: NOOP, onSend: NOOP, hint: "Enter to send", children: (0, jsx_runtime_1.jsx)(gui_1.Badge, { children: "tool" }) }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "", onChange: NOOP, onSend: NOOP, onStop: NOOP, busy: true })] }), (0, jsx_runtime_1.jsx)(gui_1.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { messages: TURNS, streaming: true, onSend: NOOP, onStop: NOOP, composer: { placeholder: 'Ask anything' } }) }), (0, jsx_runtime_1.jsx)(gui_1.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { messages: [], onSend: NOOP, empty: (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "system", children: "nothing yet" }) }) }), (0, jsx_runtime_1.jsx)(chat_1.Aside, { children: (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: '100%', maxWidth: 260, height: 320 }, children: (0, jsx_runtime_1.jsxs)(chat_1.Sidebar, { children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarHeader, { title: "Hanzo", onOpenSwitcher: NOOP, onSearch: NOOP, onCollapse: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.SidebarNewChat, { onPress: NOOP }), (0, jsx_runtime_1.jsxs)(chat_1.SidebarScroll, { children: [(0, jsx_runtime_1.jsxs)(chat_1.SidebarSection, { label: "Today", children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { active: true, onPress: NOOP, children: "Selected thread" }), (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Another thread" })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarFolder, { name: "Archive", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Nested thread" }) })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarUser, { name: "z", secondary: "z@hanzo.ai", onPress: NOOP, onHelp: NOOP })] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "box", children: [(0, jsx_runtime_1.jsx)(box_1.Box, { className: "flex items-center gap-4 px-6 py-3 rounded-lg border", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "utility classes" }) }), (0, jsx_runtime_1.jsx)(box_1.Box, { className: "flex-col gap-2 max-w-3xl mx-auto overflow-hidden", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "column" }) })] })] }));
83
88
  exports.Gallery = Gallery;
84
89
  exports.default = exports.Gallery;
package/dist/gallery.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AA2IA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CAyjBnB,CAAA;eAEc,OAAO"}
1
+ {"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAkJA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CA2kBnB,CAAA;eAEc,OAAO"}