wimui 0.1.0

package/dist/components/ai/AIResponseFeedback/AIResponseFeedback.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export type AIFeedbackValue = "positive" | "negative";
+export interface AIResponseFeedbackProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Currently selected feedback value (controlled) */
+    feedback?: AIFeedbackValue | null;
+    /** Default feedback value (uncontrolled) */
+    defaultFeedback?: AIFeedbackValue | null;
+    /** Called when user clicks a feedback button. Passes null when deselected. */
+    onFeedback?: (value: AIFeedbackValue | null) => void;
+    /** Whether to show the regenerate button */
+    showRegenerate?: boolean;
+    /** Called when the regenerate button is clicked */
+    onRegenerate?: () => void;
+    /** Whether all buttons are disabled */
+    disabled?: boolean;
+}
+/**
+ * AIResponseFeedback renders thumbs-up/down and optional regenerate controls
+ * for rating an AI-generated response.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const AIResponseFeedback: React.ForwardRefExoticComponent<AIResponseFeedbackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/AIResponseFeedback/AIResponseFeedback.js

@@ -0,0 +1,68 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "../../../icon/refresh.js";
+import n from "../../../icon/thumb-down.js";
+import r from "../../../icon/thumb-up.js";
+import { Icon as i } from "../../media/Icon/Icon.js";
+import a from "./airesponse-feedback.module.js";
+import o from "react";
+import s from "classnames";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/ai/AIResponseFeedback/AIResponseFeedback.tsx
+var d = o.forwardRef(({ feedback: d, defaultFeedback: f = null, onFeedback: p, showRegenerate: m = !1, onRegenerate: h, disabled: g = !1, className: _, ...v }, y) => {
+	let { t: b } = e("form"), x = d !== void 0, [S, C] = o.useState(f), w = x ? d ?? null : S, T = (e) => {
+		if (g) return;
+		let t = w === e ? null : e;
+		x || C(t), p?.(t);
+	};
+	return /* @__PURE__ */ u("div", {
+		ref: y,
+		role: "group",
+		"aria-label": b("ai_feedback.group_label"),
+		className: s("wim-ai-response-feedback", a.root, _),
+		...v,
+		children: [
+			/* @__PURE__ */ l("button", {
+				type: "button",
+				className: s(a.button, w === "positive" && a.positive),
+				onClick: () => T("positive"),
+				"aria-label": b("ai_feedback.positive_label"),
+				"aria-pressed": w === "positive",
+				disabled: g,
+				children: /* @__PURE__ */ l(i, {
+					component: r,
+					size: "sm"
+				})
+			}),
+			/* @__PURE__ */ l("button", {
+				type: "button",
+				className: s(a.button, w === "negative" && a.negativeActive),
+				onClick: () => T("negative"),
+				"aria-label": b("ai_feedback.negative_label"),
+				"aria-pressed": w === "negative",
+				disabled: g,
+				children: /* @__PURE__ */ l(i, {
+					component: n,
+					size: "sm"
+				})
+			}),
+			m && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
+				className: a.divider,
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ l("button", {
+				type: "button",
+				className: a.button,
+				onClick: h,
+				"aria-label": b("ai_feedback.regenerate_label"),
+				disabled: g,
+				children: /* @__PURE__ */ l(i, {
+					component: t,
+					size: "sm"
+				})
+			})] })
+		]
+	});
+});
+d.displayName = "AIResponseFeedback";
+//#endregion
+export { d as AIResponseFeedback };

package/dist/components/ai/AIResponseFeedback/airesponse-feedback.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1cxoi_3`,t=`_button_1cxoi_8`,n=`_positive_1cxoi_38`,r=`_negativeActive_1cxoi_48`,i=`_divider_1cxoi_58`,a={root:e,button:t,positive:n,negativeActive:r,divider:i};exports.button=t,exports.default=a,exports.divider=i,exports.negativeActive=r,exports.positive=n,exports.root=e;

package/dist/components/ai/AIResponseFeedback/airesponse-feedback.module.js

@@ -0,0 +1,11 @@
+"use client";
+//#region src/components/ai/AIResponseFeedback/airesponse-feedback.module.scss
+var e = "_root_1cxoi_3", t = "_button_1cxoi_8", n = "_positive_1cxoi_38", r = "_negativeActive_1cxoi_48", i = "_divider_1cxoi_58", a = {
+	root: e,
+	button: t,
+	positive: n,
+	negativeActive: r,
+	divider: i
+};
+//#endregion
+export { t as button, a as default, i as divider, r as negativeActive, n as positive, e as root };

package/dist/components/ai/AgentStatus/AgentStatus.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/alert-circle.cjs"),r=require("../../../icon/check-circle.cjs"),i=require("../../../icon/hourglass.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("./agent-status.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u={waiting:i.default,done:r.default,error:n.default},d=s.default.forwardRef(({status:e,message:n,size:r=`md`,showLabel:i=!0,className:s,...d},f)=>{let{t:p}=t.useWimTranslation(`form`),m=n??p(`agent_status.${e}`),h=u[e],g=r===`lg`?`sm`:`xs`;return(0,l.jsxs)(`div`,{ref:f,role:`status`,"aria-live":`polite`,"aria-label":m,className:(0,c.default)(`wim-agent-status`,o.default.root,o.default[e],o.default[r],s),...d,children:[(0,l.jsx)(`span`,{className:o.default.indicator,"aria-hidden":`true`,children:h?(0,l.jsx)(a.Icon,{component:h,size:g}):(0,l.jsx)(`span`,{className:o.default.dot})}),i&&(0,l.jsx)(`span`,{className:o.default.label,"aria-hidden":`true`,children:m})]})});d.displayName=`AgentStatus`,exports.AgentStatus=d;

package/dist/components/ai/AgentStatus/AgentStatus.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { ComponentSizeBasic } from '../../../types/tokens';
+export type AgentStatusValue = "idle" | "thinking" | "running" | "waiting" | "done" | "error";
+export interface AgentStatusProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Current state of the agent */
+    status: AgentStatusValue;
+    /** Optional description of what the agent is doing; falls back to the localized status label */
+    message?: string;
+    /** Size variant */
+    size?: ComponentSizeBasic;
+    /** Whether to show the text label next to the indicator */
+    showLabel?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * AgentStatus displays the real-time state of an AI agent as a compact
+ * animated indicator — idle, thinking, running, waiting, done, or error.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const AgentStatus: React.ForwardRefExoticComponent<AgentStatusProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/AgentStatus/AgentStatus.js

@@ -0,0 +1,41 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "../../../icon/alert-circle.js";
+import n from "../../../icon/check-circle.js";
+import r from "../../../icon/hourglass.js";
+import { Icon as i } from "../../media/Icon/Icon.js";
+import a from "./agent-status.module.js";
+import o from "react";
+import s from "classnames";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/ai/AgentStatus/AgentStatus.tsx
+var u = {
+	waiting: r,
+	done: n,
+	error: t
+}, d = o.forwardRef(({ status: t, message: n, size: r = "md", showLabel: o = !0, className: d, ...f }, p) => {
+	let { t: m } = e("form"), h = n ?? m(`agent_status.${t}`), g = u[t], _ = r === "lg" ? "sm" : "xs";
+	return /* @__PURE__ */ l("div", {
+		ref: p,
+		role: "status",
+		"aria-live": "polite",
+		"aria-label": h,
+		className: s("wim-agent-status", a.root, a[t], a[r], d),
+		...f,
+		children: [/* @__PURE__ */ c("span", {
+			className: a.indicator,
+			"aria-hidden": "true",
+			children: g ? /* @__PURE__ */ c(i, {
+				component: g,
+				size: _
+			}) : /* @__PURE__ */ c("span", { className: a.dot })
+		}), o && /* @__PURE__ */ c("span", {
+			className: a.label,
+			"aria-hidden": "true",
+			children: h
+		})]
+	});
+});
+d.displayName = "AgentStatus";
+//#endregion
+export { d as AgentStatus };

package/dist/components/ai/AgentStatus/agent-status.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1sh9o_3`,t=`_sm_1sh9o_14`,n=`_lg_1sh9o_18`,r=`_indicator_1sh9o_23`,i=`_dot_1sh9o_32`,a=`_label_1sh9o_47`,o=`_idle_1sh9o_51`,s=`_thinking_1sh9o_54`,c=`_running_1sh9o_60`,l=`_waiting_1sh9o_69`,u=`_done_1sh9o_72`,d=`_error_1sh9o_75`,f={root:e,sm:t,lg:n,indicator:r,dot:i,label:a,idle:o,thinking:s,"agent-pulse":`_agent-pulse_1sh9o_1`,running:c,"agent-spin":`_agent-spin_1sh9o_1`,waiting:l,done:u,error:d};exports.default=f,exports.done=u,exports.dot=i,exports.error=d,exports.idle=o,exports.indicator=r,exports.label=a,exports.lg=n,exports.root=e,exports.running=c,exports.sm=t,exports.thinking=s,exports.waiting=l;

package/dist/components/ai/AgentStatus/agent-status.module.js

@@ -0,0 +1,20 @@
+"use client";
+//#region src/components/ai/AgentStatus/agent-status.module.scss
+var e = "_root_1sh9o_3", t = "_sm_1sh9o_14", n = "_lg_1sh9o_18", r = "_indicator_1sh9o_23", i = "_dot_1sh9o_32", a = "_label_1sh9o_47", o = "_idle_1sh9o_51", s = "_thinking_1sh9o_54", c = "_running_1sh9o_60", l = "_waiting_1sh9o_69", u = "_done_1sh9o_72", d = "_error_1sh9o_75", f = {
+	root: e,
+	sm: t,
+	lg: n,
+	indicator: r,
+	dot: i,
+	label: a,
+	idle: o,
+	thinking: s,
+	"agent-pulse": "_agent-pulse_1sh9o_1",
+	running: c,
+	"agent-spin": "_agent-spin_1sh9o_1",
+	waiting: l,
+	done: u,
+	error: d
+};
+//#endregion
+export { f as default, u as done, i as dot, d as error, o as idle, r as indicator, a as label, n as lg, e as root, c as running, t as sm, s as thinking, l as waiting };

package/dist/components/ai/ArtifactsOverlay/ArtifactsOverlay.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface ArtifactsOverlayProps {
+    /** Whether the overlay is open */
+    open: boolean;
+    /** Callback when open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Title of the artifact */
+    title: string;
+    /** Subtitle or version info */
+    subtitle?: string;
+    /** Main content */
+    children: React.ReactNode;
+    /** Whether to show a full-screen toggle (default: false) */
+    showFullscreenToggle?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * ArtifactsOverlay is a specialized side-panel for displaying large AI-generated content.
+ * It provides a clean, focused environment for reading code, documents, or data visualizations
+ * without losing the context of the main conversation.
+ */
+export declare const ArtifactsOverlay: React.FC<ArtifactsOverlayProps>;

package/dist/components/ai/ChatUI/ChatUI.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../icon/paperclip.cjs"),n=require("../../../icon/send.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../hooks/useAutoResize.cjs"),a=require("./chat-ui.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=({children:e,className:t,...n})=>(0,c.jsx)(`div`,{className:(0,s.default)(`wim-chat-ui`,a.default.container,t),...n,children:e}),u=(0,o.forwardRef)(({children:e,className:t,...n},r)=>(0,c.jsx)(`div`,{ref:r,className:(0,s.default)(a.default.messageList,t),...n,children:e}));u.displayName=`ChatMessageList`;var d=({children:e,position:t=`left`,variant:n=`default`,showAvatar:r=!0,avatar:i,timestamp:o,senderName:l,isTyping:u=!1,actions:d,className:f,...p})=>(0,c.jsxs)(`div`,{className:(0,s.default)(a.default.message,a.default[t],a.default[n],{[a.default.hasAvatar]:r},f),...p,children:[r&&t===`left`&&(0,c.jsx)(`div`,{className:a.default.messageAvatar,children:i}),(0,c.jsxs)(`div`,{className:a.default.contentWrapper,children:[l&&(0,c.jsx)(`div`,{className:a.default.sender,children:l}),(0,c.jsx)(`div`,{className:(0,s.default)(a.default.bubble,{[a.default.typing]:u}),children:u?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{className:a.default.typingDot}),(0,c.jsx)(`span`,{className:a.default.typingDot}),(0,c.jsx)(`span`,{className:a.default.typingDot})]}):e}),d&&(0,c.jsx)(`div`,{className:a.default.actions,children:d}),o&&(0,c.jsx)(`div`,{className:a.default.timestamp,children:o})]}),r&&t===`right`&&(0,c.jsx)(`div`,{className:a.default.messageAvatar,children:i})]}),f=({children:e,className:t,...n})=>(0,c.jsx)(`div`,{className:(0,s.default)(a.default.inputArea,t),...n,children:e}),p=(0,o.forwardRef)(({onSend:e,onAttach:s,sendButtonLabel:l,sendButtonIcon:u=n.default,showSendButton:d=!0,showAttach:p=!1,maxRows:m=8,className:h,...g},_)=>{let[v,y]=o.default.useState(``),b=g.value!==void 0,x=b?g.value:v,S=i.useAutoResize(x,m);o.default.useImperativeHandle(_,()=>S.current);let C=!!l,w=()=>{e&&(e(x),b||y(``))};return(0,c.jsx)(f,{className:h,children:(0,c.jsxs)(`div`,{className:a.default.fieldContainer,children:[p&&(0,c.jsx)(`button`,{type:`button`,className:a.default.attachButton,onClick:s,"aria-label":`Attach file`,children:(0,c.jsx)(r.Icon,{component:t.default,size:`sm`})}),(0,c.jsx)(`textarea`,{ref:S,className:a.default.field,value:x,onChange:e=>{b||y(e.target.value),g.onChange?.(e)},onKeyDown:e=>{e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),w())},placeholder:g.placeholder||`Type a message...`,rows:1,...g}),d&&(0,c.jsx)(`button`,{className:a.default.sendButton,onClick:w,disabled:!x.trim(),type:`button`,"aria-label":l||`Send`,children:C?l:(0,c.jsx)(r.Icon,{component:u,size:`sm`})})]})})});p.displayName=`ChatInput`;var m=({src:e,alt:t,fallback:n,size:r=`md`,color:i=`s18`,className:l,...u})=>{let[d,f]=o.default.useState(!1),p=t||`User Avatar`;return(0,c.jsx)(`div`,{className:(0,s.default)(a.default.avatar,a.default[r],a.default[i],l),...u,children:e&&!d?(0,c.jsx)(`img`,{src:e,alt:p,className:a.default.image,onError:()=>f(!0)}):(0,c.jsx)(`div`,{className:a.default.fallback,children:n||p.charAt(0).toUpperCase()})})};exports.ChatAvatar=m,exports.ChatContainer=l,exports.ChatInput=p,exports.ChatInputArea=f,exports.ChatMessage=d,exports.ChatMessageList=u;

package/dist/components/ai/ChatUI/ChatUI.d.ts

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+import { ComponentSizeBasic } from '../../../types/tokens';
+export interface ChatContainerProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Chat content (message list, input, etc.) */
+    children: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+export declare const ChatContainer: ({ children, className, ...props }: ChatContainerProps) => React.ReactElement;
+export interface ChatMessageListProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Chat messages */
+    children: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+export declare const ChatMessageList: React.ForwardRefExoticComponent<ChatMessageListProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatMessageProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Message content */
+    children?: React.ReactNode;
+    /** Side the message is aligned to (typically left for others, right for self) */
+    position?: "left" | "right";
+    /** Visual style variant of the message bubble */
+    variant?: "default" | "primary" | "secondary";
+    /** Whether to show the avatar */
+    showAvatar?: boolean;
+    /** Avatar element */
+    avatar?: React.ReactNode;
+    /** Timestamp text shown below the message */
+    timestamp?: string;
+    /** Sender name shown above the message */
+    senderName?: string;
+    /** Whether to show the typing indicator instead of content */
+    isTyping?: boolean;
+    /** Action elements shown below the message */
+    actions?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+export declare const ChatMessage: ({ children, position, variant, showAvatar, avatar, timestamp, senderName, isTyping, actions, className, ...props }: ChatMessageProps) => React.ReactElement;
+export interface ChatInputAreaProps extends React.ComponentPropsWithoutRef<"div"> {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * ChatInputArea provides a consistent footer container for chat inputs,
+ * including a top border and background color.
+ */
+export declare const ChatInputArea: ({ children, className, ...props }: ChatInputAreaProps) => React.ReactElement;
+export interface ChatInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onSend"> {
+    /** Callback when a message is sent */
+    onSend?: (message: string) => void;
+    /** Callback when the attach button is clicked */
+    onAttach?: () => void;
+    /** Label of the send button (shown instead of the icon when provided) */
+    sendButtonLabel?: string;
+    /** Icon component for the send button */
+    sendButtonIcon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    /** Whether to show the send button */
+    showSendButton?: boolean;
+    /** Whether to show the attach button */
+    showAttach?: boolean;
+    /** Maximum number of rows the input grows to before scrolling */
+    maxRows?: number;
+    /** Additional class names */
+    className?: string;
+}
+export declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+export interface ChatAvatarProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Image source URL */
+    src?: string;
+    /** Alternative text for the image */
+    alt?: string;
+    /** Fallback text (e.g. initials) shown when no image is available */
+    fallback?: string;
+    /** Size of the avatar */
+    size?: ComponentSizeBasic;
+    /** Background color token used for the fallback */
+    color?: "s1" | "s3" | "s5" | "s7" | "s10" | "s12" | "s14" | "s16" | "s18" | "s20" | "s22" | "s24";
+    /** Additional class names */
+    className?: string;
+}
+export declare const ChatAvatar: ({ src, alt: altProp, fallback, size, color, className, ...props }: ChatAvatarProps) => React.ReactElement;

package/dist/components/ai/ChatUI/ChatUI.js

@@ -0,0 +1,132 @@
+"use client";
+import e from "../../../icon/paperclip.js";
+import t from "../../../icon/send.js";
+import { Icon as n } from "../../media/Icon/Icon.js";
+import { useAutoResize as r } from "../../../hooks/useAutoResize.js";
+import i from "./chat-ui.module.js";
+import a, { forwardRef as o } from "react";
+import s from "classnames";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/ai/ChatUI/ChatUI.tsx
+var d = ({ children: e, className: t, ...n }) => /* @__PURE__ */ l("div", {
+	className: s("wim-chat-ui", i.container, t),
+	...n,
+	children: e
+}), f = o(({ children: e, className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+	ref: r,
+	className: s(i.messageList, t),
+	...n,
+	children: e
+}));
+f.displayName = "ChatMessageList";
+var p = ({ children: e, position: t = "left", variant: n = "default", showAvatar: r = !0, avatar: a, timestamp: o, senderName: d, isTyping: f = !1, actions: p, className: m, ...h }) => /* @__PURE__ */ u("div", {
+	className: s(i.message, i[t], i[n], { [i.hasAvatar]: r }, m),
+	...h,
+	children: [
+		r && t === "left" && /* @__PURE__ */ l("div", {
+			className: i.messageAvatar,
+			children: a
+		}),
+		/* @__PURE__ */ u("div", {
+			className: i.contentWrapper,
+			children: [
+				d && /* @__PURE__ */ l("div", {
+					className: i.sender,
+					children: d
+				}),
+				/* @__PURE__ */ l("div", {
+					className: s(i.bubble, { [i.typing]: f }),
+					children: f ? /* @__PURE__ */ u(c, { children: [
+						/* @__PURE__ */ l("span", { className: i.typingDot }),
+						/* @__PURE__ */ l("span", { className: i.typingDot }),
+						/* @__PURE__ */ l("span", { className: i.typingDot })
+					] }) : e
+				}),
+				p && /* @__PURE__ */ l("div", {
+					className: i.actions,
+					children: p
+				}),
+				o && /* @__PURE__ */ l("div", {
+					className: i.timestamp,
+					children: o
+				})
+			]
+		}),
+		r && t === "right" && /* @__PURE__ */ l("div", {
+			className: i.messageAvatar,
+			children: a
+		})
+	]
+}), m = ({ children: e, className: t, ...n }) => /* @__PURE__ */ l("div", {
+	className: s(i.inputArea, t),
+	...n,
+	children: e
+}), h = o(({ onSend: o, onAttach: s, sendButtonLabel: c, sendButtonIcon: d = t, showSendButton: f = !0, showAttach: p = !1, maxRows: h = 8, className: g, ..._ }, v) => {
+	let [y, b] = a.useState(""), x = _.value !== void 0, S = x ? _.value : y, C = r(S, h);
+	a.useImperativeHandle(v, () => C.current);
+	let w = !!c, T = () => {
+		o && (o(S), x || b(""));
+	};
+	return /* @__PURE__ */ l(m, {
+		className: g,
+		children: /* @__PURE__ */ u("div", {
+			className: i.fieldContainer,
+			children: [
+				p && /* @__PURE__ */ l("button", {
+					type: "button",
+					className: i.attachButton,
+					onClick: s,
+					"aria-label": "Attach file",
+					children: /* @__PURE__ */ l(n, {
+						component: e,
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ l("textarea", {
+					ref: C,
+					className: i.field,
+					value: S,
+					onChange: (e) => {
+						x || b(e.target.value), _.onChange?.(e);
+					},
+					onKeyDown: (e) => {
+						e.key === "Enter" && !e.shiftKey && (e.preventDefault(), T());
+					},
+					placeholder: _.placeholder || "Type a message...",
+					rows: 1,
+					..._
+				}),
+				f && /* @__PURE__ */ l("button", {
+					className: i.sendButton,
+					onClick: T,
+					disabled: !S.trim(),
+					type: "button",
+					"aria-label": c || "Send",
+					children: w ? c : /* @__PURE__ */ l(n, {
+						component: d,
+						size: "sm"
+					})
+				})
+			]
+		})
+	});
+});
+h.displayName = "ChatInput";
+var g = ({ src: e, alt: t, fallback: n, size: r = "md", color: o = "s18", className: c, ...u }) => {
+	let [d, f] = a.useState(!1), p = t || "User Avatar";
+	return /* @__PURE__ */ l("div", {
+		className: s(i.avatar, i[r], i[o], c),
+		...u,
+		children: e && !d ? /* @__PURE__ */ l("img", {
+			src: e,
+			alt: p,
+			className: i.image,
+			onError: () => f(!0)
+		}) : /* @__PURE__ */ l("div", {
+			className: i.fallback,
+			children: n || p.charAt(0).toUpperCase()
+		})
+	});
+};
+//#endregion
+export { g as ChatAvatar, d as ChatContainer, h as ChatInput, m as ChatInputArea, p as ChatMessage, f as ChatMessageList };

package/dist/components/ai/ChatUI/chat-ui.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_container_122gi_3`,t=`_messageList_122gi_13`,n=`_message_122gi_13`,r=`_left_122gi_30`,i=`_right_122gi_35`,a=`_contentWrapper_122gi_40`,o=`_primary_122gi_43`,s=`_secondary_122gi_46`,c=`_messageAvatar_122gi_49`,l=`_sender_122gi_58`,u=`_bubble_122gi_63`,d=`_typing_122gi_74`,f=`_typingDot_122gi_81`,p=`_actions_122gi_105`,m=`_visible_122gi_115`,h=`_hasAvatar_122gi_118`,g=`_timestamp_122gi_146`,_=`_inputArea_122gi_150`,v=`_fieldContainer_122gi_163`,y=`_field_122gi_163`,b=`_sendButton_122gi_198`,x=`_attachButton_122gi_225`,S=`_avatar_122gi_247`,C=`_sm_122gi_257`,w=`_md_122gi_262`,T=`_lg_122gi_267`,E=`_s1_122gi_275`,D=`_s3_122gi_278`,O=`_s5_122gi_281`,k=`_s7_122gi_284`,A=`_s10_122gi_287`,j=`_s12_122gi_290`,M=`_s14_122gi_293`,N=`_s16_122gi_296`,P=`_s18_122gi_299`,F=`_s20_122gi_302`,I=`_s22_122gi_305`,L=`_s24_122gi_308`,R=`_image_122gi_311`,z=`_fallback_122gi_316`,B={container:e,messageList:t,message:n,left:r,right:i,contentWrapper:a,primary:o,secondary:s,messageAvatar:c,sender:l,bubble:u,typing:d,typingDot:f,"chat-typing":`_chat-typing_122gi_1`,actions:p,visible:m,hasAvatar:h,timestamp:g,inputArea:_,fieldContainer:v,field:y,sendButton:b,attachButton:x,avatar:S,sm:C,md:w,lg:T,s1:E,s3:D,s5:O,s7:k,s10:A,s12:j,s14:M,s16:N,s18:P,s20:F,s22:I,s24:L,image:R,fallback:z};exports.actions=p,exports.attachButton=x,exports.avatar=S,exports.bubble=u,exports.container=e,exports.contentWrapper=a,exports.default=B,exports.fallback=z,exports.field=y,exports.fieldContainer=v,exports.hasAvatar=h,exports.image=R,exports.inputArea=_,exports.left=r,exports.lg=T,exports.md=w,exports.message=n,exports.messageAvatar=c,exports.messageList=t,exports.primary=o,exports.right=i,exports.s1=E,exports.s10=A,exports.s12=j,exports.s14=M,exports.s16=N,exports.s18=P,exports.s20=F,exports.s22=I,exports.s24=L,exports.s3=D,exports.s5=O,exports.s7=k,exports.secondary=s,exports.sendButton=b,exports.sender=l,exports.sm=C,exports.timestamp=g,exports.typing=d,exports.typingDot=f,exports.visible=m;

package/dist/components/ai/ChatUI/chat-ui.module.js

@@ -0,0 +1,47 @@
+"use client";
+//#region src/components/ai/ChatUI/chat-ui.module.scss
+var e = "_container_122gi_3", t = "_messageList_122gi_13", n = "_message_122gi_13", r = "_left_122gi_30", i = "_right_122gi_35", a = "_contentWrapper_122gi_40", o = "_primary_122gi_43", s = "_secondary_122gi_46", c = "_messageAvatar_122gi_49", l = "_sender_122gi_58", u = "_bubble_122gi_63", d = "_typing_122gi_74", f = "_typingDot_122gi_81", p = "_actions_122gi_105", m = "_visible_122gi_115", h = "_hasAvatar_122gi_118", g = "_timestamp_122gi_146", _ = "_inputArea_122gi_150", v = "_fieldContainer_122gi_163", y = "_field_122gi_163", b = "_sendButton_122gi_198", x = "_attachButton_122gi_225", S = "_avatar_122gi_247", C = "_sm_122gi_257", w = "_md_122gi_262", T = "_lg_122gi_267", E = "_s1_122gi_275", D = "_s3_122gi_278", O = "_s5_122gi_281", k = "_s7_122gi_284", A = "_s10_122gi_287", j = "_s12_122gi_290", M = "_s14_122gi_293", N = "_s16_122gi_296", P = "_s18_122gi_299", F = "_s20_122gi_302", I = "_s22_122gi_305", L = "_s24_122gi_308", R = "_image_122gi_311", z = "_fallback_122gi_316", B = {
+	container: e,
+	messageList: t,
+	message: n,
+	left: r,
+	right: i,
+	contentWrapper: a,
+	primary: o,
+	secondary: s,
+	messageAvatar: c,
+	sender: l,
+	bubble: u,
+	typing: d,
+	typingDot: f,
+	"chat-typing": "_chat-typing_122gi_1",
+	actions: p,
+	visible: m,
+	hasAvatar: h,
+	timestamp: g,
+	inputArea: _,
+	fieldContainer: v,
+	field: y,
+	sendButton: b,
+	attachButton: x,
+	avatar: S,
+	sm: C,
+	md: w,
+	lg: T,
+	s1: E,
+	s3: D,
+	s5: O,
+	s7: k,
+	s10: A,
+	s12: j,
+	s14: M,
+	s16: N,
+	s18: P,
+	s20: F,
+	s22: I,
+	s24: L,
+	image: R,
+	fallback: z
+};
+//#endregion
+export { p as actions, x as attachButton, S as avatar, u as bubble, e as container, a as contentWrapper, B as default, z as fallback, y as field, v as fieldContainer, h as hasAvatar, R as image, _ as inputArea, r as left, T as lg, w as md, n as message, c as messageAvatar, t as messageList, o as primary, i as right, E as s1, A as s10, j as s12, M as s14, N as s16, P as s18, F as s20, I as s22, L as s24, D as s3, O as s5, k as s7, s as secondary, b as sendButton, l as sender, C as sm, g as timestamp, d as typing, f as typingDot, m as visible };

package/dist/components/ai/CodeBlock/CodeBlock.cjs

@@ -0,0 +1,4 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/check.cjs"),r=require("../../../icon/chevron-down.cjs"),i=require("../../../icon/copy.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("./code-block.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=s.default.forwardRef(({code:e,language:u,filename:d,showCopy:f=!0,showLineNumbers:p=!1,maxLines:m,className:h,...g},_)=>{let{t:v}=t.useWimTranslation(`form`),[y,b]=s.default.useState(!1),[x,S]=s.default.useState(!1),C=(0,s.useId)(),w=e.split(`
+`).length,T=m!=null&&w>m,E=(0,s.useCallback)(async()=>{try{await navigator.clipboard.writeText(e),b(!0),setTimeout(()=>b(!1),2e3)}catch{}},[e]),D=d??u;return(0,l.jsxs)(`div`,{ref:_,className:(0,c.default)(`wim-code-block`,o.default.root,h),...g,children:[(D||f)&&(0,l.jsxs)(`div`,{className:o.default.header,children:[D&&(0,l.jsx)(`span`,{className:o.default.lang,children:D}),(0,l.jsxs)(`div`,{className:o.default.headerActions,children:[T&&(0,l.jsx)(`button`,{type:`button`,className:o.default.iconButton,onClick:()=>S(e=>!e),"aria-expanded":x,"aria-controls":C,"aria-label":v(x?`code_block.collapse_label`:`code_block.expand_label`),children:(0,l.jsx)(a.Icon,{component:r.default,size:`sm`,className:(0,c.default)(o.default.chevron,x&&o.default.chevronUp)})}),f&&(0,l.jsx)(`button`,{type:`button`,className:(0,c.default)(o.default.iconButton,y&&o.default.copied),onClick:E,"aria-label":v(y?`code_block.copied_label`:`code_block.copy_label`),children:(0,l.jsx)(a.Icon,{component:y?n.default:i.default,size:`sm`})})]})]}),(0,l.jsx)(`div`,{id:C,className:(0,c.default)(o.default.body,T&&!x&&o.default.collapsed),tabIndex:0,style:T&&!x?{"--_max-lines":m}:void 0,children:(0,l.jsx)(`pre`,{className:o.default.pre,children:p?(0,l.jsx)(`code`,{className:o.default.code,children:e.split(`
+`).map((e,t)=>(0,l.jsxs)(`span`,{className:o.default.line,children:[(0,l.jsx)(`span`,{className:o.default.lineNumber,"aria-hidden":`true`,children:t+1}),(0,l.jsx)(`span`,{className:o.default.lineContent,children:e})]},t))}):(0,l.jsx)(`code`,{className:o.default.code,children:e})})})]})});u.displayName=`CodeBlock`,exports.CodeBlock=u;

package/dist/components/ai/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export interface CodeBlockProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** The code string to display */
+    code: string;
+    /** Programming language label shown in the header (e.g. "tsx", "bash") */
+    language?: string;
+    /** Optional filename shown in the header instead of the language label */
+    filename?: string;
+    /** Whether to show the copy-to-clipboard button (default: true) */
+    showCopy?: boolean;
+    /** Whether to show line numbers (default: false) */
+    showLineNumbers?: boolean;
+    /**
+     * Maximum visible height before the block becomes scrollable.
+     * Pass a CSS value (e.g. "300px") or a number of lines (e.g. 20).
+     * When set, an expand/collapse toggle is shown.
+     */
+    maxLines?: number;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * CodeBlock renders a styled code snippet with a language/filename header,
+ * optional copy button, line numbers, and overflow collapse.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/CodeBlock/CodeBlock.js

@@ -0,0 +1,82 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "../../../icon/check.js";
+import n from "../../../icon/chevron-down.js";
+import r from "../../../icon/copy.js";
+import { Icon as i } from "../../media/Icon/Icon.js";
+import a from "./code-block.module.js";
+import o, { useCallback as s, useId as c } from "react";
+import l from "classnames";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/ai/CodeBlock/CodeBlock.tsx
+var f = o.forwardRef(({ code: f, language: p, filename: m, showCopy: h = !0, showLineNumbers: g = !1, maxLines: _, className: v, ...y }, b) => {
+	let { t: x } = e("form"), [S, C] = o.useState(!1), [w, T] = o.useState(!1), E = c(), D = f.split("\n").length, O = _ != null && D > _, k = s(async () => {
+		try {
+			await navigator.clipboard.writeText(f), C(!0), setTimeout(() => C(!1), 2e3);
+		} catch {}
+	}, [f]), A = m ?? p;
+	return /* @__PURE__ */ d("div", {
+		ref: b,
+		className: l("wim-code-block", a.root, v),
+		...y,
+		children: [(A || h) && /* @__PURE__ */ d("div", {
+			className: a.header,
+			children: [A && /* @__PURE__ */ u("span", {
+				className: a.lang,
+				children: A
+			}), /* @__PURE__ */ d("div", {
+				className: a.headerActions,
+				children: [O && /* @__PURE__ */ u("button", {
+					type: "button",
+					className: a.iconButton,
+					onClick: () => T((e) => !e),
+					"aria-expanded": w,
+					"aria-controls": E,
+					"aria-label": x(w ? "code_block.collapse_label" : "code_block.expand_label"),
+					children: /* @__PURE__ */ u(i, {
+						component: n,
+						size: "sm",
+						className: l(a.chevron, w && a.chevronUp)
+					})
+				}), h && /* @__PURE__ */ u("button", {
+					type: "button",
+					className: l(a.iconButton, S && a.copied),
+					onClick: k,
+					"aria-label": x(S ? "code_block.copied_label" : "code_block.copy_label"),
+					children: /* @__PURE__ */ u(i, {
+						component: S ? t : r,
+						size: "sm"
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ u("div", {
+			id: E,
+			className: l(a.body, O && !w && a.collapsed),
+			tabIndex: 0,
+			style: O && !w ? { "--_max-lines": _ } : void 0,
+			children: /* @__PURE__ */ u("pre", {
+				className: a.pre,
+				children: g ? /* @__PURE__ */ u("code", {
+					className: a.code,
+					children: f.split("\n").map((e, t) => /* @__PURE__ */ d("span", {
+						className: a.line,
+						children: [/* @__PURE__ */ u("span", {
+							className: a.lineNumber,
+							"aria-hidden": "true",
+							children: t + 1
+						}), /* @__PURE__ */ u("span", {
+							className: a.lineContent,
+							children: e
+						})]
+					}, t))
+				}) : /* @__PURE__ */ u("code", {
+					className: a.code,
+					children: f
+				})
+			})
+		})]
+	});
+});
+f.displayName = "CodeBlock";
+//#endregion
+export { f as CodeBlock };

package/dist/components/ai/CodeBlock/code-block.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1rkn7_3`,t=`_header_1rkn7_11`,n=`_lang_1rkn7_19`,r=`_headerActions_1rkn7_27`,i=`_iconButton_1rkn7_32`,a=`_copied_1rkn7_53`,o=`_chevron_1rkn7_59`,s=`_chevronUp_1rkn7_62`,c=`_body_1rkn7_65`,l=`_collapsed_1rkn7_68`,u=`_pre_1rkn7_72`,d=`_code_1rkn7_84`,f=`_line_1rkn7_87`,p=`_lineNumber_1rkn7_90`,m=`_lineContent_1rkn7_99`,h={root:e,header:t,lang:n,headerActions:r,iconButton:i,copied:a,chevron:o,chevronUp:s,body:c,collapsed:l,pre:u,code:d,line:f,lineNumber:p,lineContent:m};exports.body=c,exports.chevron=o,exports.chevronUp=s,exports.code=d,exports.collapsed=l,exports.copied=a,exports.default=h,exports.header=t,exports.headerActions=r,exports.iconButton=i,exports.lang=n,exports.line=f,exports.lineContent=m,exports.lineNumber=p,exports.pre=u,exports.root=e;