@portablecore/chat 0.1.5 → 0.2.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/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 +11 -11
|
@@ -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.
|
|
3
|
+
"version": "0.2.0",
|
|
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",
|
|
@@ -13,6 +13,12 @@
|
|
|
13
13
|
"files": [
|
|
14
14
|
"dist"
|
|
15
15
|
],
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "tsc",
|
|
18
|
+
"dev": "tsc --watch",
|
|
19
|
+
"clean": "rm -rf dist",
|
|
20
|
+
"typecheck": "tsc --noEmit"
|
|
21
|
+
},
|
|
16
22
|
"keywords": [
|
|
17
23
|
"portable",
|
|
18
24
|
"chat",
|
|
@@ -23,12 +29,12 @@
|
|
|
23
29
|
"author": "Portable",
|
|
24
30
|
"license": "UNLICENSED",
|
|
25
31
|
"dependencies": {
|
|
32
|
+
"@portablecore/chat-runtime": "workspace:*",
|
|
33
|
+
"@portablecore/types": "workspace:*",
|
|
26
34
|
"remark-gfm": "^4.0.1",
|
|
27
35
|
"remark-breaks": "^4.0.0",
|
|
28
36
|
"rehype-raw": "^7.0.0",
|
|
29
|
-
"rehype-highlight": "^7.0.2"
|
|
30
|
-
"@portablecore/chat-runtime": "0.1.0",
|
|
31
|
-
"@portablecore/types": "0.10.0"
|
|
37
|
+
"rehype-highlight": "^7.0.2"
|
|
32
38
|
},
|
|
33
39
|
"peerDependencies": {
|
|
34
40
|
"react": ">=18.0.0",
|
|
@@ -43,11 +49,5 @@
|
|
|
43
49
|
"react-markdown": "^10.1.0",
|
|
44
50
|
"@nvq/flowtoken": "^2.0.6",
|
|
45
51
|
"lucide-react": "^0.562.0"
|
|
46
|
-
},
|
|
47
|
-
"scripts": {
|
|
48
|
-
"build": "tsc",
|
|
49
|
-
"dev": "tsc --watch",
|
|
50
|
-
"clean": "rm -rf dist",
|
|
51
|
-
"typecheck": "tsc --noEmit"
|
|
52
52
|
}
|
|
53
|
-
}
|
|
53
|
+
}
|