@portablecore/chat 0.1.5 → 0.2.1
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/chat-interface-core.d.ts +4 -0
- package/dist/chat-interface-core.d.ts.map +1 -1
- package/dist/chat-interface-core.js +10 -2
- package/dist/chat-interface-core.js.map +1 -1
- package/dist/components/input-area.d.ts +4 -2
- package/dist/components/input-area.d.ts.map +1 -1
- package/dist/components/input-area.js +18 -6
- package/dist/components/input-area.js.map +1 -1
- package/dist/components/message-bubble.d.ts +5 -5
- package/dist/components/message-bubble.d.ts.map +1 -1
- package/dist/components/message-bubble.js +110 -12
- package/dist/components/message-bubble.js.map +1 -1
- package/dist/components/message-list.d.ts +3 -3
- package/dist/components/message-list.d.ts.map +1 -1
- package/dist/components/message-list.js +13 -4
- package/dist/components/message-list.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -12,6 +12,10 @@ interface ChatInterfaceCoreProps {
|
|
|
12
12
|
* Platform-specific behavior is injected via the config's features,
|
|
13
13
|
* slots, resolvers, and handlers. The component itself has zero
|
|
14
14
|
* knowledge of Expert vs. Team.
|
|
15
|
+
*
|
|
16
|
+
* Supports two layout variants:
|
|
17
|
+
* - "full" (default): Expert-quality full-page chat
|
|
18
|
+
* - "compact": Drawer/embedded chat (Team, EA Lite)
|
|
15
19
|
*/
|
|
16
20
|
export declare function ChatInterfaceCore({ config, markdownComponents, }: ChatInterfaceCoreProps): import("react/jsx-runtime").JSX.Element;
|
|
17
21
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chat-interface-core.d.ts","sourceRoot":"","sources":["../src/chat-interface-core.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAa,MAAM,YAAY,CAAA;AAQhE,UAAU,sBAAsB;IAC9B,MAAM,EAAE,mBAAmB,CAAA;IAE3B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACzC;AAED
|
|
1
|
+
{"version":3,"file":"chat-interface-core.d.ts","sourceRoot":"","sources":["../src/chat-interface-core.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAa,MAAM,YAAY,CAAA;AAQhE,UAAU,sBAAsB;IAC9B,MAAM,EAAE,mBAAmB,CAAA;IAE3B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACzC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,kBAAkB,GACnB,EAAE,sBAAsB,2CAgFxB"}
|
|
@@ -18,11 +18,17 @@ const empty_state_js_1 = require("./components/empty-state.js");
|
|
|
18
18
|
* Platform-specific behavior is injected via the config's features,
|
|
19
19
|
* slots, resolvers, and handlers. The component itself has zero
|
|
20
20
|
* knowledge of Expert vs. Team.
|
|
21
|
+
*
|
|
22
|
+
* Supports two layout variants:
|
|
23
|
+
* - "full" (default): Expert-quality full-page chat
|
|
24
|
+
* - "compact": Drawer/embedded chat (Team, EA Lite)
|
|
21
25
|
*/
|
|
22
26
|
function ChatInterfaceCore({ config, markdownComponents, }) {
|
|
23
27
|
const session = (0, use_chat_session_js_1.useChatSession)(config);
|
|
24
28
|
const attachmentState = (0, use_attachments_js_1.useAttachments)(config.resolvers?.documentResolver);
|
|
25
29
|
const slots = (config.slots || {});
|
|
30
|
+
const variant = config.variant || "full";
|
|
31
|
+
const isCompact = variant === "compact";
|
|
26
32
|
const showThinking = session.streaming &&
|
|
27
33
|
session.thinkingStages.length > 0 &&
|
|
28
34
|
!session.activeSkill;
|
|
@@ -30,8 +36,10 @@ function ChatInterfaceCore({ config, markdownComponents, }) {
|
|
|
30
36
|
session.send(content);
|
|
31
37
|
attachmentState.clear();
|
|
32
38
|
};
|
|
33
|
-
|
|
39
|
+
const thinkingMaxWidth = isCompact ? "max-w-3xl" : "max-w-5xl";
|
|
40
|
+
const rootClasses = `flex h-full ${config.classNames?.root || ""}`;
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: rootClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)(message_list_js_1.MessageList, { messages: session.messages, streaming: session.streaming, config: config, markdownComponents: markdownComponents, emptyState: slots.emptyState || ((0, jsx_runtime_1.jsx)(empty_state_js_1.EmptyState, { expertName: config.expert?.name })), beforeMessageList: slots.beforeMessageList, afterMessageList: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showThinking && ((0, jsx_runtime_1.jsx)("div", { className: `${thinkingMaxWidth} mx-auto px-4`, children: (0, jsx_runtime_1.jsx)(thinking_indicator_js_1.ThinkingIndicator, { stages: session.thinkingStages, expertName: config.expert?.name, expertAvatarUrl: config.expert?.avatarUrl }) })), slots.afterMessageList] }) }), (0, jsx_runtime_1.jsx)(input_area_js_1.InputArea, { onSend: handleSend, onAbort: session.abort, streaming: session.streaming, sending: session.sending, placeholder: config.expert
|
|
34
42
|
? `Message ${config.expert.name}...`
|
|
35
|
-
: "Send a message...", prefillText: config.prefillText, inputPrefix: slots.inputPrefix, inputSuffix: slots.inputSuffix, attachments: attachmentState.attachments, uploading: attachmentState.uploading, onAddFiles: attachmentState.addFiles, onRemoveAttachment: attachmentState.remove, hasDocumentResolver: !!config.resolvers?.documentResolver })] }), slots.sidePanel && ((0, jsx_runtime_1.jsx)("div", { className: "w-80 border-l border-border overflow-y-auto", children: slots.sidePanel }))] }));
|
|
43
|
+
: "Send a message...", prefillText: config.prefillText, inputPrefix: slots.inputPrefix, inputSuffix: slots.inputSuffix, attachments: attachmentState.attachments, uploading: attachmentState.uploading, onAddFiles: attachmentState.addFiles, onRemoveAttachment: attachmentState.remove, hasDocumentResolver: !!config.resolvers?.documentResolver, variant: variant, classNames: config.classNames })] }), slots.sidePanel && ((0, jsx_runtime_1.jsx)("div", { className: "w-80 border-l border-border overflow-y-auto", children: slots.sidePanel }))] }));
|
|
36
44
|
}
|
|
37
45
|
//# sourceMappingURL=chat-interface-core.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chat-interface-core.js","sourceRoot":"","sources":["../src/chat-interface-core.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;
|
|
1
|
+
{"version":3,"file":"chat-interface-core.js","sourceRoot":"","sources":["../src/chat-interface-core.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
|
-
import type { DocumentRef } from "../types.js";
|
|
2
|
+
import type { DocumentRef, ChatVariant, ChatClassNames } from "../types.js";
|
|
3
3
|
interface InputAreaProps {
|
|
4
4
|
onSend: (content: string) => void;
|
|
5
5
|
onAbort?: () => void;
|
|
@@ -15,7 +15,9 @@ interface InputAreaProps {
|
|
|
15
15
|
onAddFiles?: (files: File[]) => void;
|
|
16
16
|
onRemoveAttachment?: (documentId: string) => void;
|
|
17
17
|
hasDocumentResolver?: boolean;
|
|
18
|
+
variant?: ChatVariant;
|
|
19
|
+
classNames?: ChatClassNames;
|
|
18
20
|
}
|
|
19
|
-
export declare function InputArea({ onSend, onAbort, streaming, sending, disabled, placeholder, prefillText, inputPrefix, inputSuffix, attachments, uploading, onAddFiles, onRemoveAttachment, hasDocumentResolver, }: InputAreaProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare function InputArea({ onSend, onAbort, streaming, sending, disabled, placeholder, prefillText, inputPrefix, inputSuffix, attachments, uploading, onAddFiles, onRemoveAttachment, hasDocumentResolver, variant, classNames, }: InputAreaProps): import("react/jsx-runtime").JSX.Element;
|
|
20
22
|
export {};
|
|
21
23
|
//# sourceMappingURL=input-area.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-area.d.ts","sourceRoot":"","sources":["../../src/components/input-area.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"input-area.d.ts","sourceRoot":"","sources":["../../src/components/input-area.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAE3E,UAAU,cAAc;IACtB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,WAAW,EAAE,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IACpC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,UAAU,CAAC,EAAE,cAAc,CAAA;CAC5B;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,EACP,QAAgB,EAChB,WAAiC,EACjC,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAgB,EAChB,SAAiB,EACjB,UAAU,EACV,kBAAkB,EAClB,mBAA2B,EAC3B,OAAgB,EAChB,UAAU,GACX,EAAE,cAAc,2CAuNhB"}
|
|
@@ -5,12 +5,13 @@ exports.InputArea = InputArea;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const lucide_react_1 = require("lucide-react");
|
|
8
|
-
function InputArea({ onSend, onAbort, streaming, sending, disabled = false, placeholder = "Send a message...", prefillText, inputPrefix, inputSuffix, attachments = [], uploading = false, onAddFiles, onRemoveAttachment, hasDocumentResolver = false, }) {
|
|
8
|
+
function InputArea({ onSend, onAbort, streaming, sending, disabled = false, placeholder = "Send a message...", prefillText, inputPrefix, inputSuffix, attachments = [], uploading = false, onAddFiles, onRemoveAttachment, hasDocumentResolver = false, variant = "full", classNames, }) {
|
|
9
9
|
const [text, setText] = (0, react_1.useState)(prefillText || "");
|
|
10
10
|
const [dragOver, setDragOver] = (0, react_1.useState)(false);
|
|
11
11
|
const textareaRef = (0, react_1.useRef)(null);
|
|
12
12
|
const composingRef = (0, react_1.useRef)(false);
|
|
13
13
|
const fileInputRef = (0, react_1.useRef)(null);
|
|
14
|
+
const isCompact = variant === "compact";
|
|
14
15
|
(0, react_1.useEffect)(() => {
|
|
15
16
|
if (prefillText) {
|
|
16
17
|
setText(prefillText);
|
|
@@ -77,10 +78,21 @@ function InputArea({ onSend, onAbort, streaming, sending, disabled = false, plac
|
|
|
77
78
|
e.target.value = "";
|
|
78
79
|
}, [onAddFiles]);
|
|
79
80
|
const canSend = text.trim().length > 0 && !sending && !streaming && !disabled;
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
const footerClasses = isCompact
|
|
82
|
+
? `border-t border-border bg-card px-4 py-3 ${classNames?.inputFooter || ""}`
|
|
83
|
+
: `border-t border-[var(--border-subtle,#bfcbd8)] bg-[var(--chat-footer-bg,#eff2f6)] dark:bg-[var(--chat-footer-bg,#0f172a)] w-full flex-shrink-0 pb-[env(safe-area-inset-bottom,0px)] ${classNames?.inputFooter || ""}`;
|
|
84
|
+
const innerMaxWidth = isCompact ? "max-w-3xl" : "max-w-5xl";
|
|
85
|
+
const textareaClasses = isCompact
|
|
86
|
+
? `w-full resize-none rounded-xl border border-border bg-background px-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:opacity-50 transition-colors ${classNames?.inputField || ""}`
|
|
87
|
+
: `chat-input-textarea block w-full pl-3 sm:pl-4 pr-12 text-base sm:text-[15px] bg-[var(--chat-input-bg,#ffffff)] dark:bg-[var(--chat-input-bg,#1e293b)] border border-[var(--chat-input-border,#cbd5e1)] dark:border-[var(--chat-input-border,#334155)] rounded-2xl text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:border-slate-400 dark:focus:border-slate-500 resize-none disabled:opacity-50 ${classNames?.inputField || ""}`;
|
|
88
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: `${footerClasses} ${dragOver ? "ring-2 ring-primary ring-inset" : ""}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [inputPrefix && (0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: inputPrefix }), attachments.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-wrap gap-1.5 mb-2 ${innerMaxWidth} mx-auto`, children: [attachments.map((doc) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 px-2 py-1 rounded-lg bg-muted text-xs text-foreground", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "w-3 h-3 text-muted-foreground shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate max-w-[150px]", children: doc.name }), onRemoveAttachment && ((0, jsx_runtime_1.jsx)("button", { onClick: () => onRemoveAttachment(doc.id), className: "p-0.5 rounded hover:bg-accent text-muted-foreground hover:text-foreground transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3" }) }))] }, doc.id))), uploading && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 px-2 py-1 rounded-lg bg-muted text-xs text-muted-foreground", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-3 h-3 border border-current border-t-transparent rounded-full animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Uploading..." })] }))] })), (0, jsx_runtime_1.jsx)("div", { className: `${innerMaxWidth} mx-auto`, children: (0, jsx_runtime_1.jsxs)("div", { className: `flex items-end gap-2 ${isCompact ? "" : "px-4 sm:px-6 py-3 sm:py-4"}`, children: [hasDocumentResolver && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleFileSelect, disabled: uploading, className: "p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent disabled:opacity-50 transition-colors", "aria-label": "Attach document", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { className: "w-4 h-4" }) }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: handleFileInputChange })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative", children: (0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, value: text, onChange: (e) => setText(e.target.value), onKeyDown: handleKeyDown, onCompositionStart: () => {
|
|
89
|
+
composingRef.current = true;
|
|
90
|
+
}, onCompositionEnd: () => {
|
|
91
|
+
composingRef.current = false;
|
|
92
|
+
}, placeholder: placeholder, disabled: disabled || sending, rows: 1, className: textareaClasses, style: isCompact
|
|
93
|
+
? undefined
|
|
94
|
+
: { lineHeight: "22px", paddingTop: "12px", paddingBottom: "12px", minHeight: "48px" } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [inputSuffix, streaming ? ((0, jsx_runtime_1.jsx)("button", { onClick: onAbort, className: "p-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors", "aria-label": "Stop generating", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Square, { className: "w-4 h-4" }) })) : ((0, jsx_runtime_1.jsx)("button", { onClick: handleSend, disabled: !canSend, className: `p-2 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${isCompact
|
|
95
|
+
? "bg-[var(--chat-bubble-user,#0047AB)] text-[var(--chat-bubble-user-text,#ffffff)] hover:opacity-90"
|
|
96
|
+
: "bg-[var(--chat-bubble-user,#0047AB)] text-[var(--chat-bubble-user-text,#ffffff)] hover:opacity-90"} ${classNames?.sendButton || ""}`, "aria-label": "Send message", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "w-4 h-4" }) }))] })] }) })] }));
|
|
85
97
|
}
|
|
86
98
|
//# sourceMappingURL=input-area.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-area.js","sourceRoot":"","sources":["../../src/components/input-area.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;
|
|
1
|
+
{"version":3,"file":"input-area.js","sourceRoot":"","sources":["../../src/components/input-area.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,12 +8,12 @@ interface MessageBubbleProps {
|
|
|
8
8
|
markdownComponents?: Record<string, any>;
|
|
9
9
|
}
|
|
10
10
|
/**
|
|
11
|
-
* A single message bubble. Handles
|
|
12
|
-
*
|
|
11
|
+
* A single message bubble. Handles user/assistant roles, markdown rendering,
|
|
12
|
+
* streaming text animation, timestamps, and message type visual variants.
|
|
13
13
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
14
|
+
* Supports two layout modes:
|
|
15
|
+
* - "full" (default): Corner-positioned avatars, hover-only timestamps, Expert aesthetic
|
|
16
|
+
* - "compact": Inline avatars, always-visible timestamps, drawer/lite aesthetic
|
|
17
17
|
*/
|
|
18
18
|
export declare const MessageBubble: import("react").NamedExoticComponent<MessageBubbleProps>;
|
|
19
19
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-bubble.d.ts","sourceRoot":"","sources":["../../src/components/message-bubble.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"message-bubble.d.ts","sourceRoot":"","sources":["../../src/components/message-bubble.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,0BAA0B,CAAA;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAKtD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,WAAW,CAAA;IACpB,cAAc,EAAE,OAAO,CAAA;IACvB,aAAa,EAAE,OAAO,CAAA;IACtB,MAAM,EAAE,mBAAmB,CAAA;IAE3B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACzC;AA8CD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,0DAkPxB,CAAA"}
|
|
@@ -11,26 +11,124 @@ const react_markdown_1 = __importDefault(require("react-markdown"));
|
|
|
11
11
|
const markdown_config_js_1 = require("../utils/markdown-config.js");
|
|
12
12
|
const time_js_1 = require("../utils/time.js");
|
|
13
13
|
const streaming_text_js_1 = require("./streaming-text.js");
|
|
14
|
+
// ---------------------------------------------------------------------------
|
|
15
|
+
// Bubble class resolution per message type
|
|
16
|
+
// ---------------------------------------------------------------------------
|
|
17
|
+
function getBubbleTypeClasses(messageType, role, isInboxItem, approvalStatus) {
|
|
18
|
+
const type = messageType || "default";
|
|
19
|
+
switch (type) {
|
|
20
|
+
case "whisper":
|
|
21
|
+
return "bg-transparent border-2 border-dotted border-slate-300 dark:border-slate-600";
|
|
22
|
+
case "superbrain":
|
|
23
|
+
return "bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950/50 dark:to-purple-950/50 border border-violet-200 dark:border-violet-800";
|
|
24
|
+
case "catch_me_up":
|
|
25
|
+
return "bg-amber-50/50 dark:bg-amber-950/20 border-2 border-dashed border-amber-300 dark:border-amber-700";
|
|
26
|
+
case "proxy":
|
|
27
|
+
return role === "user"
|
|
28
|
+
? "bg-blue-50/60 dark:bg-blue-950/30 border border-blue-300/60 dark:border-blue-700/60"
|
|
29
|
+
: "bg-blue-50/60 dark:bg-blue-950/30 border border-blue-300/60 dark:border-blue-700/60";
|
|
30
|
+
case "forwarded":
|
|
31
|
+
return role === "user"
|
|
32
|
+
? "bg-[#2a7d9c] dark:bg-[#1a5a70] text-white"
|
|
33
|
+
: "bg-teal-50 dark:bg-teal-950/40 border border-teal-200 dark:border-teal-800";
|
|
34
|
+
case "consultation":
|
|
35
|
+
return "bg-violet-50/50 dark:bg-violet-950/20 border border-violet-200/60 dark:border-violet-800/60";
|
|
36
|
+
case "team_update":
|
|
37
|
+
return "bg-[var(--chat-bubble-user,#0047AB)]/10 dark:bg-blue-900/30 border border-[var(--chat-bubble-user,#0047AB)]/20 dark:border-blue-800";
|
|
38
|
+
case "inbox": {
|
|
39
|
+
const accent = approvalStatus
|
|
40
|
+
? "border-l-amber-400"
|
|
41
|
+
: "border-l-indigo-400/60";
|
|
42
|
+
return `bg-[var(--chat-bubble-assistant,#ffffff)] dark:bg-[var(--chat-bubble-assistant,#1e293b)] border border-[var(--chat-bubble-assistant-border,#e2e8f0)] dark:border-[var(--chat-bubble-assistant-border,#334155)] border-l-2 ${accent}`;
|
|
43
|
+
}
|
|
44
|
+
default:
|
|
45
|
+
if (role === "user") {
|
|
46
|
+
return "bg-[var(--chat-bubble-user,#0047AB)] text-[var(--chat-bubble-user-text,#ffffff)]";
|
|
47
|
+
}
|
|
48
|
+
return "bg-[var(--chat-bubble-assistant,#ffffff)] dark:bg-[var(--chat-bubble-assistant,#1e293b)] text-[var(--chat-bubble-assistant-text,inherit)] border border-[var(--chat-bubble-assistant-border,#e2e8f0)] dark:border-[var(--chat-bubble-assistant-border,#334155)]";
|
|
49
|
+
}
|
|
50
|
+
}
|
|
14
51
|
/**
|
|
15
|
-
* A single message bubble. Handles
|
|
16
|
-
*
|
|
52
|
+
* A single message bubble. Handles user/assistant roles, markdown rendering,
|
|
53
|
+
* streaming text animation, timestamps, and message type visual variants.
|
|
17
54
|
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
55
|
+
* Supports two layout modes:
|
|
56
|
+
* - "full" (default): Corner-positioned avatars, hover-only timestamps, Expert aesthetic
|
|
57
|
+
* - "compact": Inline avatars, always-visible timestamps, drawer/lite aesthetic
|
|
21
58
|
*/
|
|
22
59
|
exports.MessageBubble = (0, react_1.memo)(function MessageBubble({ message, isFirstInGroup, isLastInGroup, config, markdownComponents, }) {
|
|
23
60
|
const isUser = message.role === "user";
|
|
24
61
|
const isStreaming = message.streaming === true;
|
|
62
|
+
const variant = config.variant || "full";
|
|
63
|
+
const isCompact = variant === "compact";
|
|
25
64
|
const expertInfo = config.expert;
|
|
26
65
|
const currentUser = config.currentUser;
|
|
27
|
-
|
|
28
|
-
const
|
|
66
|
+
// Resolve sender for group chats
|
|
67
|
+
const senderName = (0, react_1.useMemo)(() => {
|
|
68
|
+
if (isUser) {
|
|
69
|
+
if (message.senderUserId && config.users) {
|
|
70
|
+
const found = config.users.find((u) => u.id === message.senderUserId);
|
|
71
|
+
if (found)
|
|
72
|
+
return found.name;
|
|
73
|
+
}
|
|
74
|
+
return currentUser.name;
|
|
75
|
+
}
|
|
76
|
+
if (message.senderExpertId && config.experts) {
|
|
77
|
+
const found = config.experts.find((e) => e.id === message.senderExpertId);
|
|
78
|
+
if (found)
|
|
79
|
+
return found.name;
|
|
80
|
+
}
|
|
81
|
+
return expertInfo?.name;
|
|
82
|
+
}, [
|
|
83
|
+
isUser,
|
|
84
|
+
message.senderUserId,
|
|
85
|
+
message.senderExpertId,
|
|
86
|
+
config.users,
|
|
87
|
+
config.experts,
|
|
88
|
+
currentUser.name,
|
|
89
|
+
expertInfo?.name,
|
|
90
|
+
]);
|
|
91
|
+
const avatarUrl = (0, react_1.useMemo)(() => {
|
|
92
|
+
if (isUser) {
|
|
93
|
+
if (message.senderUserId && config.users) {
|
|
94
|
+
const found = config.users.find((u) => u.id === message.senderUserId);
|
|
95
|
+
if (found?.avatarUrl)
|
|
96
|
+
return found.avatarUrl;
|
|
97
|
+
}
|
|
98
|
+
return currentUser.avatarUrl;
|
|
99
|
+
}
|
|
100
|
+
if (message.senderExpertId && config.experts) {
|
|
101
|
+
const found = config.experts.find((e) => e.id === message.senderExpertId);
|
|
102
|
+
if (found?.avatarUrl)
|
|
103
|
+
return found.avatarUrl;
|
|
104
|
+
}
|
|
105
|
+
return expertInfo?.avatarUrl;
|
|
106
|
+
}, [
|
|
107
|
+
isUser,
|
|
108
|
+
message.senderUserId,
|
|
109
|
+
message.senderExpertId,
|
|
110
|
+
config.users,
|
|
111
|
+
config.experts,
|
|
112
|
+
currentUser.avatarUrl,
|
|
113
|
+
expertInfo?.avatarUrl,
|
|
114
|
+
]);
|
|
29
115
|
const timestamp = (0, react_1.useMemo)(() => (message.createdAt ? (0, time_js_1.formatTime)(message.createdAt) : null), [message.createdAt]);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
116
|
+
const bubbleTypeClasses = getBubbleTypeClasses(message.messageType, message.role, message.isInboxItem, message.approvalStatus);
|
|
117
|
+
const classNameOverride = config.classNames?.bubble || "";
|
|
118
|
+
// Prose classes per role
|
|
119
|
+
const proseClasses = isUser
|
|
120
|
+
? "prose prose-sm max-w-none text-white prose-headings:text-white prose-strong:text-white prose-em:text-white prose-code:text-blue-100 prose-pre:bg-blue-900/50 prose-pre:border-blue-700 prose-a:text-blue-200 prose-a:underline prose-p:my-2 prose-headings:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-0.5 prose-li:text-white prose-pre:my-2"
|
|
121
|
+
: "prose prose-sm max-w-none prose-slate dark:prose-invert prose-p:my-2 prose-headings:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-0.5 prose-pre:my-2 prose-code:text-slate-800 dark:prose-code:text-slate-200 prose-pre:bg-slate-50 dark:prose-pre:bg-slate-900 prose-pre:border-slate-200 dark:prose-pre:border-slate-700 prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:underline";
|
|
122
|
+
// -------------------------------------------------------------------------
|
|
123
|
+
// Compact variant: inline avatars, always-visible timestamps
|
|
124
|
+
// -------------------------------------------------------------------------
|
|
125
|
+
if (isCompact) {
|
|
126
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} ${isFirstInGroup ? "mt-4" : "mt-0.5"}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `flex gap-2.5 max-w-[85%] ${isUser ? "flex-row-reverse" : "flex-row"}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-7 h-7 shrink-0", children: isFirstInGroup &&
|
|
127
|
+
(avatarUrl ? ((0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: senderName || "", className: "w-7 h-7 rounded-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-7 h-7 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground", children: (senderName || "?").charAt(0).toUpperCase() }))) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5", children: [isFirstInGroup && senderName && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs font-medium text-muted-foreground ${isUser ? "text-right" : "text-left"}`, children: senderName })), (0, jsx_runtime_1.jsx)("div", { className: `px-4 py-2.5 rounded-2xl ${bubbleTypeClasses} ${classNameOverride}`, children: (0, jsx_runtime_1.jsx)("div", { className: proseClasses, children: isStreaming ? ((0, jsx_runtime_1.jsx)(streaming_text_js_1.StreamingText, { content: message.content, isStreaming: true, markdownComponents: markdownComponents })) : ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: markdown_config_js_1.remarkPlugins, rehypePlugins: markdown_config_js_1.rehypePlugins, components: markdownComponents, children: message.content })) }) }), isLastInGroup && timestamp && ((0, jsx_runtime_1.jsx)("span", { className: `text-[10px] text-muted-foreground mt-0.5 ${isUser ? "text-right" : "text-left"}`, children: timestamp }))] })] }) }));
|
|
128
|
+
}
|
|
129
|
+
// -------------------------------------------------------------------------
|
|
130
|
+
// Full variant: corner avatars, hover timestamps, Expert aesthetic
|
|
131
|
+
// -------------------------------------------------------------------------
|
|
132
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} ${isFirstInGroup ? "mt-6" : "mt-0.5"}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "group relative max-w-[85%] sm:max-w-[70%]", children: [isFirstInGroup && !isUser && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -top-2 -left-2 z-10", children: avatarUrl ? ((0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: senderName || "", className: "w-6 h-6 rounded-full object-cover ring-2 ring-slate-100 dark:ring-slate-800 shadow-sm" })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-6 h-6 rounded-full bg-slate-300 dark:bg-slate-600 ring-2 ring-slate-100 dark:ring-slate-800 shadow-sm flex items-center justify-center text-slate-600 dark:text-slate-300 text-xs font-medium", children: (senderName || "?").charAt(0).toUpperCase() })) })), isFirstInGroup && isUser && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -top-2 -right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity", children: avatarUrl ? ((0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: senderName || "", className: "w-6 h-6 rounded-full object-cover ring-2 ring-blue-100 dark:ring-blue-900/50 shadow-sm" })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-6 h-6 rounded-full bg-blue-500 ring-2 ring-blue-100 dark:ring-blue-900/50 shadow-sm flex items-center justify-center text-white text-xs font-medium", children: (senderName || "?").charAt(0).toUpperCase() })) })), (0, jsx_runtime_1.jsx)("div", { className: `relative rounded-2xl transform-gpu cursor-pointer sm:cursor-default select-none sm:select-text transition-shadow duration-500 px-3 sm:px-4 py-1 sm:py-1.5 ${bubbleTypeClasses} ${classNameOverride}`, children: (0, jsx_runtime_1.jsx)("div", { className: proseClasses, children: isStreaming ? ((0, jsx_runtime_1.jsx)(streaming_text_js_1.StreamingText, { content: message.content, isStreaming: true, markdownComponents: markdownComponents })) : ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: markdown_config_js_1.remarkPlugins, rehypePlugins: markdown_config_js_1.rehypePlugins, components: markdownComponents, children: message.content })) }) }), isLastInGroup && timestamp && ((0, jsx_runtime_1.jsx)("div", { className: `absolute -bottom-5 ${isUser ? "right-1" : "left-1"} flex items-center gap-1.5 text-[10px] text-slate-400 dark:text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap`, children: timestamp }))] }) }));
|
|
35
133
|
});
|
|
36
134
|
//# sourceMappingURL=message-bubble.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-bubble.js","sourceRoot":"","sources":["../../src/components/message-bubble.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;;;;;;AAEZ,iCAAqC;AACrC,oEAA0C;AAG1C,oEAA0E;AAC1E,8CAA6C;AAC7C,2DAAmD;AAWnD;;;;;;;GAOG;AACU,QAAA,aAAa,GAAG,IAAA,YAAI,EAAC,SAAS,aAAa,CAAC,EACvD,OAAO,EACP,cAAc,EACd,aAAa,EACb,MAAM,EACN,kBAAkB,GACC;IACnB,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,KAAK,MAAM,CAAA;IACtC,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,KAAK,IAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"message-bubble.js","sourceRoot":"","sources":["../../src/components/message-bubble.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,9 +14,9 @@ interface MessageListProps {
|
|
|
14
14
|
* Scrollable message list with auto-scroll, date separators,
|
|
15
15
|
* and message grouping.
|
|
16
16
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
17
|
+
* Supports two layout variants:
|
|
18
|
+
* - "full": max-w-5xl, wider padding, extra bottom space for scroll
|
|
19
|
+
* - "compact": max-w-3xl, tighter padding
|
|
20
20
|
*/
|
|
21
21
|
export declare function MessageList({ messages, streaming, config, markdownComponents, emptyState, beforeMessageList, afterMessageList, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-list.d.ts","sourceRoot":"","sources":["../../src/components/message-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAKtD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,mBAAmB,CAAA;IAE3B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACxC,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"message-list.d.ts","sourceRoot":"","sources":["../../src/components/message-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAKtD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,mBAAmB,CAAA;IAE3B,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACxC,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,gBAAgB,2CA6DlB"}
|
|
@@ -11,14 +11,23 @@ const message_bubble_js_1 = require("./message-bubble.js");
|
|
|
11
11
|
* Scrollable message list with auto-scroll, date separators,
|
|
12
12
|
* and message grouping.
|
|
13
13
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
14
|
+
* Supports two layout variants:
|
|
15
|
+
* - "full": max-w-5xl, wider padding, extra bottom space for scroll
|
|
16
|
+
* - "compact": max-w-3xl, tighter padding
|
|
17
17
|
*/
|
|
18
18
|
function MessageList({ messages, streaming, config, markdownComponents, emptyState, beforeMessageList, afterMessageList, }) {
|
|
19
19
|
const { scrollRef } = (0, use_chat_scroll_js_1.useChatScroll)({ messages, streaming });
|
|
20
|
+
const variant = config.variant || "full";
|
|
21
|
+
const isCompact = variant === "compact";
|
|
20
22
|
const renderableMessages = (0, react_1.useMemo)(() => (0, message_grouping_js_1.groupMessages)(messages), [messages]);
|
|
21
23
|
const isEmpty = messages.length === 0;
|
|
22
|
-
|
|
24
|
+
const scrollClasses = isCompact
|
|
25
|
+
? "flex-1 overflow-y-auto px-4 py-4"
|
|
26
|
+
: "flex-1 overflow-y-auto";
|
|
27
|
+
const innerClasses = isCompact
|
|
28
|
+
? `max-w-3xl mx-auto space-y-0 ${config.classNames?.messageListInner || ""}`
|
|
29
|
+
: `max-w-5xl mx-auto px-4 sm:px-6 pt-2 pb-12 sm:pb-4 space-y-0 ${config.classNames?.messageListInner || ""}`;
|
|
30
|
+
const listClasses = config.classNames?.messageList || "";
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ref: scrollRef, className: `${scrollClasses} ${listClasses}`, children: [beforeMessageList, isEmpty && emptyState ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full", children: emptyState })) : ((0, jsx_runtime_1.jsx)("div", { className: innerClasses, children: renderableMessages.map((rm) => ((0, jsx_runtime_1.jsxs)("div", { children: [rm.showDateSeparator && rm.dateSeparatorLabel && ((0, jsx_runtime_1.jsx)("div", { className: `flex items-center justify-center ${isCompact ? "py-4" : "my-6"}`, children: (0, jsx_runtime_1.jsx)("div", { className: `px-3 py-1 rounded-full text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 ${config.classNames?.dateSeparator || ""}`, children: rm.dateSeparatorLabel }) })), (0, jsx_runtime_1.jsx)(message_bubble_js_1.MessageBubble, { message: rm.message, isFirstInGroup: rm.isFirstInGroup, isLastInGroup: rm.isLastInGroup, config: config, markdownComponents: markdownComponents })] }, rm.message.id))) })), afterMessageList] }));
|
|
23
32
|
}
|
|
24
33
|
//# sourceMappingURL=message-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-list.js","sourceRoot":"","sources":["../../src/components/message-list.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;AA4BZ,
|
|
1
|
+
{"version":3,"file":"message-list.js","sourceRoot":"","sources":["../../src/components/message-list.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;AA4BZ,kCAqEC;;AA/FD,iCAA+C;AAG/C,sEAA4D;AAC5D,oEAA2D;AAC3D,2DAAmD;AAanD;;;;;;;GAOG;AACH,SAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,gBAAgB,GACC;IACjB,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,kCAAa,EAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAA;IAC5D,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,MAAM,CAAA;IACxC,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,CAAA;IAEvC,MAAM,kBAAkB,GAAG,IAAA,eAAO,EAChC,GAAG,EAAE,CAAC,IAAA,mCAAa,EAAC,QAAQ,CAAC,EAC7B,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAA;IAErC,MAAM,aAAa,GAAG,SAAS;QAC7B,CAAC,CAAC,kCAAkC;QACpC,CAAC,CAAC,wBAAwB,CAAA;IAE5B,MAAM,YAAY,GAAG,SAAS;QAC5B,CAAC,CAAC,+BAA+B,MAAM,CAAC,UAAU,EAAE,gBAAgB,IAAI,EAAE,EAAE;QAC5E,CAAC,CAAC,+DAA+D,MAAM,CAAC,UAAU,EAAE,gBAAgB,IAAI,EAAE,EAAE,CAAA;IAE9G,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,WAAW,IAAI,EAAE,CAAA;IAExD,OAAO,CACL,iCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,GAAG,aAAa,IAAI,WAAW,EAAE,aAE3C,iBAAiB,EAEjB,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,CACvB,gCAAK,SAAS,EAAC,yCAAyC,YACrD,UAAU,GACP,CACP,CAAC,CAAC,CAAC,CACF,gCAAK,SAAS,EAAE,YAAY,YACzB,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAC9B,4CACG,EAAE,CAAC,iBAAiB,IAAI,EAAE,CAAC,kBAAkB,IAAI,CAChD,gCAAK,SAAS,EAAE,oCAAoC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,YAC/E,gCACE,SAAS,EAAE,gHAAgH,MAAM,CAAC,UAAU,EAAE,aAAa,IAAI,EAAE,EAAE,YAElK,EAAE,CAAC,kBAAkB,GAClB,GACF,CACP,EACD,uBAAC,iCAAa,IACZ,OAAO,EAAE,EAAE,CAAC,OAAO,EACnB,cAAc,EAAE,EAAE,CAAC,cAAc,EACjC,aAAa,EAAE,EAAE,CAAC,aAAa,EAC/B,MAAM,EAAE,MAAM,EACd,kBAAkB,EAAE,kBAAkB,GACtC,KAhBM,EAAE,CAAC,OAAO,CAAC,EAAE,CAiBjB,CACP,CAAC,GACE,CACP,EAEA,gBAAgB,IACb,CACP,CAAA;AACH,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -25,5 +25,5 @@ export { EmptyState } from "./components/empty-state.js";
|
|
|
25
25
|
export { formatTime, getDateSeparator, isDifferentDay } from "./utils/time.js";
|
|
26
26
|
export { groupMessages } from "./utils/message-grouping.js";
|
|
27
27
|
export { remarkPlugins, rehypePlugins } from "./utils/markdown-config.js";
|
|
28
|
-
export type { ChatInterfaceConfig, ChatFeatureFlags, StreamBodyOpts, MentionSuggestion, SkillSuggestion, DocumentRef, LiteMessage, SseEvent, ChatSlots, RenderableMessage, } from "./types.js";
|
|
28
|
+
export type { ChatInterfaceConfig, ChatFeatureFlags, ChatVariant, ChatClassNames, StreamBodyOpts, MentionSuggestion, SkillSuggestion, DocumentRef, LiteMessage, MessageType, SseEvent, ChatSlots, RenderableMessage, } from "./types.js";
|
|
29
29
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,YAAY,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAG1D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAGjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AACtE,YAAY,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAGxD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAGzE,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,iBAAiB,GAClB,MAAM,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,YAAY,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAG1D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAGjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AACtE,YAAY,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAGxD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAGzE,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,iBAAiB,GAClB,MAAM,YAAY,CAAA"}
|
package/dist/types.d.ts
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import type { ReactNode } from "react";
|
|
8
8
|
import type { LiteMessage } from "@portablecore/types/chat";
|
|
9
|
-
export type { ChatInterfaceConfig, ChatFeatureFlags, StreamBodyOpts, MentionSuggestion, SkillSuggestion, DocumentRef, } from "@portablecore/types/chat";
|
|
10
|
-
export type { LiteMessage, SseEvent } from "@portablecore/types/chat";
|
|
9
|
+
export type { ChatInterfaceConfig, ChatFeatureFlags, ChatVariant, ChatClassNames, StreamBodyOpts, MentionSuggestion, SkillSuggestion, DocumentRef, } from "@portablecore/types/chat";
|
|
10
|
+
export type { LiteMessage, MessageType, SseEvent } from "@portablecore/types/chat";
|
|
11
11
|
/**
|
|
12
12
|
* Slots narrowed to ReactNode for use inside React components.
|
|
13
13
|
* The types package uses `unknown` to avoid a React dependency.
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAG3D,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,WAAW,GACZ,MAAM,0BAA0B,CAAA;AAEjC,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAG3D,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,WAAW,GACZ,MAAM,0BAA0B,CAAA;AAEjC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAElF;;;GAGG;AACH,MAAM,WAAW,SAAS;IACxB,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,UAAU,CAAC,EAAE,SAAS,CAAA;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,WAAW,CAAA;IACpB,cAAc,EAAE,OAAO,CAAA;IACvB,aAAa,EAAE,OAAO,CAAA;IACtB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@portablecore/chat",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Unified chat UI for Portable platforms — composable ChatInterface with extension points",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"rehype-raw": "^7.0.0",
|
|
29
29
|
"rehype-highlight": "^7.0.2",
|
|
30
30
|
"@portablecore/chat-runtime": "0.1.0",
|
|
31
|
-
"@portablecore/types": "0.
|
|
31
|
+
"@portablecore/types": "0.11.1"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=18.0.0",
|