@tangle-network/ui 11.12.0 → 11.13.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.
- package/CHANGELOG.md +17 -0
- package/dist/_virtual/_rolldown/runtime.js +13 -0
- package/dist/auth/auth.d.ts +53 -0
- package/dist/{auth-DOETfnd9.js → auth/auth.js} +7 -37
- package/dist/auth/login-layout.d.ts +20 -0
- package/dist/auth/login-layout.js +36 -0
- package/dist/auth.d.ts +2 -1
- package/dist/auth.js +2 -1
- package/dist/chat/agent-timeline.d.ts +83 -0
- package/dist/chat/agent-timeline.js +236 -0
- package/dist/chat/chat-container.d.ts +51 -0
- package/dist/chat/chat-container.js +309 -0
- package/dist/chat/chat-message.d.ts +22 -0
- package/dist/chat/chat-message.js +38 -0
- package/dist/chat/message-list.d.ts +32 -0
- package/dist/chat/message-list.js +37 -0
- package/dist/chat/thinking-indicator.d.ts +6 -0
- package/dist/chat/thinking-indicator.js +38 -0
- package/dist/chat/user-message.d.ts +21 -0
- package/dist/chat/user-message.js +42 -0
- package/dist/chat.d.ts +6 -1
- package/dist/chat.js +6 -1
- package/dist/editor/document-editor-pane.d.ts +37 -0
- package/dist/editor/document-editor-pane.js +199 -0
- package/dist/editor/editor-lazy.js +37 -0
- package/dist/editor/editor-loading.js +21 -0
- package/dist/editor/editor-peers.d.ts +6 -0
- package/dist/editor/editor-peers.js +155 -0
- package/dist/editor/editor-provider.d.ts +97 -0
- package/dist/editor/editor-provider.js +253 -0
- package/dist/editor/editor-toolbar.d.ts +11 -0
- package/dist/editor/editor-toolbar.js +106 -0
- package/dist/editor/markdown-conversion.js +23 -0
- package/dist/editor/markdown-document-editor.js +103 -0
- package/dist/editor/tiptap-editor.d.ts +45 -0
- package/dist/editor/tiptap-editor.js +271 -0
- package/dist/editor/use-editor.d.ts +67 -0
- package/dist/editor/use-editor.js +158 -0
- package/dist/editor.d.ts +6 -119
- package/dist/editor.js +5 -1
- package/dist/files/file-artifact-pane.d.ts +47 -0
- package/dist/files/file-artifact-pane.js +114 -0
- package/dist/files/file-format.d.ts +51 -0
- package/dist/{file-format-BgXbr-Ib.js → files/file-format.js} +1 -1
- package/dist/files/file-preview.d.ts +27 -0
- package/dist/files/file-preview.js +359 -0
- package/dist/files/file-tabs.d.ts +19 -0
- package/dist/files/file-tabs.js +48 -0
- package/dist/files/file-tree.d.ts +31 -0
- package/dist/files/file-tree.js +135 -0
- package/dist/files/rich-file-tree.d.ts +62 -0
- package/dist/files/rich-file-tree.js +122 -0
- package/dist/files.d.ts +6 -1
- package/dist/files.js +6 -2
- package/dist/hooks/use-auth.d.ts +40 -0
- package/dist/hooks/use-auth.js +91 -0
- package/dist/hooks/use-auto-scroll.d.ts +11 -0
- package/dist/hooks/use-auto-scroll.js +48 -0
- package/dist/hooks/use-dropdown-menu.d.ts +12 -0
- package/dist/hooks/use-dropdown-menu.js +31 -0
- package/dist/hooks/use-live-time.d.ts +7 -0
- package/dist/hooks/use-live-time.js +22 -0
- package/dist/hooks/use-realtime-session.d.ts +32 -0
- package/dist/hooks/use-realtime-session.js +235 -0
- package/dist/hooks/use-run-collapse-state.d.ts +13 -0
- package/dist/hooks/use-run-collapse-state.js +24 -0
- package/dist/hooks/use-run-groups.d.ts +11 -0
- package/dist/hooks/use-run-groups.js +85 -0
- package/dist/hooks/use-sdk-session.d.ts +59 -0
- package/dist/hooks/use-sdk-session.js +322 -0
- package/dist/hooks/use-sse-stream.d.ts +124 -0
- package/dist/hooks/use-sse-stream.js +229 -0
- package/dist/hooks/use-tool-call-stream.d.ts +23 -0
- package/dist/hooks/use-tool-call-stream.js +75 -0
- package/dist/hooks.d.ts +11 -49
- package/dist/hooks.js +10 -110
- package/dist/index.d.ts +99 -25
- package/dist/index.js +86 -36
- package/dist/lib/focus.d.ts +55 -0
- package/dist/{focus-BcE_SHqz.js → lib/focus.js} +1 -1
- package/dist/lib/utils.d.ts +4 -0
- package/dist/{utils-C_uf36nf.js → lib/utils.js} +1 -1
- package/dist/{code-block-B9miUPht.d.ts → markdown/code-block.d.ts} +5 -6
- package/dist/{code-block-B36KVUSN.js → markdown/code-block.js} +22 -47
- package/dist/{markdown-C0atSabr.d.ts → markdown/markdown.d.ts} +4 -5
- package/dist/{markdown-Db08KAYF.js → markdown/markdown.js} +3 -3
- package/dist/markdown.d.ts +2 -2
- package/dist/markdown.js +2 -2
- package/dist/{openui-artifact-renderer-fkBQaoLO.d.ts → openui/openui-artifact-renderer.d.ts} +20 -21
- package/dist/{openui-artifact-renderer-DG_i2lOR.js → openui/openui-artifact-renderer.js} +9 -7
- package/dist/{schema-BpW9rSSG.js → openui/schema-compiled.js} +2 -354
- package/dist/{schema-DAstk-J4.d.ts → openui/schema-data.d.ts} +3 -24
- package/dist/openui/schema-data.js +206 -0
- package/dist/openui-schema.d.ts +22 -3
- package/dist/openui-schema.js +138 -1
- package/dist/openui.d.ts +3 -2
- package/dist/openui.js +3 -2
- package/dist/{artifact-pane-BL_DFWNl.d.ts → primitives/artifact-pane.d.ts} +3 -4
- package/dist/{artifact-pane-DMXT9a8U.js → primitives/artifact-pane.js} +2 -2
- package/dist/primitives/avatar.d.ts +8 -0
- package/dist/primitives/avatar.js +25 -0
- package/dist/primitives/badge.d.ts +22 -0
- package/dist/primitives/badge.js +47 -0
- package/dist/{button-yoIv77e2.d.ts → primitives/button.d.ts} +2 -2
- package/dist/primitives/button.js +113 -0
- package/dist/primitives/card.d.ts +18 -0
- package/dist/primitives/card.js +52 -0
- package/dist/primitives/code-block.d.ts +6 -0
- package/dist/primitives/code-block.js +13 -0
- package/dist/primitives/dialog.d.ts +23 -0
- package/dist/primitives/dialog.js +59 -0
- package/dist/primitives/drop-zone.d.ts +23 -0
- package/dist/primitives/drop-zone.js +104 -0
- package/dist/primitives/dropdown-menu.d.ts +29 -0
- package/dist/{dropdown-menu-BpcLa5vF.js → primitives/dropdown-menu.js} +2 -23
- package/dist/primitives/empty-state.d.ts +11 -0
- package/dist/primitives/empty-state.js +32 -0
- package/dist/primitives/heading.d.ts +23 -0
- package/dist/primitives/heading.js +38 -0
- package/dist/primitives/input.d.ts +23 -0
- package/dist/primitives/input.js +110 -0
- package/dist/primitives/label.d.ts +6 -0
- package/dist/primitives/label.js +16 -0
- package/dist/primitives/metric-strip.d.ts +48 -0
- package/dist/primitives/metric-strip.js +52 -0
- package/dist/primitives/page-header.d.ts +25 -0
- package/dist/primitives/page-header.js +47 -0
- package/dist/primitives/page-shell.d.ts +14 -0
- package/dist/primitives/page-shell.js +17 -0
- package/dist/primitives/progress.d.ts +9 -0
- package/dist/primitives/progress.js +29 -0
- package/dist/primitives/segmented-control.d.ts +40 -0
- package/dist/primitives/segmented-control.js +57 -0
- package/dist/primitives/select.d.ts +15 -0
- package/dist/primitives/select.js +74 -0
- package/dist/primitives/sidebar-drop-zone.d.ts +21 -0
- package/dist/primitives/sidebar-drop-zone.js +88 -0
- package/dist/primitives/skeleton.d.ts +10 -0
- package/dist/primitives/skeleton.js +50 -0
- package/dist/primitives/stat-card.d.ts +16 -0
- package/dist/primitives/stat-card.js +60 -0
- package/dist/primitives/status-pill.d.ts +44 -0
- package/dist/primitives/status-pill.js +119 -0
- package/dist/primitives/switch.d.ts +6 -0
- package/dist/primitives/switch.js +16 -0
- package/dist/primitives/table.d.ts +22 -0
- package/dist/primitives/table.js +63 -0
- package/dist/primitives/tabs.d.ts +13 -0
- package/dist/{tabs-BVHR6NkO.js → primitives/tabs.js} +3 -3
- package/dist/primitives/terminal-display.d.ts +25 -0
- package/dist/primitives/terminal-display.js +109 -0
- package/dist/primitives/text-shimmer.d.ts +16 -0
- package/dist/{text-shimmer-BUUo6I-g.js → primitives/text-shimmer.js} +2 -2
- package/dist/primitives/theme-toggle.d.ts +11 -0
- package/dist/primitives/theme-toggle.js +154 -0
- package/dist/primitives/toast.d.ts +29 -0
- package/dist/primitives/toast.js +142 -0
- package/dist/primitives/toolbar.d.ts +55 -0
- package/dist/primitives/toolbar.js +37 -0
- package/dist/primitives/upload-progress.d.ts +23 -0
- package/dist/primitives/upload-progress.js +72 -0
- package/dist/primitives.d.ts +35 -5
- package/dist/primitives.js +35 -9
- package/dist/{index-COgqsFAQ.d.ts → redaction/redacted-document.d.ts} +6 -7
- package/dist/{redaction-CGGB2ENG.js → redaction/redacted-document.js} +2 -2
- package/dist/redaction.d.ts +1 -1
- package/dist/redaction.js +1 -1
- package/dist/run/expandable-content.js +41 -0
- package/dist/run/expanded-tool-detail.d.ts +12 -0
- package/dist/run/expanded-tool-detail.js +163 -0
- package/dist/run/inline-thinking-item.d.ts +11 -0
- package/dist/run/inline-thinking-item.js +60 -0
- package/dist/run/inline-tool-item.d.ts +25 -0
- package/dist/run/inline-tool-item.js +63 -0
- package/dist/run/run-group.d.ts +26 -0
- package/dist/{run-group-BWGeesgs.js → run/run-group.js} +9 -60
- package/dist/run/run-item-primitives.d.ts +5 -0
- package/dist/{run-ZsIKPA6J.js → run/run-item-primitives.js} +2 -2
- package/dist/run/run-row-shell.d.ts +53 -0
- package/dist/run/run-row-shell.js +114 -0
- package/dist/{tool-call-feed-BeB1_4pX.d.ts → run/tool-call-feed.d.ts} +7 -12
- package/dist/{tool-call-feed-BpmMLpPX.js → run/tool-call-feed.js} +4 -4
- package/dist/run/tool-call-step.d.ts +5 -0
- package/dist/run/tool-call-step.js +82 -0
- package/dist/run.d.ts +8 -2
- package/dist/run.js +7 -4
- package/dist/sdk-hooks.d.ts +8 -1
- package/dist/sdk-hooks.js +8 -2
- package/dist/stores/active-sessions-store.d.ts +83 -0
- package/dist/{active-sessions-store-Gt1R0rFG.js → stores/active-sessions-store.js} +1 -1
- package/dist/stores/chat-store.d.ts +14 -0
- package/dist/stores/chat-store.js +33 -0
- package/dist/stores.d.ts +3 -16
- package/dist/stores.js +2 -33
- package/dist/tool-previews/command-preview.d.ts +11 -0
- package/dist/tool-previews/command-preview.js +91 -0
- package/dist/tool-previews/diff-preview.d.ts +7 -0
- package/dist/tool-previews/diff-preview.js +76 -0
- package/dist/tool-previews/glob-results-preview.d.ts +7 -0
- package/dist/tool-previews/glob-results-preview.js +53 -0
- package/dist/tool-previews/grep-results-preview.d.ts +7 -0
- package/dist/tool-previews/grep-results-preview.js +99 -0
- package/dist/tool-previews/preview-primitives.js +58 -0
- package/dist/tool-previews/question-preview.d.ts +7 -0
- package/dist/tool-previews/question-preview.js +63 -0
- package/dist/tool-previews/web-search-preview.d.ts +7 -0
- package/dist/tool-previews/web-search-preview.js +78 -0
- package/dist/tool-previews/write-file-preview.d.ts +11 -0
- package/dist/tool-previews/write-file-preview.js +52 -0
- package/dist/tool-previews.d.ts +7 -1
- package/dist/tool-previews.js +7 -1
- package/dist/{branding-26d5ARIr.d.ts → types/branding.d.ts} +2 -3
- package/dist/{message-vhUI0c5G.d.ts → types/message.d.ts} +2 -3
- package/dist/{parts-5mhy9yJ3.d.ts → types/parts.d.ts} +8 -9
- package/dist/{run-OyWmIDqu.d.ts → types/run.d.ts} +9 -10
- package/dist/{tool-display-DgmL5rIU.d.ts → types/tool-display.d.ts} +5 -6
- package/dist/types.d.ts +5 -5
- package/dist/utils/copy-text.d.ts +7 -0
- package/dist/{utils-Bl_CZ0Qp.js → utils/copy-text.js} +1 -11
- package/dist/utils/format.d.ts +22 -0
- package/dist/{format-DfcLWqMa.js → utils/format.js} +1 -1
- package/dist/utils/time-ago.d.ts +3 -0
- package/dist/utils/time-ago.js +11 -0
- package/dist/utils/tool-display.d.ts +16 -0
- package/dist/{tool-display-BAuAVa43.js → utils/tool-display.js} +1 -1
- package/dist/utils.d.ts +6 -1
- package/dist/utils.js +6 -5
- package/package.json +2 -2
- package/src/files/rich-file-tree.stories.tsx +1 -1
- package/src/files/rich-file-tree.tsx +12 -9
- package/src/markdown/code-block.test.tsx +46 -2
- package/src/markdown/code-block.tsx +23 -60
- package/src/primitives/button.stories.tsx +37 -1
- package/src/primitives/button.test.tsx +230 -0
- package/src/primitives/button.tsx +62 -14
- package/src/primitives/card-anatomy.stories.tsx +51 -0
- package/src/primitives/card.test.tsx +71 -0
- package/src/primitives/card.tsx +25 -13
- package/src/primitives/heading.stories.tsx +35 -0
- package/src/primitives/heading.test.tsx +56 -0
- package/src/primitives/heading.tsx +76 -0
- package/src/primitives/index.ts +8 -0
- package/src/primitives/input.stories.tsx +28 -0
- package/src/primitives/input.test.tsx +161 -0
- package/src/primitives/input.tsx +34 -28
- package/src/primitives/page-header.stories.tsx +51 -0
- package/src/primitives/page-header.test.tsx +48 -0
- package/src/primitives/page-header.tsx +35 -35
- package/src/primitives/page-shell.stories.tsx +89 -0
- package/src/primitives/page-shell.test.tsx +24 -0
- package/src/primitives/page-shell.tsx +26 -0
- package/src/primitives/table-wrapper.stories.tsx +54 -0
- package/src/primitives/table.test.tsx +72 -0
- package/src/primitives/table.tsx +33 -12
- package/src/primitives/theme-toggle.test.tsx +167 -0
- package/src/primitives/theme-toggle.tsx +111 -39
- package/dist/active-sessions-store-nl70ZnMC.d.ts +0 -84
- package/dist/button-C87nEe2R.js +0 -78
- package/dist/chat-DDvF2oGQ.js +0 -672
- package/dist/diff-preview-BcK3nRXb.js +0 -533
- package/dist/document-editor-pane-BilJfiCo.d.ts +0 -136
- package/dist/document-editor-pane-POsq5Q0o.js +0 -1279
- package/dist/files-hywocVZz.js +0 -753
- package/dist/index-2UntyjBb.d.ts +0 -52
- package/dist/index-BgUHilZm.d.ts +0 -108
- package/dist/index-CJ8wRfiC.d.ts +0 -236
- package/dist/index-CPDET_s1.d.ts +0 -549
- package/dist/index-Cg6gYAqh.d.ts +0 -73
- package/dist/index-Cs7j8V7l.d.ts +0 -203
- package/dist/index-DjKxO357.d.ts +0 -128
- package/dist/primitives-Bx59fT-U.js +0 -1239
- package/dist/table-Bss73DhB.js +0 -146
- package/dist/tool-call-step-DNebqhmX.js +0 -434
- package/dist/use-auto-scroll-C5Pjeqon.js +0 -153
- package/dist/use-sse-stream-DjqRuDft.js +0 -884
- package/dist/use-sse-stream-Dm6R5YWz.d.ts +0 -282
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//#region src/primitives/toolbar.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* The control row above a table or list: search, filters, then the view switch.
|
|
5
|
+
*
|
|
6
|
+
* It exists because the alternative keeps producing the same two failures. A
|
|
7
|
+
* bare flex row gives every control its natural width, so a search field sits
|
|
8
|
+
* at 1120px on one line and three selects stack full-width beneath it — three
|
|
9
|
+
* enormous empty bars where a compact bar belongs. And each control brought its
|
|
10
|
+
* own visual language, so one row carried a native `<select>`, a custom input
|
|
11
|
+
* and a segmented control side by side.
|
|
12
|
+
*
|
|
13
|
+
* So search and filters SHARE the free space and `actions` stays at its content
|
|
14
|
+
* width, and the row is the one place those controls are composed, which is what
|
|
15
|
+
* keeps them looking like one set.
|
|
16
|
+
*
|
|
17
|
+
* Sharing is deliberate, and the alternative is worse. Giving the filter row its
|
|
18
|
+
* content width starves search: measured with a 537px filter row in an 832px
|
|
19
|
+
* toolbar, the search field collapses to 89px. Letting both flex bounds the
|
|
20
|
+
* filter row instead, so it scrolls within its half — 313px each in that same
|
|
21
|
+
* case — and search stays usable however many filters a page adds. `max-w-sm`
|
|
22
|
+
* then stops search claiming more than it can use when there are few filters.
|
|
23
|
+
*
|
|
24
|
+
* On a narrow viewport the row becomes a column and the filters scroll
|
|
25
|
+
* horizontally as a group rather than wrapping into a tall stack that pushes
|
|
26
|
+
* the table itself below the fold.
|
|
27
|
+
*/
|
|
28
|
+
/**
|
|
29
|
+
* Slots only — `children` is omitted deliberately. A free child would render as
|
|
30
|
+
* a bare flex item with none of the `min-w-0` / `shrink-0` guards the named
|
|
31
|
+
* slots carry, so it would size itself off its content and push the row into
|
|
32
|
+
* the overflow this layout exists to prevent.
|
|
33
|
+
*/
|
|
34
|
+
export interface ToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
35
|
+
/** The one control that expands to fill the row. */
|
|
36
|
+
search?: React.ReactNode;
|
|
37
|
+
/** Filters, in reading order. Kept on one scrollable line when space runs out. */
|
|
38
|
+
filters?: React.ReactNode;
|
|
39
|
+
/** View switches and exports, pinned to the end. */
|
|
40
|
+
actions?: React.ReactNode;
|
|
41
|
+
}
|
|
42
|
+
declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
/**
|
|
44
|
+
* A labelled filter control. The label is visible, not a placeholder: a select
|
|
45
|
+
* whose current value IS its label ("All products") tells the reader what is
|
|
46
|
+
* selected but never what the control governs, so a row of three reads as three
|
|
47
|
+
* unrelated words.
|
|
48
|
+
*/
|
|
49
|
+
export interface FilterFieldProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
50
|
+
label: string;
|
|
51
|
+
htmlFor?: string;
|
|
52
|
+
}
|
|
53
|
+
declare const FilterField: React.ForwardRefExoticComponent<FilterFieldProps & React.RefAttributes<HTMLDivElement>>;
|
|
54
|
+
//#endregion
|
|
55
|
+
export { FilterField, Toolbar };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/primitives/toolbar.tsx
|
|
5
|
+
const Toolbar = React.forwardRef(({ className, search, filters, actions, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
|
|
6
|
+
ref,
|
|
7
|
+
className: cn("mb-4 flex flex-col gap-3 lg:flex-row lg:items-center", className),
|
|
8
|
+
...props,
|
|
9
|
+
children: [
|
|
10
|
+
search && /* @__PURE__ */ jsx("div", {
|
|
11
|
+
className: "min-w-0 lg:max-w-sm lg:flex-1",
|
|
12
|
+
children: search
|
|
13
|
+
}),
|
|
14
|
+
filters && /* @__PURE__ */ jsx("div", {
|
|
15
|
+
className: "flex min-w-0 items-center gap-2 overflow-x-auto py-1 lg:flex-1",
|
|
16
|
+
children: filters
|
|
17
|
+
}),
|
|
18
|
+
actions && /* @__PURE__ */ jsx("div", {
|
|
19
|
+
className: "flex shrink-0 items-center gap-2 lg:ml-auto",
|
|
20
|
+
children: actions
|
|
21
|
+
})
|
|
22
|
+
]
|
|
23
|
+
}));
|
|
24
|
+
Toolbar.displayName = "Toolbar";
|
|
25
|
+
const FilterField = React.forwardRef(({ className, label, htmlFor, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
|
|
26
|
+
ref,
|
|
27
|
+
className: cn("flex shrink-0 items-center gap-2", className),
|
|
28
|
+
...props,
|
|
29
|
+
children: [/* @__PURE__ */ jsx("label", {
|
|
30
|
+
htmlFor,
|
|
31
|
+
className: "whitespace-nowrap text-muted-foreground text-xs",
|
|
32
|
+
children: label
|
|
33
|
+
}), children]
|
|
34
|
+
}));
|
|
35
|
+
FilterField.displayName = "FilterField";
|
|
36
|
+
//#endregion
|
|
37
|
+
export { FilterField, Toolbar };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
//#region src/primitives/upload-progress.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* UploadProgress — file upload status indicators.
|
|
4
|
+
*
|
|
5
|
+
* Shows a list of files being uploaded with progress bars,
|
|
6
|
+
* completion checkmarks, and error states.
|
|
7
|
+
*/
|
|
8
|
+
export interface UploadFile {
|
|
9
|
+
id: string;
|
|
10
|
+
name: string;
|
|
11
|
+
size: number;
|
|
12
|
+
status: "pending" | "uploading" | "complete" | "error";
|
|
13
|
+
progress?: number;
|
|
14
|
+
error?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface UploadProgressProps {
|
|
17
|
+
files: UploadFile[];
|
|
18
|
+
onRemove?: (id: string) => void;
|
|
19
|
+
onRetry?: (id: string) => void;
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare function UploadProgress({ files, onRemove, onRetry, className }: UploadProgressProps): import("react").JSX.Element | null;
|
|
23
|
+
//#endregion
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { AlertCircle, CheckCircle2, FileText, Loader2, RefreshCw, X } from "lucide-react";
|
|
4
|
+
//#region src/primitives/upload-progress.tsx
|
|
5
|
+
/**
|
|
6
|
+
* UploadProgress — file upload status indicators.
|
|
7
|
+
*
|
|
8
|
+
* Shows a list of files being uploaded with progress bars,
|
|
9
|
+
* completion checkmarks, and error states.
|
|
10
|
+
*/
|
|
11
|
+
function formatSize(bytes) {
|
|
12
|
+
if (bytes < 1024) return `${bytes}B`;
|
|
13
|
+
if (bytes < 1048576) return `${(bytes / 1024).toFixed(0)}KB`;
|
|
14
|
+
return `${(bytes / 1048576).toFixed(1)}MB`;
|
|
15
|
+
}
|
|
16
|
+
function UploadProgress({ files, onRemove, onRetry, className }) {
|
|
17
|
+
if (files.length === 0) return null;
|
|
18
|
+
return /* @__PURE__ */ jsx("div", {
|
|
19
|
+
className: cn("space-y-2", className),
|
|
20
|
+
children: files.map((file) => /* @__PURE__ */ jsxs("div", {
|
|
21
|
+
className: cn("flex items-center gap-3 rounded-lg border px-3 py-2 text-sm", file.status === "error" ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]" : file.status === "complete" ? "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]" : "border-border bg-card"),
|
|
22
|
+
children: [
|
|
23
|
+
file.status === "complete" && /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 shrink-0 text-[var(--surface-success-text)]" }),
|
|
24
|
+
file.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 shrink-0 text-[var(--surface-danger-text)]" }),
|
|
25
|
+
file.status === "uploading" && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-primary" }),
|
|
26
|
+
file.status === "pending" && /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
|
|
27
|
+
/* @__PURE__ */ jsxs("div", {
|
|
28
|
+
className: "min-w-0 flex-1",
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ jsxs("div", {
|
|
31
|
+
className: "flex items-center gap-2",
|
|
32
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
33
|
+
className: "truncate font-medium text-foreground",
|
|
34
|
+
children: file.name
|
|
35
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
36
|
+
className: "shrink-0 text-xs text-muted-foreground",
|
|
37
|
+
children: formatSize(file.size)
|
|
38
|
+
})]
|
|
39
|
+
}),
|
|
40
|
+
file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx("div", {
|
|
41
|
+
className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted/50",
|
|
42
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
43
|
+
className: "h-full rounded-full bg-primary transition-all",
|
|
44
|
+
style: { width: `${file.progress}%` }
|
|
45
|
+
})
|
|
46
|
+
}),
|
|
47
|
+
file.status === "error" && file.error && /* @__PURE__ */ jsx("p", {
|
|
48
|
+
className: "mt-0.5 text-xs text-[var(--surface-danger-text)]",
|
|
49
|
+
children: file.error
|
|
50
|
+
})
|
|
51
|
+
]
|
|
52
|
+
}),
|
|
53
|
+
/* @__PURE__ */ jsxs("div", {
|
|
54
|
+
className: "flex shrink-0 items-center gap-1",
|
|
55
|
+
children: [file.status === "error" && onRetry && /* @__PURE__ */ jsx("button", {
|
|
56
|
+
type: "button",
|
|
57
|
+
onClick: () => onRetry(file.id),
|
|
58
|
+
className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
|
|
59
|
+
children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3.5 w-3.5" })
|
|
60
|
+
}), onRemove && /* @__PURE__ */ jsx("button", {
|
|
61
|
+
type: "button",
|
|
62
|
+
onClick: () => onRemove(file.id),
|
|
63
|
+
className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
|
|
64
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
|
|
65
|
+
})]
|
|
66
|
+
})
|
|
67
|
+
]
|
|
68
|
+
}, file.id))
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
//#endregion
|
|
72
|
+
export { UploadProgress };
|
package/dist/primitives.d.ts
CHANGED
|
@@ -1,5 +1,35 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
|
|
2
|
+
import { ArtifactPane, ArtifactPaneProps } from "./primitives/artifact-pane.js";
|
|
3
|
+
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardTitleProps } from "./primitives/card.js";
|
|
4
|
+
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
|
|
5
|
+
import { Input, InputProps, Textarea, TextareaProps } from "./primitives/input.js";
|
|
6
|
+
import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
|
|
7
|
+
import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
|
|
8
|
+
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
|
|
9
|
+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
|
|
10
|
+
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableProps, TableRow } from "./primitives/table.js";
|
|
11
|
+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
|
|
12
|
+
import { SegmentedControl, SegmentedControlOption, SegmentedControlProps } from "./primitives/segmented-control.js";
|
|
13
|
+
import { Progress } from "./primitives/progress.js";
|
|
14
|
+
import { Switch } from "./primitives/switch.js";
|
|
15
|
+
import { Skeleton, SkeletonCard, SkeletonTable } from "./primitives/skeleton.js";
|
|
16
|
+
import { TextShimmer, TextShimmerProps } from "./primitives/text-shimmer.js";
|
|
17
|
+
import { Toast, ToastContainer, ToastProvider, useToast } from "./primitives/toast.js";
|
|
18
|
+
import { Label } from "./primitives/label.js";
|
|
19
|
+
import { EmptyState, EmptyStateProps } from "./primitives/empty-state.js";
|
|
20
|
+
import { StatCard, StatCardProps } from "./primitives/stat-card.js";
|
|
21
|
+
import { TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine } from "./primitives/terminal-display.js";
|
|
22
|
+
import { DropZone, DropZoneProps } from "./primitives/drop-zone.js";
|
|
23
|
+
import { UploadFile, UploadProgress, UploadProgressProps } from "./primitives/upload-progress.js";
|
|
24
|
+
import { SidebarDropZone, SidebarDropZoneProps } from "./primitives/sidebar-drop-zone.js";
|
|
25
|
+
import { CodeBlock, CodeBlockProps, CopyButton } from "./markdown/code-block.js";
|
|
26
|
+
import { InlineCode, InlineCodeProps } from "./primitives/code-block.js";
|
|
27
|
+
import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
|
|
28
|
+
import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
|
|
29
|
+
import { PageShell, PageShellProps } from "./primitives/page-shell.js";
|
|
30
|
+
import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
|
|
31
|
+
import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
|
|
32
|
+
import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
|
|
33
|
+
import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
|
|
34
|
+
import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
|
|
35
|
+
export { ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, CodeBlock, type CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast };
|
package/dist/primitives.js
CHANGED
|
@@ -1,9 +1,35 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
1
|
+
import { Button, buttonVariants } from "./primitives/button.js";
|
|
2
|
+
import { Heading } from "./primitives/heading.js";
|
|
3
|
+
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./primitives/card.js";
|
|
4
|
+
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
|
|
5
|
+
import { Label } from "./primitives/label.js";
|
|
6
|
+
import { Input, Textarea } from "./primitives/input.js";
|
|
7
|
+
import { Badge, badgeVariants } from "./primitives/badge.js";
|
|
8
|
+
import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
|
|
9
|
+
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
|
|
10
|
+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
|
|
11
|
+
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./primitives/table.js";
|
|
12
|
+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
|
|
13
|
+
import { SegmentedControl } from "./primitives/segmented-control.js";
|
|
14
|
+
import { Progress } from "./primitives/progress.js";
|
|
15
|
+
import { Switch } from "./primitives/switch.js";
|
|
16
|
+
import { Skeleton, SkeletonCard, SkeletonTable } from "./primitives/skeleton.js";
|
|
17
|
+
import { TextShimmer } from "./primitives/text-shimmer.js";
|
|
18
|
+
import { ToastContainer, ToastProvider, useToast } from "./primitives/toast.js";
|
|
19
|
+
import { EmptyState } from "./primitives/empty-state.js";
|
|
20
|
+
import { StatCard } from "./primitives/stat-card.js";
|
|
21
|
+
import { TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine } from "./primitives/terminal-display.js";
|
|
22
|
+
import { DropZone } from "./primitives/drop-zone.js";
|
|
23
|
+
import { UploadProgress } from "./primitives/upload-progress.js";
|
|
24
|
+
import { SidebarDropZone } from "./primitives/sidebar-drop-zone.js";
|
|
25
|
+
import { ArtifactPane } from "./primitives/artifact-pane.js";
|
|
26
|
+
import { CodeBlock, CopyButton } from "./markdown/code-block.js";
|
|
27
|
+
import { InlineCode } from "./primitives/code-block.js";
|
|
28
|
+
import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
|
|
29
|
+
import { PageShell } from "./primitives/page-shell.js";
|
|
30
|
+
import { PageHeader } from "./primitives/page-header.js";
|
|
31
|
+
import { StatusPill } from "./primitives/status-pill.js";
|
|
32
|
+
import { Metric, MetricStrip } from "./primitives/metric-strip.js";
|
|
33
|
+
import { FilterField, Toolbar } from "./primitives/toolbar.js";
|
|
34
|
+
import { Logo, TangleKnot } from "@tangle-network/brand";
|
|
35
|
+
export { ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatusPill, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, UploadProgress, badgeVariants, buttonVariants, useTheme, useToast };
|
|
@@ -11,7 +11,7 @@ import { ReactNode } from "react";
|
|
|
11
11
|
* Structural types (no `@tangle-network/agent-app` dependency) — the viewer needs
|
|
12
12
|
* only `{ id, kind }` per span; the cipher stays server-side.
|
|
13
13
|
*/
|
|
14
|
-
type RedactedDocSegment = {
|
|
14
|
+
export type RedactedDocSegment = {
|
|
15
15
|
type: "text";
|
|
16
16
|
text: string;
|
|
17
17
|
} | {
|
|
@@ -19,16 +19,16 @@ type RedactedDocSegment = {
|
|
|
19
19
|
id: string;
|
|
20
20
|
kind: string;
|
|
21
21
|
};
|
|
22
|
-
interface RedactedDocumentData {
|
|
22
|
+
export interface RedactedDocumentData {
|
|
23
23
|
segments: RedactedDocSegment[];
|
|
24
24
|
}
|
|
25
|
-
interface RevealResult {
|
|
25
|
+
export interface RevealResult {
|
|
26
26
|
ok: boolean;
|
|
27
27
|
value?: string;
|
|
28
28
|
/** e.g. `forbidden` | `not_found` when `ok` is false. */
|
|
29
29
|
reason?: string;
|
|
30
30
|
}
|
|
31
|
-
interface RedactedDocumentProps {
|
|
31
|
+
export interface RedactedDocumentProps {
|
|
32
32
|
document: RedactedDocumentData;
|
|
33
33
|
/** Reveal one span by id. Wire to a server route that calls agent-app's
|
|
34
34
|
* `revealSpan` (authz + audit happen there). Resolves with the original. */
|
|
@@ -37,6 +37,5 @@ interface RedactedDocumentProps {
|
|
|
37
37
|
labelForKind?: (kind: string) => string;
|
|
38
38
|
className?: string;
|
|
39
39
|
}
|
|
40
|
-
declare function RedactedDocument({ document, onReveal, labelForKind, className }: RedactedDocumentProps): ReactNode;
|
|
41
|
-
//#endregion
|
|
42
|
-
export { RevealResult as a, RedactedDocumentProps as i, RedactedDocument as n, RedactedDocumentData as r, RedactedDocSegment as t };
|
|
40
|
+
export declare function RedactedDocument({ document, onReveal, labelForKind, className }: RedactedDocumentProps): ReactNode;
|
|
41
|
+
//#endregion
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
2
|
import { useCallback, useState } from "react";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { Eye, EyeOff, Loader2, ShieldAlert } from "lucide-react";
|
|
@@ -71,4 +71,4 @@ function RedactedDocument({ document, onReveal, labelForKind = defaultLabel, cla
|
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
73
|
//#endregion
|
|
74
|
-
export { RedactedDocument
|
|
74
|
+
export { RedactedDocument };
|
package/dist/redaction.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
|
|
2
2
|
export { type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, type RevealResult };
|
package/dist/redaction.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RedactedDocument } from "./redaction/redacted-document.js";
|
|
2
2
|
export { RedactedDocument };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/run/expandable-content.tsx
|
|
5
|
+
/**
|
|
6
|
+
* Clamps tall content to a fixed height with a bottom fade and a
|
|
7
|
+
* "Show more / Show less" toggle. Content shorter than the cap renders
|
|
8
|
+
* as-is with no toggle.
|
|
9
|
+
*/
|
|
10
|
+
function ExpandableContent({ children, collapsedMaxPx = 180, fadeClassName = "from-muted", className }) {
|
|
11
|
+
const [expanded, setExpanded] = useState(false);
|
|
12
|
+
const [overflowing, setOverflowing] = useState(false);
|
|
13
|
+
const contentRef = useRef(null);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
const el = contentRef.current;
|
|
16
|
+
if (!el) return;
|
|
17
|
+
const measure = () => setOverflowing(el.scrollHeight > collapsedMaxPx + 4);
|
|
18
|
+
measure();
|
|
19
|
+
if (typeof ResizeObserver === "undefined") return;
|
|
20
|
+
const observer = new ResizeObserver(measure);
|
|
21
|
+
observer.observe(el);
|
|
22
|
+
return () => observer.disconnect();
|
|
23
|
+
}, [collapsedMaxPx]);
|
|
24
|
+
const clamped = overflowing && !expanded;
|
|
25
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
26
|
+
className,
|
|
27
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
28
|
+
ref: contentRef,
|
|
29
|
+
className: "relative overflow-hidden",
|
|
30
|
+
style: clamped ? { maxHeight: collapsedMaxPx } : void 0,
|
|
31
|
+
children: [children, clamped ? /* @__PURE__ */ jsx("div", { className: cn("pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent", fadeClassName) }) : null]
|
|
32
|
+
}), overflowing ? /* @__PURE__ */ jsx("button", {
|
|
33
|
+
type: "button",
|
|
34
|
+
onClick: () => setExpanded((value) => !value),
|
|
35
|
+
className: "mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
|
|
36
|
+
children: expanded ? "Show less" : "Show more"
|
|
37
|
+
}) : null]
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
//#endregion
|
|
41
|
+
export { ExpandableContent };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ToolPart } from "../types/parts.js";
|
|
2
|
+
//#region src/run/expanded-tool-detail.d.ts
|
|
3
|
+
export interface ExpandedToolDetailProps {
|
|
4
|
+
part: ToolPart;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Renders full tool details when a tool item is expanded.
|
|
8
|
+
* Dispatches to specialised previews (CommandPreview, WriteFilePreview)
|
|
9
|
+
* or falls back to a generic input/output code view.
|
|
10
|
+
*/
|
|
11
|
+
export declare const ExpandedToolDetail: import("react").MemoExoticComponent<({ part }: ExpandedToolDetailProps) => import("react").JSX.Element>;
|
|
12
|
+
//#endregion
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { CodeBlock } from "../markdown/code-block.js";
|
|
3
|
+
import { getToolDisplayMetadata } from "../utils/tool-display.js";
|
|
4
|
+
import { CommandPreview } from "../tool-previews/command-preview.js";
|
|
5
|
+
import { WriteFilePreview } from "../tool-previews/write-file-preview.js";
|
|
6
|
+
import { GrepResultsPreview } from "../tool-previews/grep-results-preview.js";
|
|
7
|
+
import { GlobResultsPreview } from "../tool-previews/glob-results-preview.js";
|
|
8
|
+
import { WebSearchPreview } from "../tool-previews/web-search-preview.js";
|
|
9
|
+
import { QuestionPreview } from "../tool-previews/question-preview.js";
|
|
10
|
+
import { DiffPreview } from "../tool-previews/diff-preview.js";
|
|
11
|
+
import { ExpandableContent } from "./expandable-content.js";
|
|
12
|
+
import { memo } from "react";
|
|
13
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
+
import { AlertCircle, ArrowLeft, ArrowRight, FileText, Loader2 } from "lucide-react";
|
|
15
|
+
//#region src/run/expanded-tool-detail.tsx
|
|
16
|
+
const EXT_LANG = {
|
|
17
|
+
ts: "typescript",
|
|
18
|
+
tsx: "tsx",
|
|
19
|
+
js: "javascript",
|
|
20
|
+
jsx: "jsx",
|
|
21
|
+
rs: "rust",
|
|
22
|
+
py: "python",
|
|
23
|
+
go: "go",
|
|
24
|
+
rb: "ruby",
|
|
25
|
+
json: "json",
|
|
26
|
+
yaml: "yaml",
|
|
27
|
+
yml: "yaml",
|
|
28
|
+
toml: "toml",
|
|
29
|
+
md: "markdown",
|
|
30
|
+
css: "css",
|
|
31
|
+
scss: "scss",
|
|
32
|
+
html: "html",
|
|
33
|
+
sh: "bash",
|
|
34
|
+
bash: "bash",
|
|
35
|
+
zsh: "bash",
|
|
36
|
+
sql: "sql",
|
|
37
|
+
sol: "solidity",
|
|
38
|
+
proto: "protobuf"
|
|
39
|
+
};
|
|
40
|
+
function langFromPath(path) {
|
|
41
|
+
if (!path) return void 0;
|
|
42
|
+
const ext = path.split(".").pop()?.toLowerCase();
|
|
43
|
+
return ext ? EXT_LANG[ext] : void 0;
|
|
44
|
+
}
|
|
45
|
+
/** Format an unknown value as a displayable string. */
|
|
46
|
+
function formatOutput(value) {
|
|
47
|
+
if (value == null) return "";
|
|
48
|
+
if (typeof value === "string") return value;
|
|
49
|
+
try {
|
|
50
|
+
return JSON.stringify(value, null, 2);
|
|
51
|
+
} catch {
|
|
52
|
+
return String(value);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Renders full tool details when a tool item is expanded.
|
|
57
|
+
* Dispatches to specialised previews (CommandPreview, WriteFilePreview)
|
|
58
|
+
* or falls back to a generic input/output code view.
|
|
59
|
+
*/
|
|
60
|
+
const ExpandedToolDetail = memo(({ part }) => {
|
|
61
|
+
const meta = getToolDisplayMetadata(part);
|
|
62
|
+
const { status, input, output, error } = part.state;
|
|
63
|
+
if (meta.displayVariant === "command") return /* @__PURE__ */ jsx(CommandPreview, { part });
|
|
64
|
+
if (meta.displayVariant === "write-file") return /* @__PURE__ */ jsx(WriteFilePreview, { part });
|
|
65
|
+
if (meta.displayVariant === "grep") return /* @__PURE__ */ jsx(GrepResultsPreview, { part });
|
|
66
|
+
if (meta.displayVariant === "glob") return /* @__PURE__ */ jsx(GlobResultsPreview, { part });
|
|
67
|
+
if (meta.displayVariant === "web-search") return /* @__PURE__ */ jsx(WebSearchPreview, { part });
|
|
68
|
+
if (meta.displayVariant === "question") return /* @__PURE__ */ jsx(QuestionPreview, { part });
|
|
69
|
+
if (meta.displayVariant === "diff") return /* @__PURE__ */ jsx(DiffPreview, { part });
|
|
70
|
+
if (meta.displayVariant === "read-file") return /* @__PURE__ */ jsxs("div", {
|
|
71
|
+
className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]",
|
|
72
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
73
|
+
className: "flex items-center gap-2.5 border-b border-border bg-card px-3 py-2",
|
|
74
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
75
|
+
className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-accent)] bg-muted text-primary",
|
|
76
|
+
children: /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5" })
|
|
77
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
78
|
+
className: "min-w-0 flex items-center gap-2",
|
|
79
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
80
|
+
className: "text-xs font-semibold text-foreground",
|
|
81
|
+
children: "Read file"
|
|
82
|
+
}), meta.targetPath ? /* @__PURE__ */ jsx("span", {
|
|
83
|
+
className: "truncate text-xs font-mono text-muted-foreground",
|
|
84
|
+
children: meta.targetPath
|
|
85
|
+
}) : null]
|
|
86
|
+
})]
|
|
87
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
88
|
+
className: "space-y-2 px-3 py-2.5",
|
|
89
|
+
children: [typeof output === "string" ? /* @__PURE__ */ jsx(CodeBlock, {
|
|
90
|
+
code: output,
|
|
91
|
+
language: langFromPath(meta.targetPath) ?? "text",
|
|
92
|
+
className: "rounded-[var(--radius-md)]"
|
|
93
|
+
}) : /* @__PURE__ */ jsx("div", {
|
|
94
|
+
className: "rounded-[var(--radius-md)] border border-dashed border-border bg-muted px-3 py-4 text-sm text-muted-foreground",
|
|
95
|
+
children: "No readable file content was returned."
|
|
96
|
+
}), error ? /* @__PURE__ */ jsx("div", {
|
|
97
|
+
className: "rounded-[var(--radius-md)] border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-3 text-sm text-[var(--surface-danger-text)]",
|
|
98
|
+
children: error
|
|
99
|
+
}) : null]
|
|
100
|
+
})]
|
|
101
|
+
});
|
|
102
|
+
const inputStr = formatOutput(input);
|
|
103
|
+
const outputStr = formatOutput(output);
|
|
104
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
105
|
+
className: "space-y-3",
|
|
106
|
+
children: [
|
|
107
|
+
inputStr && /* @__PURE__ */ jsxs("div", {
|
|
108
|
+
className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card",
|
|
109
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
110
|
+
className: "flex items-center gap-2 border-b border-border bg-background px-3 py-2",
|
|
111
|
+
children: [/* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3 text-primary" }), /* @__PURE__ */ jsx("span", {
|
|
112
|
+
className: "text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground",
|
|
113
|
+
children: "Input"
|
|
114
|
+
})]
|
|
115
|
+
}), /* @__PURE__ */ jsx(CodeBlock, {
|
|
116
|
+
code: inputStr,
|
|
117
|
+
language: "json",
|
|
118
|
+
className: "rounded-none border-0"
|
|
119
|
+
})]
|
|
120
|
+
}),
|
|
121
|
+
status === "completed" && outputStr && /* @__PURE__ */ jsxs("div", {
|
|
122
|
+
className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card",
|
|
123
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
124
|
+
className: "flex items-center gap-2 border-b border-border bg-background px-3 py-2",
|
|
125
|
+
children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-3 w-3 text-primary" }), /* @__PURE__ */ jsx("span", {
|
|
126
|
+
className: "text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground",
|
|
127
|
+
children: "Output"
|
|
128
|
+
})]
|
|
129
|
+
}), /* @__PURE__ */ jsx(ExpandableContent, {
|
|
130
|
+
fadeClassName: "from-card",
|
|
131
|
+
children: /* @__PURE__ */ jsx(CodeBlock, {
|
|
132
|
+
code: outputStr.length > 2e3 ? outputStr.slice(0, 2e3) + "\n...(truncated)" : outputStr,
|
|
133
|
+
language: "json",
|
|
134
|
+
className: "rounded-none border-0"
|
|
135
|
+
})
|
|
136
|
+
})]
|
|
137
|
+
}),
|
|
138
|
+
error && /* @__PURE__ */ jsxs("div", {
|
|
139
|
+
className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--surface-danger-border)]",
|
|
140
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
141
|
+
className: "flex items-center gap-2 border-b border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-2",
|
|
142
|
+
children: [/* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-[var(--surface-danger-text)]" }), /* @__PURE__ */ jsx("span", {
|
|
143
|
+
className: "text-xs font-medium uppercase tracking-[0.08em] text-[var(--surface-danger-text)]",
|
|
144
|
+
children: "Error"
|
|
145
|
+
})]
|
|
146
|
+
}), /* @__PURE__ */ jsx(ExpandableContent, {
|
|
147
|
+
fadeClassName: "from-[var(--surface-danger-bg)]",
|
|
148
|
+
children: /* @__PURE__ */ jsx("pre", {
|
|
149
|
+
className: "bg-[var(--surface-danger-bg)] p-3 text-xs font-mono whitespace-pre-wrap break-all text-[var(--surface-danger-text)]",
|
|
150
|
+
children: error
|
|
151
|
+
})
|
|
152
|
+
})]
|
|
153
|
+
}),
|
|
154
|
+
(status === "pending" || status === "running") && /* @__PURE__ */ jsxs("div", {
|
|
155
|
+
className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-3 text-xs text-muted-foreground",
|
|
156
|
+
children: [/* @__PURE__ */ jsx(Loader2, { className: cn("h-3 w-3 animate-spin text-primary") }), "Running…"]
|
|
157
|
+
})
|
|
158
|
+
]
|
|
159
|
+
});
|
|
160
|
+
});
|
|
161
|
+
ExpandedToolDetail.displayName = "ExpandedToolDetail";
|
|
162
|
+
//#endregion
|
|
163
|
+
export { ExpandedToolDetail };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReasoningPart } from "../types/parts.js";
|
|
2
|
+
//#region src/run/inline-thinking-item.d.ts
|
|
3
|
+
export interface InlineThinkingItemProps {
|
|
4
|
+
part: ReasoningPart;
|
|
5
|
+
defaultOpen?: boolean;
|
|
6
|
+
autoCollapse?: boolean;
|
|
7
|
+
className?: string;
|
|
8
|
+
contentClassName?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const InlineThinkingItem: import("react").MemoExoticComponent<({ part, defaultOpen, autoCollapse, className, contentClassName }: InlineThinkingItemProps) => import("react").JSX.Element>;
|
|
11
|
+
//#endregion
|