@gram-ai/elements 1.37.0 → 1.38.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/dist/components/Markdown.d.ts +7 -0
- package/dist/components/MessageContent.d.ts +4 -0
- package/dist/components/ui/tool-ui.d.ts +52 -3
- package/dist/contexts/ThreadMetaContext.d.ts +20 -0
- package/dist/elements.cjs +1 -1
- package/dist/elements.css +1 -1
- package/dist/elements.js +26 -22
- package/dist/hooks/useMCPTools.d.ts +1 -1
- package/dist/{index-Em1Ot0b6.js → index--UMkUr53.js} +27562 -21884
- package/dist/index--UMkUr53.js.map +1 -0
- package/dist/index-Cz9y5YHw.cjs +222 -0
- package/dist/index-Cz9y5YHw.cjs.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/lib/messageConverter.d.ts +2 -0
- package/dist/{profiler-BnInDjd4.js → profiler-BHXyuGiY.js} +2 -2
- package/dist/{profiler-BnInDjd4.js.map → profiler-BHXyuGiY.js.map} +1 -1
- package/dist/{profiler-DIwReaSQ.cjs → profiler-jAEvoPXB.cjs} +2 -2
- package/dist/{profiler-DIwReaSQ.cjs.map → profiler-jAEvoPXB.cjs.map} +1 -1
- package/dist/{startRecording-P_J6QFPD.js → startRecording-D8IbKhJo.js} +2 -2
- package/dist/{startRecording-P_J6QFPD.js.map → startRecording-D8IbKhJo.js.map} +1 -1
- package/dist/{startRecording-Cg4fxzWw.cjs → startRecording-Dw4aGDrV.cjs} +2 -2
- package/dist/{startRecording-Cg4fxzWw.cjs.map → startRecording-Dw4aGDrV.cjs.map} +1 -1
- package/package.json +11 -13
- package/src/components/Markdown.tsx +210 -0
- package/src/components/MessageContent.tsx +9 -0
- package/src/components/assistant-ui/thinking-indicator.tsx +42 -0
- package/src/components/assistant-ui/thread-list.tsx +50 -5
- package/src/components/ui/tool-ui.tsx +360 -7
- package/src/contexts/ElementsProvider.tsx +2 -1
- package/src/contexts/ThreadMetaContext.ts +27 -0
- package/src/hooks/useGramThreadListAdapter.tsx +101 -20
- package/src/hooks/useMCPTools.ts +1 -1
- package/src/index.ts +18 -0
- package/src/lib/messageConverter.ts +5 -0
- package/src/lib/tools.test.ts +24 -12
- package/dist/index-Dpk3C8VH.cjs +0 -194
- package/dist/index-Dpk3C8VH.cjs.map +0 -1
- package/dist/index-Em1Ot0b6.js.map +0 -1
|
@@ -5,6 +5,10 @@ export interface MessageContentProps {
|
|
|
5
5
|
content: string;
|
|
6
6
|
/** Optional className applied to the root container. */
|
|
7
7
|
className?: string;
|
|
8
|
+
/** Render plain-text segments as markdown (matching `<MarkdownText />`)
|
|
9
|
+
* instead of preformatted text. Fenced `chart`/`ui` blocks still render as
|
|
10
|
+
* widgets either way. */
|
|
11
|
+
markdown?: boolean;
|
|
8
12
|
}
|
|
9
13
|
/**
|
|
10
14
|
* Standalone renderer for stored chat message content. Recognises the same
|
|
@@ -27,6 +27,31 @@ interface ToolAnnotations {
|
|
|
27
27
|
/** If true, tool interacts with external entities */
|
|
28
28
|
openWorldHint?: boolean;
|
|
29
29
|
}
|
|
30
|
+
/** Marks a tool section (arguments/output) as containing flagged substrings,
|
|
31
|
+
* so the section header shows a warning and the expanded body lets you jump
|
|
32
|
+
* between matches. */
|
|
33
|
+
/** One flagged finding within a tool section. */
|
|
34
|
+
interface SectionMatch {
|
|
35
|
+
/** Literal substring to highlight and step to. */
|
|
36
|
+
value: string;
|
|
37
|
+
/** Short rule label shown when this match is active (e.g. "pii.phone_number"). */
|
|
38
|
+
label?: string;
|
|
39
|
+
/** Optional action for this finding, surfaced as a button while it is the
|
|
40
|
+
* active match (e.g. open the create-exclusion flow). */
|
|
41
|
+
onExclude?: () => void;
|
|
42
|
+
}
|
|
43
|
+
interface SectionHighlight {
|
|
44
|
+
/** Findings to highlight and step through with the next/prev controls. */
|
|
45
|
+
matches: SectionMatch[];
|
|
46
|
+
/** Dot out the matched characters until the viewer reveals them (secrets). */
|
|
47
|
+
masked?: boolean;
|
|
48
|
+
/** Optional host-supplied badge rendered in the section header (e.g. a risk
|
|
49
|
+
* pill). Replaces the default warning icon when present. */
|
|
50
|
+
headerBadge?: React.ReactNode;
|
|
51
|
+
/** Mark colour: "risk" (red, default) for findings, "search" (yellow) for a
|
|
52
|
+
* text-search hit. */
|
|
53
|
+
tone?: "risk" | "search";
|
|
54
|
+
}
|
|
30
55
|
interface ToolUIProps {
|
|
31
56
|
/** Display name of the tool */
|
|
32
57
|
name: string;
|
|
@@ -44,6 +69,16 @@ interface ToolUIProps {
|
|
|
44
69
|
};
|
|
45
70
|
/** Whether the tool card starts expanded */
|
|
46
71
|
defaultExpanded?: boolean;
|
|
72
|
+
/** Flag matches inside the arguments (risk review). */
|
|
73
|
+
requestHighlight?: SectionHighlight;
|
|
74
|
+
/** Flag matches inside the output (risk review). */
|
|
75
|
+
resultHighlight?: SectionHighlight;
|
|
76
|
+
/** When set, highlight occurrences of this query (case-insensitive) in the
|
|
77
|
+
* tool name — e.g. a thread search for "customer" lights up `get_customer`. */
|
|
78
|
+
nameQuery?: string;
|
|
79
|
+
/** Whether this tool holds the active thread-search match: bright highlights
|
|
80
|
+
* (name + sections) when true, pale when false. */
|
|
81
|
+
searchActive?: boolean;
|
|
47
82
|
/** Additional class names */
|
|
48
83
|
className?: string;
|
|
49
84
|
/** MCP tool annotations */
|
|
@@ -66,6 +101,11 @@ interface ToolUISectionProps {
|
|
|
66
101
|
highlightSyntax?: boolean;
|
|
67
102
|
/** Language hint for syntax highlighting */
|
|
68
103
|
language?: BundledLanguage;
|
|
104
|
+
/** Flagged substrings — renders a navigable highlighted view + header icon. */
|
|
105
|
+
highlight?: SectionHighlight;
|
|
106
|
+
/** Search tone only: whether this tool holds the active thread match (bright
|
|
107
|
+
* vs pale marks). */
|
|
108
|
+
searchActive?: boolean;
|
|
69
109
|
}
|
|
70
110
|
declare function StatusIndicator({ status, }: {
|
|
71
111
|
status: ToolStatus;
|
|
@@ -78,8 +118,17 @@ declare function SyntaxHighlightedCode({ text, language, className, }: {
|
|
|
78
118
|
language?: BundledLanguage;
|
|
79
119
|
className?: string;
|
|
80
120
|
}): React.JSX.Element;
|
|
81
|
-
declare
|
|
82
|
-
|
|
121
|
+
declare namespace SyntaxHighlightedCode {
|
|
122
|
+
var displayName: string;
|
|
123
|
+
}
|
|
124
|
+
declare function ToolUISection({ title, content, defaultExpanded, highlightSyntax, language, highlight, searchActive, }: ToolUISectionProps): React.JSX.Element;
|
|
125
|
+
declare namespace ToolUISection {
|
|
126
|
+
var displayName: string;
|
|
127
|
+
}
|
|
128
|
+
declare function ToolUI({ name, icon, provider, status, request, result, defaultExpanded, requestHighlight, resultHighlight, nameQuery, searchActive, className, annotations, onApproveOnce, onApproveForSession, onDeny, }: ToolUIProps): React.JSX.Element;
|
|
129
|
+
declare namespace ToolUI {
|
|
130
|
+
var displayName: string;
|
|
131
|
+
}
|
|
83
132
|
interface ToolUIGroupProps {
|
|
84
133
|
/** Title for the group header */
|
|
85
134
|
title: string;
|
|
@@ -98,4 +147,4 @@ interface ToolUIGroupProps {
|
|
|
98
147
|
}
|
|
99
148
|
declare function ToolUIGroup({ title, icon, status, defaultExpanded, headerless, children, className, }: ToolUIGroupProps): React.JSX.Element;
|
|
100
149
|
export { ToolUI, ToolUISection, ToolUIGroup, SyntaxHighlightedCode, StatusIndicator, CopyButton, };
|
|
101
|
-
export type { ToolUIProps, ToolUISectionProps, ToolUIGroupProps, ToolStatus, ContentItem, };
|
|
150
|
+
export type { ToolUIProps, ToolUISectionProps, ToolUIGroupProps, ToolStatus, ContentItem, SectionHighlight, SectionMatch, };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Per-chat metadata that assistant-ui's thread list can't carry: its
|
|
3
|
+
* RemoteThreadMetadata is a closed shape ({@link
|
|
4
|
+
* https://github.com/Yonom/assistant-ui status/remoteId/externalId/title}), so
|
|
5
|
+
* fields like the creation date are dropped at the runtime boundary.
|
|
6
|
+
*
|
|
7
|
+
* The Gram thread-list adapter populates this side channel from `chat.list`
|
|
8
|
+
* (keyed by chat id, which equals the item's remoteId/externalId) and
|
|
9
|
+
* `ThreadListItem` reads it to render the date. React context crosses the
|
|
10
|
+
* shadow-root boundary the thread list renders into, so the provider lives up
|
|
11
|
+
* in the Elements runtime tree.
|
|
12
|
+
*/
|
|
13
|
+
export interface ThreadMeta {
|
|
14
|
+
/** ISO timestamp of when the chat was created. */
|
|
15
|
+
createdAt?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const ThreadMetaContext: import('react').Context<Record<string, ThreadMeta>>;
|
|
18
|
+
/** Reads the metadata for one chat id, or undefined when unknown (e.g. a
|
|
19
|
+
* brand-new local thread that isn't in `chat.list` yet). */
|
|
20
|
+
export declare function useThreadMeta(id: string | undefined): ThreadMeta | undefined;
|
package/dist/elements.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Cz9y5YHw.cjs"),r=require("./index-CGBkMd0d.cjs");exports.CREDITS_EXHAUSTED_MESSAGE=e.CREDITS_EXHAUSTED_MESSAGE;exports.Calendar=e.Calendar;exports.Chat=e.Chat;exports.ChatHistory=e.ChatHistory;exports.ElementsProvider=e.ElementsProvider;exports.GramElementsProvider=e.ElementsProvider;exports.MODELS=e.MODELS;exports.Markdown=e.Markdown;exports.MessageContent=e.MessageContent;exports.PRESETS=e.PRESETS;exports.Replay=e.Replay;exports.ShareButton=e.ShareButton;exports.SyntaxHighlightedCode=e.SyntaxHighlightedCode;exports.TimeRangePicker=e.TimeRangePicker;exports.ToolFallback=e.ToolFallback;exports.ToolUI=e.ToolUI;exports.ToolUISection=e.ToolUISection;exports.convertGramMessagesToExported=e.convertGramMessagesToExported;exports.convertGramMessagesToUIMessages=e.convertGramMessagesToUIMessages;exports.defineFrontendTool=e.defineFrontendTool;exports.describeStreamError=e.describeStreamError;exports.getPresetRange=e.getPresetRange;exports.trackError=e.trackError;exports.useRecordCassette=e.useRecordCassette;exports.useThreadId=e.useThreadId;exports.sleep=r.sleep;exports.useChatId=r.useChatId;exports.useElements=r.useElements;exports.useGramElements=r.useElements;
|
|
2
2
|
//# sourceMappingURL=elements.cjs.map
|