@automattic/agenttic-ui 0.1.67 → 0.1.68
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/README.md +39 -0
- package/dist/components/AgentUIContainer.d.ts +1 -1
- package/dist/components/AgentUIContainer.d.ts.map +1 -1
- package/dist/components/EmbeddedAgentUI.d.ts +59 -0
- package/dist/components/EmbeddedAgentUI.d.ts.map +1 -0
- package/dist/components/LightweightMarkdownRenderer.d.ts +4 -0
- package/dist/components/LightweightMarkdownRenderer.d.ts.map +1 -0
- package/dist/components/LightweightMarkdownRenderer.test.d.ts +2 -0
- package/dist/components/LightweightMarkdownRenderer.test.d.ts.map +1 -0
- package/dist/components/chat/Chat.d.ts +1 -1
- package/dist/components/chat/Chat.d.ts.map +1 -1
- package/dist/embedded-agent-ui.css +1 -0
- package/dist/embedded-agent-ui.d.ts +4 -0
- package/dist/embedded-agent-ui.d.ts.map +1 -0
- package/dist/embedded-agent-ui.js +434 -0
- package/dist/global.css +1 -0
- package/dist/index.css +1 -1
- package/dist/index.js +1713 -1681
- package/dist/types/index.d.ts +40 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/utils/__tests__/chatStorage.test.d.ts +2 -0
- package/dist/utils/__tests__/chatStorage.test.d.ts.map +1 -0
- package/dist/utils/chatStorage.d.ts +26 -0
- package/dist/utils/chatStorage.d.ts.map +1 -1
- package/package.json +7 -1
package/README.md
CHANGED
|
@@ -139,6 +139,45 @@ The `onTypingStatusChange` callback is triggered when the typing status changes.
|
|
|
139
139
|
|
|
140
140
|
## Architecture
|
|
141
141
|
|
|
142
|
+
### Portable Question Choices
|
|
143
|
+
|
|
144
|
+
Agentic question renderers should use a portable question payload so product
|
|
145
|
+
agents can ask lightweight structured questions inline in chat without coupling
|
|
146
|
+
the UI to one product or workflow.
|
|
147
|
+
|
|
148
|
+
```ts
|
|
149
|
+
interface QuestionPrompt {
|
|
150
|
+
question: string;
|
|
151
|
+
choices: QuestionChoice[];
|
|
152
|
+
allow_freeform?: boolean;
|
|
153
|
+
freeform_label?: string;
|
|
154
|
+
freeform_placeholder?: string;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
interface QuestionChoice {
|
|
158
|
+
label: string;
|
|
159
|
+
message?: string;
|
|
160
|
+
description?: string;
|
|
161
|
+
presentation?: {
|
|
162
|
+
swatches?: string[];
|
|
163
|
+
font_sample?: {
|
|
164
|
+
heading?: string;
|
|
165
|
+
body?: string;
|
|
166
|
+
heading_font?: string;
|
|
167
|
+
body_font?: string;
|
|
168
|
+
};
|
|
169
|
+
image?: {
|
|
170
|
+
url: string;
|
|
171
|
+
alt?: string;
|
|
172
|
+
};
|
|
173
|
+
layout_hint?: string;
|
|
174
|
+
};
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
All `presentation` fields are optional. Renderers should fall back to the choice
|
|
179
|
+
label and description when presentation metadata is absent or unsupported.
|
|
180
|
+
|
|
142
181
|
### AgentUI Components
|
|
143
182
|
|
|
144
183
|
**AgentUI** - Convenience wrapper with default layout
|
|
@@ -5,6 +5,6 @@ interface AgentUIContainerProps extends AgentUIProps {
|
|
|
5
5
|
}
|
|
6
6
|
export declare function AgentUIContainer({ children, messages, isProcessing, error, onSubmit, variant, triggerIcon, triggerTitle, placeholder, notice, onOpen, onExpand, onClose, onStop, emptyView, floatingChatState, suggestions, clearSuggestions, onSuggestionClick, messageRenderer, messagesPosition, showAgentIcon, className, inputValue: controlledInputValue, onInputChange: controlledOnInputChange, draggableStates, // Default to only expanded for backward compatibility
|
|
7
7
|
locale, maxInputLength, // Default to 600 characters
|
|
8
|
-
onInputLimitExceeded, expandOnClick, expandOnHover, thinkingMessage, initialChatPosition, onChatPositionChange, onTypingStatusChange, freeDrag, }: AgentUIContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
onInputLimitExceeded, expandOnClick, expandOnHover, thinkingMessage, initialChatPosition, onChatPositionChange, onTypingStatusChange, freeDrag, initialFreeDragPosition, onFreeDragEnd, }: AgentUIContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export {};
|
|
10
10
|
//# sourceMappingURL=AgentUIContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgentUIContainer.d.ts","sourceRoot":"","sources":["../../src/components/AgentUIContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAcxE,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"AgentUIContainer.d.ts","sourceRoot":"","sources":["../../src/components/AgentUIContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAcxE,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,UAAU,CAAC;AAmBzD,UAAU,qBAAsB,SAAQ,YAAY;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAuBD,wBAAgB,gBAAgB,CAAE,EACjC,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,OAAoB,EACpB,WAAW,EACX,YAAY,EACZ,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,SAAS,EACT,UAAU,EAAE,oBAAoB,EAChC,aAAa,EAAE,uBAAuB,EACtC,eAAgC,EAAE,sDAAsD;AACxF,MAAa,EACb,cAAoB,EAAE,4BAA4B;AAClD,oBAAoB,EACpB,aAAa,EACb,aAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,QAAgB,EAChB,uBAAuB,EACvB,aAAa,GACb,EAAE,qBAAqB,2CAguBvB"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { AgentUIProps, Message, NoticeConfig, Suggestion } from '../types';
|
|
3
|
+
export declare function ThinkingMessage({ content }: {
|
|
4
|
+
content?: string;
|
|
5
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function EmptyView({ heading, help, suggestions, onSuggestionClick, }: {
|
|
7
|
+
heading?: React.ReactNode;
|
|
8
|
+
help?: React.ReactNode;
|
|
9
|
+
suggestions?: Suggestion[];
|
|
10
|
+
onSuggestionClick?: (suggestion: Suggestion) => void;
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function EmbeddedAgentUIMessages({ className, }?: {
|
|
13
|
+
className?: string;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
15
|
+
export declare function EmbeddedAgentUISuggestions({ className, showSuggestions, onSelect, }?: {
|
|
16
|
+
className?: string;
|
|
17
|
+
showSuggestions?: boolean;
|
|
18
|
+
onSelect?: (message: string) => void;
|
|
19
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
20
|
+
export declare function EmbeddedAgentUINotice({ className, }?: {
|
|
21
|
+
className?: string;
|
|
22
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
23
|
+
export declare function EmbeddedAgentUIInput({ className, disabled, onKeyDown, }?: {
|
|
24
|
+
className?: string;
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
27
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare function EmbeddedAgentUIFooter({ children, className, }?: {
|
|
29
|
+
children?: React.ReactNode;
|
|
30
|
+
className?: string;
|
|
31
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare function EmbeddedAgentUIConversationView({ children, className, }?: {
|
|
33
|
+
children?: React.ReactNode;
|
|
34
|
+
className?: string;
|
|
35
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
export declare function EmbeddedAgentUIContainer({ children, className, ...props }: AgentUIProps & {
|
|
37
|
+
children?: React.ReactNode;
|
|
38
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
declare const EmbeddedAgentUINamespace: {
|
|
40
|
+
Container: typeof EmbeddedAgentUIContainer;
|
|
41
|
+
ConversationView: typeof EmbeddedAgentUIConversationView;
|
|
42
|
+
Messages: typeof EmbeddedAgentUIMessages;
|
|
43
|
+
Footer: typeof EmbeddedAgentUIFooter;
|
|
44
|
+
Input: typeof EmbeddedAgentUIInput;
|
|
45
|
+
Suggestions: typeof EmbeddedAgentUISuggestions;
|
|
46
|
+
Notice: typeof EmbeddedAgentUINotice;
|
|
47
|
+
};
|
|
48
|
+
export declare const EmbeddedAgentUI: React.FC<AgentUIProps> & typeof EmbeddedAgentUINamespace;
|
|
49
|
+
export declare const AgentUI: React.FC<AgentUIProps> & {
|
|
50
|
+
Container: typeof EmbeddedAgentUIContainer;
|
|
51
|
+
ConversationView: typeof EmbeddedAgentUIConversationView;
|
|
52
|
+
Messages: typeof EmbeddedAgentUIMessages;
|
|
53
|
+
Footer: typeof EmbeddedAgentUIFooter;
|
|
54
|
+
Input: typeof EmbeddedAgentUIInput;
|
|
55
|
+
Suggestions: typeof EmbeddedAgentUISuggestions;
|
|
56
|
+
Notice: typeof EmbeddedAgentUINotice;
|
|
57
|
+
};
|
|
58
|
+
export type { AgentUIProps, Message, NoticeConfig, Suggestion };
|
|
59
|
+
//# sourceMappingURL=EmbeddedAgentUI.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmbeddedAgentUI.d.ts","sourceRoot":"","sources":["../../src/components/EmbeddedAgentUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAyBhF,wBAAgB,eAAe,CAAE,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,2CAMjE;AAED,wBAAgB,SAAS,CAAE,EAC1B,OAAO,EACP,IAAI,EACJ,WAAW,EACX,iBAAiB,GACjB,EAAE;IACF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAE,UAAU,EAAE,UAAU,KAAM,IAAI,CAAC;CACvD,2CAoBA;AA8CD,wBAAgB,uBAAuB,CAAE,EACxC,SAAS,GACT,GAAE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACd,kDAuDL;AAED,wBAAgB,0BAA0B,CAAE,EAC3C,SAAS,EACT,eAAe,EACf,QAAQ,GACR,GAAE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAE,OAAO,EAAE,MAAM,KAAM,IAAI,CAAC;CAClC,kDA+CL;AAED,wBAAgB,qBAAqB,CAAE,EACtC,SAAS,GACT,GAAE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACd,kDA0BL;AAED,wBAAgB,oBAAoB,CAAE,EACrC,SAAS,EACT,QAAQ,EACR,SAAS,GACT,GAAE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAE,KAAK,EAAE,KAAK,CAAC,aAAa,CAAE,mBAAmB,CAAE,KAAM,IAAI,CAAC;CACrE,2CAmGL;AAED,wBAAgB,qBAAqB,CAAE,EACtC,QAAQ,EACR,SAAS,GACT,GAAE;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACd,2CAiBL;AAED,wBAAgB,+BAA+B,CAAE,EAChD,QAAQ,EACR,SAAS,GACT,GAAE;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACd,2CAgBL;AAED,wBAAgB,wBAAwB,CAAE,EACzC,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACR,EAAE,YAAY,GAAG;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CA8CA;AAED,QAAA,MAAM,wBAAwB;;;;;;;;CAQ7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAE,YAAY,CAAE,GACrD,OAAO,wBAGP,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;CAAkB,CAAC;AAEvC,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LightweightMarkdownRenderer.d.ts","sourceRoot":"","sources":["../../src/components/LightweightMarkdownRenderer.tsx"],"names":[],"mappings":"AAiFA,wBAAgB,2BAA2B,CAAE,EAC5C,QAAQ,GACR,EAAE;IACF,QAAQ,EAAE,MAAM,CAAC;CACjB,2CA+EA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LightweightMarkdownRenderer.test.d.ts","sourceRoot":"","sources":["../../src/components/LightweightMarkdownRenderer.test.tsx"],"names":[],"mappings":""}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { ChatProps } from '../../types';
|
|
2
|
-
export declare function Chat({ messages, isProcessing, error, onSubmit, variant, triggerIcon, triggerTitle, placeholder, notice, onOpen, onExpand, onClose, onStop, emptyView, floatingChatState, suggestions, clearSuggestions, messageRenderer, showAgentIcon, className, expandOnHover, freeDrag, }: ChatProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function Chat({ messages, isProcessing, error, onSubmit, variant, triggerIcon, triggerTitle, placeholder, notice, onOpen, onExpand, onClose, onStop, emptyView, floatingChatState, suggestions, clearSuggestions, messageRenderer, showAgentIcon, className, expandOnHover, freeDrag, initialFreeDragPosition, onFreeDragEnd, }: ChatProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=Chat.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Chat.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Chat.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAe7C,wBAAgB,IAAI,CAAE,EACrB,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,OAAoB,EACpB,WAAW,EACX,YAAY,EACZ,WAAkD,EAClD,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,SAAS,EACT,aAAoB,EACpB,QAAgB,EAChB,uBAAuB,EACvB,aAAa,GACb,EAAE,SAAS,2CAmhBX"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.agenttic-embedded{display:flex;flex-direction:column;height:100%;min-height:0;background:#fff;color:#111827}.agenttic-embedded__messages{flex:1;min-height:0;overflow-y:auto;padding:16px}.agenttic-embedded__message{display:flex;margin:8px 0}.agenttic-embedded__message p{margin:0;padding:10px 12px;border-radius:14px;background:#f3f4f6;line-height:1.45}.agenttic-embedded__message--user{justify-content:flex-end}.agenttic-embedded__message--user p{background:#111827;color:#fff}.agenttic-embedded__thinking,.agenttic-embedded__error{padding:8px 0;font-size:13px;color:#6b7280}.agenttic-embedded__error{color:#b91c1c}.agenttic-embedded__footer{border-top:1px solid #e5e7eb;padding:12px}.agenttic-embedded__suggestions{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.agenttic-embedded__suggestions button,.agenttic-embedded__input button{border:1px solid #d1d5db;border-radius:999px;background:#fff;color:#111827;cursor:pointer}.agenttic-embedded__suggestions button{padding:6px 10px;font-size:13px}.agenttic-embedded__input{display:flex;align-items:flex-end;gap:8px}.agenttic-embedded__input textarea{flex:1;min-height:40px;max-height:160px;resize:vertical;border:1px solid #d1d5db;border-radius:16px;padding:10px 12px;font:inherit}.agenttic-embedded__input button{width:36px;height:36px;font-size:18px}.agenttic-embedded__input button:disabled{cursor:not-allowed;opacity:.5}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { AgentUI, EmbeddedAgentUI, EmbeddedAgentUIContainer, EmbeddedAgentUIConversationView, EmbeddedAgentUIFooter, EmbeddedAgentUIInput, EmbeddedAgentUIMessages, EmbeddedAgentUINotice, EmbeddedAgentUISuggestions, EmptyView, ThinkingMessage, } from './components/EmbeddedAgentUI';
|
|
2
|
+
export { LightweightMarkdownRenderer } from './components/LightweightMarkdownRenderer';
|
|
3
|
+
export type { AgentUIProps, Message, NoticeConfig, QuestionChoice, QuestionChoiceFontSamplePresentation, QuestionChoiceImagePresentation, QuestionChoicePresentation, QuestionPrompt, Suggestion, } from './types';
|
|
4
|
+
//# sourceMappingURL=embedded-agent-ui.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"embedded-agent-ui.d.ts","sourceRoot":"","sources":["../src/embedded-agent-ui.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,OAAO,EACP,eAAe,EACf,wBAAwB,EACxB,+BAA+B,EAC/B,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,qBAAqB,EACrB,0BAA0B,EAC1B,SAAS,EACT,eAAe,GACf,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,0CAA0C,CAAC;AACvF,YAAY,EACX,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,cAAc,EACd,oCAAoC,EACpC,+BAA+B,EAC/B,0BAA0B,EAC1B,cAAc,EACd,UAAU,GACV,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,434 @@
|
|
|
1
|
+
import { jsx as t, Fragment as I, jsxs as f } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as P, useState as N, useRef as R, useCallback as F, useContext as T } from "react";
|
|
3
|
+
import { __ as g } from "@wordpress/i18n";
|
|
4
|
+
function L(n) {
|
|
5
|
+
const e = n.trim();
|
|
6
|
+
if (/^(https?:|mailto:)/i.test(e))
|
|
7
|
+
return e;
|
|
8
|
+
}
|
|
9
|
+
function y(n) {
|
|
10
|
+
const e = [], a = /(\[[^\]]+\]\([^\)]+\)|`[^`]+`|\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_)/g;
|
|
11
|
+
let i = 0, c;
|
|
12
|
+
for (; c = a.exec(n); ) {
|
|
13
|
+
c.index > i && e.push(n.slice(i, c.index));
|
|
14
|
+
const r = c[0], s = `${c.index}-${r}`, d = r.match(/^\[([^\]]+)\]\(([^\)]+)\)$/);
|
|
15
|
+
if (d) {
|
|
16
|
+
const l = L(d[2]);
|
|
17
|
+
e.push(
|
|
18
|
+
l ? /* @__PURE__ */ t(
|
|
19
|
+
"a",
|
|
20
|
+
{
|
|
21
|
+
href: l,
|
|
22
|
+
rel: "noreferrer",
|
|
23
|
+
target: "_blank",
|
|
24
|
+
children: d[1]
|
|
25
|
+
},
|
|
26
|
+
s
|
|
27
|
+
) : r
|
|
28
|
+
);
|
|
29
|
+
} else r.startsWith("`") ? e.push(/* @__PURE__ */ t("code", { children: r.slice(1, -1) }, s)) : r.startsWith("**") || r.startsWith("__") ? e.push(/* @__PURE__ */ t("strong", { children: r.slice(2, -2) }, s)) : e.push(/* @__PURE__ */ t("em", { children: r.slice(1, -1) }, s));
|
|
30
|
+
i = a.lastIndex;
|
|
31
|
+
}
|
|
32
|
+
return i < n.length && e.push(n.slice(i)), e;
|
|
33
|
+
}
|
|
34
|
+
function v(n, e, a, i) {
|
|
35
|
+
if (e.length === 0)
|
|
36
|
+
return;
|
|
37
|
+
const c = e.map((r, s) => /* @__PURE__ */ t("li", { children: y(r) }, s));
|
|
38
|
+
n.push(
|
|
39
|
+
a ? /* @__PURE__ */ t("ol", { children: c }, i) : /* @__PURE__ */ t("ul", { children: c }, i)
|
|
40
|
+
), e.length = 0;
|
|
41
|
+
}
|
|
42
|
+
function W({
|
|
43
|
+
children: n
|
|
44
|
+
}) {
|
|
45
|
+
const e = [], a = [];
|
|
46
|
+
let i = !1, c = !1, r = [];
|
|
47
|
+
return n.split(/\r?\n/).forEach((s, d) => {
|
|
48
|
+
if (s.startsWith("```")) {
|
|
49
|
+
c ? (e.push(
|
|
50
|
+
/* @__PURE__ */ t("pre", { children: /* @__PURE__ */ t("code", { children: r.join(`
|
|
51
|
+
`) }) }, `code-${d}`)
|
|
52
|
+
), r = [], c = !1) : (v(e, a, i, `list-${d}`), c = !0);
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (c) {
|
|
56
|
+
r.push(s);
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
const l = s.match(/^\s*[-*]\s+(.+)$/), o = s.match(/^\s*\d+\.\s+(.+)$/);
|
|
60
|
+
if (l || o) {
|
|
61
|
+
const h = !!o;
|
|
62
|
+
a.length && i !== h && v(e, a, i, `list-${d}`), i = h, a.push(
|
|
63
|
+
((o == null ? void 0 : o[1]) ?? (l == null ? void 0 : l[1]) ?? "").trim()
|
|
64
|
+
);
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (v(e, a, i, `list-${d}`), !s.trim())
|
|
68
|
+
return;
|
|
69
|
+
const u = s.match(/^(#{1,3})\s+(.+)$/);
|
|
70
|
+
if (u) {
|
|
71
|
+
const p = `h${u[1].length}`;
|
|
72
|
+
e.push(
|
|
73
|
+
/* @__PURE__ */ t(p, { children: y(u[2]) }, `heading-${d}`)
|
|
74
|
+
);
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
e.push(
|
|
78
|
+
/* @__PURE__ */ t("p", { children: y(s) }, `paragraph-${d}`)
|
|
79
|
+
);
|
|
80
|
+
}), v(e, a, i, "list-final"), c && r.length && e.push(
|
|
81
|
+
/* @__PURE__ */ t("pre", { children: /* @__PURE__ */ t("code", { children: r.join(`
|
|
82
|
+
`) }) }, "code-final")
|
|
83
|
+
), /* @__PURE__ */ t(I, { children: e });
|
|
84
|
+
}
|
|
85
|
+
const C = P(null);
|
|
86
|
+
function b() {
|
|
87
|
+
const n = T(C);
|
|
88
|
+
if (!n)
|
|
89
|
+
throw new Error(
|
|
90
|
+
"Embedded AgentUI compound components must be rendered inside AgentUI.Container."
|
|
91
|
+
);
|
|
92
|
+
return n;
|
|
93
|
+
}
|
|
94
|
+
function O({ content: n }) {
|
|
95
|
+
return /* @__PURE__ */ t("div", { className: "agenttic-embedded__thinking", children: n ?? g("Thinking…", "a8c-agenttic") });
|
|
96
|
+
}
|
|
97
|
+
function X({
|
|
98
|
+
heading: n,
|
|
99
|
+
help: e,
|
|
100
|
+
suggestions: a,
|
|
101
|
+
onSuggestionClick: i
|
|
102
|
+
}) {
|
|
103
|
+
return /* @__PURE__ */ f("div", { className: "agenttic-embedded__empty", children: [
|
|
104
|
+
n && /* @__PURE__ */ t("h2", { children: n }),
|
|
105
|
+
e && /* @__PURE__ */ t("p", { children: e }),
|
|
106
|
+
a != null && a.length ? /* @__PURE__ */ t("div", { className: "agenttic-embedded__suggestions", children: a.map((c) => /* @__PURE__ */ t(
|
|
107
|
+
"button",
|
|
108
|
+
{
|
|
109
|
+
type: "button",
|
|
110
|
+
onClick: () => i == null ? void 0 : i(c),
|
|
111
|
+
children: c.label
|
|
112
|
+
},
|
|
113
|
+
c.id
|
|
114
|
+
)) }) : null
|
|
115
|
+
] });
|
|
116
|
+
}
|
|
117
|
+
function U(n) {
|
|
118
|
+
return n.content.filter(
|
|
119
|
+
(e) => e.type === "text" || e.type === "component"
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
function H({ message: n }) {
|
|
123
|
+
const { messageRenderer: e } = b(), a = e ?? W;
|
|
124
|
+
return /* @__PURE__ */ t(
|
|
125
|
+
"div",
|
|
126
|
+
{
|
|
127
|
+
"data-slot": "message",
|
|
128
|
+
"data-role": n.role,
|
|
129
|
+
className: `agenttic-embedded__message agenttic-embedded__message--${n.role}`,
|
|
130
|
+
children: U(n).map((i, c) => {
|
|
131
|
+
if (i.type === "text" && i.text)
|
|
132
|
+
return /* @__PURE__ */ t(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
className: "agenttic-embedded__bubble",
|
|
136
|
+
children: /* @__PURE__ */ t(a, { children: i.text })
|
|
137
|
+
},
|
|
138
|
+
c
|
|
139
|
+
);
|
|
140
|
+
if (i.type === "component" && i.component) {
|
|
141
|
+
const r = i.component;
|
|
142
|
+
return /* @__PURE__ */ t(
|
|
143
|
+
r,
|
|
144
|
+
{
|
|
145
|
+
...i.componentProps || {}
|
|
146
|
+
},
|
|
147
|
+
c
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
return null;
|
|
151
|
+
})
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
function $({
|
|
156
|
+
className: n
|
|
157
|
+
} = {}) {
|
|
158
|
+
const {
|
|
159
|
+
messages: e,
|
|
160
|
+
isProcessing: a,
|
|
161
|
+
error: i,
|
|
162
|
+
emptyView: c,
|
|
163
|
+
thinkingMessage: r,
|
|
164
|
+
messagesPosition: s
|
|
165
|
+
} = b(), d = e.filter(
|
|
166
|
+
(l) => U(l).length > 0
|
|
167
|
+
);
|
|
168
|
+
return d.length === 0 && !a ? c ? /* @__PURE__ */ t(
|
|
169
|
+
"div",
|
|
170
|
+
{
|
|
171
|
+
"data-slot": "messages",
|
|
172
|
+
className: [
|
|
173
|
+
"agenttic-embedded__messages",
|
|
174
|
+
"agenttic-embedded__messages--empty",
|
|
175
|
+
n
|
|
176
|
+
].filter(Boolean).join(" "),
|
|
177
|
+
children: c
|
|
178
|
+
}
|
|
179
|
+
) : null : /* @__PURE__ */ f(
|
|
180
|
+
"div",
|
|
181
|
+
{
|
|
182
|
+
"data-slot": "messages",
|
|
183
|
+
className: [
|
|
184
|
+
"agenttic-embedded__messages",
|
|
185
|
+
s === "bottom" ? "agenttic-embedded__messages--bottom" : "",
|
|
186
|
+
n
|
|
187
|
+
].filter(Boolean).join(" "),
|
|
188
|
+
children: [
|
|
189
|
+
d.map((l) => /* @__PURE__ */ t(
|
|
190
|
+
H,
|
|
191
|
+
{
|
|
192
|
+
message: l
|
|
193
|
+
},
|
|
194
|
+
l.reactKey || l.id
|
|
195
|
+
)),
|
|
196
|
+
a && /* @__PURE__ */ t(O, { content: r }),
|
|
197
|
+
i && /* @__PURE__ */ t("div", { className: "agenttic-embedded__error", children: i })
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
);
|
|
201
|
+
}
|
|
202
|
+
function j({
|
|
203
|
+
className: n,
|
|
204
|
+
showSuggestions: e,
|
|
205
|
+
onSelect: a
|
|
206
|
+
} = {}) {
|
|
207
|
+
const {
|
|
208
|
+
inputValue: i,
|
|
209
|
+
setInputValue: c,
|
|
210
|
+
suggestions: r,
|
|
211
|
+
clearSuggestions: s,
|
|
212
|
+
onSuggestionClick: d,
|
|
213
|
+
submit: l
|
|
214
|
+
} = b();
|
|
215
|
+
return i && !e || !(r != null && r.length) ? null : /* @__PURE__ */ t(
|
|
216
|
+
"div",
|
|
217
|
+
{
|
|
218
|
+
className: ["agenttic-embedded__suggestions", n].filter(Boolean).join(" "),
|
|
219
|
+
children: r.map((o) => {
|
|
220
|
+
const u = o.prompt ?? o.label;
|
|
221
|
+
return /* @__PURE__ */ t(
|
|
222
|
+
"button",
|
|
223
|
+
{
|
|
224
|
+
type: "button",
|
|
225
|
+
onClick: async () => {
|
|
226
|
+
if (a == null || a(u), d == null || d(o, r), s == null || s(), o.autoSubmit) {
|
|
227
|
+
await l(u);
|
|
228
|
+
return;
|
|
229
|
+
}
|
|
230
|
+
c(u);
|
|
231
|
+
},
|
|
232
|
+
children: o.label
|
|
233
|
+
},
|
|
234
|
+
o.id
|
|
235
|
+
);
|
|
236
|
+
})
|
|
237
|
+
}
|
|
238
|
+
);
|
|
239
|
+
}
|
|
240
|
+
function x({
|
|
241
|
+
className: n
|
|
242
|
+
} = {}) {
|
|
243
|
+
const { notice: e } = b();
|
|
244
|
+
return e ? /* @__PURE__ */ f(
|
|
245
|
+
"div",
|
|
246
|
+
{
|
|
247
|
+
className: [
|
|
248
|
+
"agenttic-embedded__notice",
|
|
249
|
+
e.status ? `agenttic-embedded__notice--${e.status}` : "",
|
|
250
|
+
n
|
|
251
|
+
].filter(Boolean).join(" "),
|
|
252
|
+
children: [
|
|
253
|
+
/* @__PURE__ */ t("span", { children: e.message }),
|
|
254
|
+
e.action && /* @__PURE__ */ t("button", { type: "button", onClick: e.action.onClick, children: e.action.label })
|
|
255
|
+
]
|
|
256
|
+
}
|
|
257
|
+
) : null;
|
|
258
|
+
}
|
|
259
|
+
function V({
|
|
260
|
+
className: n,
|
|
261
|
+
disabled: e,
|
|
262
|
+
onKeyDown: a
|
|
263
|
+
} = {}) {
|
|
264
|
+
const {
|
|
265
|
+
acceptedFileTypes: i,
|
|
266
|
+
allowAttachments: c,
|
|
267
|
+
fileInputRef: r,
|
|
268
|
+
files: s,
|
|
269
|
+
inputValue: d,
|
|
270
|
+
isProcessing: l,
|
|
271
|
+
maxInputLength: o = 600,
|
|
272
|
+
onStop: u,
|
|
273
|
+
placeholder: h,
|
|
274
|
+
setFiles: p,
|
|
275
|
+
setInputValue: _,
|
|
276
|
+
submit: A
|
|
277
|
+
} = b(), E = !e && (l || !!d.trim() && d.length <= o), k = Array.isArray(h) ? h[0] : h;
|
|
278
|
+
return /* @__PURE__ */ f(
|
|
279
|
+
"div",
|
|
280
|
+
{
|
|
281
|
+
"data-slot": "chat-input",
|
|
282
|
+
className: ["agenttic-embedded__input", n].filter(Boolean).join(" "),
|
|
283
|
+
children: [
|
|
284
|
+
c && /* @__PURE__ */ f(I, { children: [
|
|
285
|
+
/* @__PURE__ */ t(
|
|
286
|
+
"input",
|
|
287
|
+
{
|
|
288
|
+
ref: r,
|
|
289
|
+
type: "file",
|
|
290
|
+
multiple: !0,
|
|
291
|
+
accept: i == null ? void 0 : i.join(","),
|
|
292
|
+
style: { display: "none" },
|
|
293
|
+
onChange: (m) => p(
|
|
294
|
+
Array.from(m.currentTarget.files ?? [])
|
|
295
|
+
)
|
|
296
|
+
}
|
|
297
|
+
),
|
|
298
|
+
/* @__PURE__ */ t(
|
|
299
|
+
"button",
|
|
300
|
+
{
|
|
301
|
+
type: "button",
|
|
302
|
+
"aria-label": g("Upload file", "a8c-agenttic"),
|
|
303
|
+
onClick: () => {
|
|
304
|
+
var m;
|
|
305
|
+
return (m = r.current) == null ? void 0 : m.click();
|
|
306
|
+
},
|
|
307
|
+
children: "+"
|
|
308
|
+
}
|
|
309
|
+
)
|
|
310
|
+
] }),
|
|
311
|
+
/* @__PURE__ */ t(
|
|
312
|
+
"textarea",
|
|
313
|
+
{
|
|
314
|
+
"aria-label": g("Chat input", "a8c-agenttic"),
|
|
315
|
+
placeholder: k,
|
|
316
|
+
value: d,
|
|
317
|
+
onChange: (m) => _(m.currentTarget.value),
|
|
318
|
+
onKeyDown: (m) => {
|
|
319
|
+
a == null || a(m), !m.defaultPrevented && m.key === "Enter" && !m.shiftKey && E && !l && (m.preventDefault(), A());
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
),
|
|
323
|
+
/* @__PURE__ */ t(
|
|
324
|
+
"button",
|
|
325
|
+
{
|
|
326
|
+
type: "button",
|
|
327
|
+
"aria-label": l ? g("Stop processing", "a8c-agenttic") : g("Send message", "a8c-agenttic"),
|
|
328
|
+
disabled: !E,
|
|
329
|
+
onClick: () => {
|
|
330
|
+
if (l) {
|
|
331
|
+
u == null || u();
|
|
332
|
+
return;
|
|
333
|
+
}
|
|
334
|
+
A();
|
|
335
|
+
},
|
|
336
|
+
children: l ? "■" : "↑"
|
|
337
|
+
}
|
|
338
|
+
),
|
|
339
|
+
s.length > 0 && /* @__PURE__ */ t("span", { className: "agenttic-embedded__attachment-count", children: s.length })
|
|
340
|
+
]
|
|
341
|
+
}
|
|
342
|
+
);
|
|
343
|
+
}
|
|
344
|
+
function w({
|
|
345
|
+
children: n,
|
|
346
|
+
className: e
|
|
347
|
+
} = {}) {
|
|
348
|
+
return /* @__PURE__ */ t(
|
|
349
|
+
"div",
|
|
350
|
+
{
|
|
351
|
+
"data-slot": "chat-footer",
|
|
352
|
+
className: ["agenttic-embedded__footer", e].filter(Boolean).join(" "),
|
|
353
|
+
children: n ?? /* @__PURE__ */ f(I, { children: [
|
|
354
|
+
/* @__PURE__ */ t(j, {}),
|
|
355
|
+
/* @__PURE__ */ t(x, {}),
|
|
356
|
+
/* @__PURE__ */ t(V, {})
|
|
357
|
+
] })
|
|
358
|
+
}
|
|
359
|
+
);
|
|
360
|
+
}
|
|
361
|
+
function B({
|
|
362
|
+
children: n,
|
|
363
|
+
className: e
|
|
364
|
+
} = {}) {
|
|
365
|
+
return /* @__PURE__ */ t(
|
|
366
|
+
"div",
|
|
367
|
+
{
|
|
368
|
+
"data-slot": "conversation-view",
|
|
369
|
+
className: ["agenttic-embedded__conversation", e].filter(Boolean).join(" "),
|
|
370
|
+
children: n ?? /* @__PURE__ */ f(I, { children: [
|
|
371
|
+
/* @__PURE__ */ t($, {}),
|
|
372
|
+
/* @__PURE__ */ t(w, {})
|
|
373
|
+
] })
|
|
374
|
+
}
|
|
375
|
+
);
|
|
376
|
+
}
|
|
377
|
+
function M({
|
|
378
|
+
children: n,
|
|
379
|
+
className: e,
|
|
380
|
+
...a
|
|
381
|
+
}) {
|
|
382
|
+
const [i, c] = N(""), [r, s] = N([]), d = R(null), l = a.inputValue ?? i, o = a.onInputChange ?? c, u = F(
|
|
383
|
+
async (p) => {
|
|
384
|
+
const _ = (p ?? l).trim();
|
|
385
|
+
!_ || a.isProcessing || (o(""), s([]), await a.onSubmit(
|
|
386
|
+
_,
|
|
387
|
+
a.allowAttachments ? r : void 0
|
|
388
|
+
));
|
|
389
|
+
},
|
|
390
|
+
[r, l, a, o]
|
|
391
|
+
), h = {
|
|
392
|
+
...a,
|
|
393
|
+
inputValue: l,
|
|
394
|
+
setInputValue: o,
|
|
395
|
+
files: r,
|
|
396
|
+
setFiles: s,
|
|
397
|
+
fileInputRef: d,
|
|
398
|
+
submit: u
|
|
399
|
+
};
|
|
400
|
+
return /* @__PURE__ */ t(C.Provider, { value: h, children: /* @__PURE__ */ t(
|
|
401
|
+
"div",
|
|
402
|
+
{
|
|
403
|
+
"data-slot": "chat-embedded",
|
|
404
|
+
className: ["agenttic", "agenttic-embedded", e].filter(Boolean).join(" "),
|
|
405
|
+
children: n ?? /* @__PURE__ */ t(B, {})
|
|
406
|
+
}
|
|
407
|
+
) });
|
|
408
|
+
}
|
|
409
|
+
const q = {
|
|
410
|
+
Container: M,
|
|
411
|
+
ConversationView: B,
|
|
412
|
+
Messages: $,
|
|
413
|
+
Footer: w,
|
|
414
|
+
Input: V,
|
|
415
|
+
Suggestions: j,
|
|
416
|
+
Notice: x
|
|
417
|
+
}, z = Object.assign(
|
|
418
|
+
(n) => /* @__PURE__ */ t(M, { ...n }),
|
|
419
|
+
q
|
|
420
|
+
), Y = z;
|
|
421
|
+
export {
|
|
422
|
+
Y as AgentUI,
|
|
423
|
+
z as EmbeddedAgentUI,
|
|
424
|
+
M as EmbeddedAgentUIContainer,
|
|
425
|
+
B as EmbeddedAgentUIConversationView,
|
|
426
|
+
w as EmbeddedAgentUIFooter,
|
|
427
|
+
V as EmbeddedAgentUIInput,
|
|
428
|
+
$ as EmbeddedAgentUIMessages,
|
|
429
|
+
x as EmbeddedAgentUINotice,
|
|
430
|
+
j as EmbeddedAgentUISuggestions,
|
|
431
|
+
X as EmptyView,
|
|
432
|
+
W as LightweightMarkdownRenderer,
|
|
433
|
+
O as ThinkingMessage
|
|
434
|
+
};
|
package/dist/global.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.agenttic{--base-font-size: 1rem;--color-white: #FFFFFF;--color-background: #FCFCFC;--color-foreground: #1F1F1F;--color-popover: #FCFCFC;--color-popover-muted: #FCFCFC;--color-primary: #2D5AF2;--color-primary-foreground: var(--color-white);--color-muted: #E9E9E9;--color-muted-foreground: #757575;--color-ring: var(--color-primary);--color-success-background: #F1F7F1;--color-success: var(--color-foreground);--color-warning-background: #F8F3E7;--color-warning: var(--color-foreground);--color-error-background: #FCF1F1;--color-error: #E7000B;--color-link: var(--color-primary);--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-weight-medium: 450;--font-weight-semibold: 500;--font-weight-bold: 600;--text-xs: calc(.8125 * var(--base-font-size));--text-xs--line-height: 1.538;--text-sm: calc(.875 * var(--base-font-size));--text-sm--line-height: 1.65;--text-base: calc(.9375 * var(--base-font-size));--text-base--line-height: 1.625;--text-base--tracking: -.01em;--spacing: calc(.25 * var(--base-font-size));--spacing-1: var(--spacing);--spacing-1\.5: calc(var(--spacing) * 1.5);--spacing-2: calc(var(--spacing) * 2);--spacing-3: calc(var(--spacing) * 3);--spacing-3\.5: calc(var(--spacing) * 3.5);--spacing-4: calc(var(--spacing) * 4);--spacing-5: calc(var(--spacing) * 5);--spacing-6: calc(var(--spacing) * 6);--spacing-7: calc(var(--spacing) * 7);--spacing-8: calc(var(--spacing) * 8);--spacing-9: calc(var(--spacing) * 9);--spacing-10: calc(var(--spacing) * 10);--spacing-12: calc(var(--spacing) * 12);--spacing-20: calc(var(--spacing) * 20);--radius: var(--base-font-size);--radius-xs: calc(var(--radius) - 10px);--radius-sm: calc(var(--radius) - 8px);--radius-md: calc(var(--radius) - 2px);--radius-lg: var(--radius);--radius-xl: calc(var(--radius) + 8px);--radius-full: 9999px;--shadow-sm: 0 0 0 1px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 0 6px color-mix(in srgb, var(--color-foreground) 5%, transparent);--shadow-lg: 0 0 0 1px rgba(0, 0, 0, .075), 0 2px 24px rgba(0, 0, 0, .075);--shadow-outline: 0 0 0 1px color-mix(in srgb, var(--color-foreground) 10%, transparent);--shadow-outline-strong: 0 0 0 1px color-mix(in srgb, var(--color-foreground) 25%, transparent);--transition-colors: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1), fill .15s cubic-bezier(.4, 0, .2, 1), stroke .15s cubic-bezier(.4, 0, .2, 1)}.agenttic.dark{--color-background: #1F1F1F;--color-foreground: #FFFFFF;--color-popover: #1F1F1F;--color-popover-muted: #2F2F2F;--color-muted: #464646;--color-muted-foreground: #8F8F8F;--color-success-background: #1F2E1F;--color-warning-background: #2E281F;--color-error-background: #2E1F1F;--color-error: #FFDDDF;--color-link: var(--color-white)}.agenttic.dark [data-slot=collapsed-view] svg{color:var(--color-white)}@layer base{.agenttic *,.agenttic :before,.agenttic :after,.agenttic ::backdrop,.agenttic ::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}.agenttic *{outline-color:var(--color-ring)}.agenttic button,.agenttic input,.agenttic select,.agenttic optgroup,.agenttic textarea,.agenttic ::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;background-color:transparent;opacity:1}.agenttic input,.agenttic select,.agenttic optgroup,.agenttic textarea,.agenttic ::file-selector-button{color:inherit;border-radius:0}.agenttic [data-slot=messages],.agenttic [data-slot=chat-input],.agenttic [data-slot=chat-footer],.agenttic [data-slot=chat-header] [data-slot=button]{cursor:default}}
|