@lssm/module.ai-chat 0.0.0-canary-20251217060834 → 0.0.0-canary-20251217073102

package/dist/libs/design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js

@@ -0,0 +1,13 @@
+import { __esmMin } from "../../../../_virtual/rolldown_runtime.js";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region ../../libs/design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+var init_utils = __esmMin((() => {}));
+init_utils();
+
+//#endregion
+export { cn, init_utils };

package/dist/libs/ui-kit-web/dist/ui/avatar.js

@@ -0,0 +1,25 @@
+'use client';
+
+import { cn } from "./utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+//#region ../../libs/ui-kit-web/dist/ui/avatar.js
+function Avatar({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+		"data-slot": "avatar",
+		className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("bg-muted flex size-full items-center justify-center rounded-full", className),
+		...props
+	});
+}
+
+//#endregion
+export { Avatar, AvatarFallback };

package/dist/libs/ui-kit-web/dist/ui/badge.js

@@ -0,0 +1,26 @@
+import { cn } from "../ui-kit-core/dist/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region ../../libs/ui-kit-web/dist/ui/badge.js
+const badgeVariants = cva("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+	variants: { variant: {
+		default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+		secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+		destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+		outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		"data-slot": "badge",
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+
+//#endregion
+export { Badge };

package/dist/libs/ui-kit-web/dist/ui/scroll-area.js

@@ -0,0 +1,39 @@
+'use client';
+
+import { cn } from "../ui-kit-core/dist/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+//#region ../../libs/ui-kit-web/dist/ui/scroll-area.js
+function ScrollArea({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+		"data-slot": "scroll-area",
+		className: cn("relative", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				className: "focus-visible:ring-ring/50 size-full rounded-[inherit] outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+				children
+			}),
+			/* @__PURE__ */ jsx(ScrollBar, {}),
+			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, {
+			"data-slot": "scroll-area-thumb",
+			className: "bg-border relative flex-1 rounded-full"
+		})
+	});
+}
+
+//#endregion
+export { ScrollArea };

package/dist/libs/ui-kit-web/dist/ui/select.js

@@ -0,0 +1,79 @@
+'use client';
+
+import { cn } from "../ui-kit-core/dist/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+//#region ../../libs/ui-kit-web/dist/ui/select.js
+function Select({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Root, {
+		"data-slot": "select",
+		...props
+	});
+}
+function SelectValue({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Value, {
+		"data-slot": "select-value",
+		...props
+	});
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input focus-visible:border-ring focus-visible:ring-ring/50 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
+		})]
+	});
+}
+function SelectContent({ className, children, position = "popper", ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+		"data-slot": "select-content",
+		className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+		position,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+			/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+				className: cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"),
+				children
+			}),
+			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+		]
+	}) });
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+		"data-slot": "select-item",
+		className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute right-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+		}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+	});
+}
+
+//#endregion
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };

package/dist/libs/ui-kit-web/dist/ui/skeleton.js

@@ -0,0 +1,14 @@
+import { cn } from "./utils.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../../libs/ui-kit-web/dist/ui/skeleton.js
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("bg-accent animate-pulse rounded-md", className),
+		...props
+	});
+}
+
+//#endregion
+export { Skeleton };

package/dist/libs/ui-kit-web/dist/ui/tooltip.js

@@ -0,0 +1,39 @@
+'use client';
+
+import { cn } from "../ui-kit-core/dist/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+//#region ../../libs/ui-kit-web/dist/ui/tooltip.js
+function TooltipProvider({ delayDuration = 0, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+		"data-slot": "tooltip-provider",
+		delayDuration,
+		...props
+	});
+}
+function Tooltip({ ...props }) {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
+		"data-slot": "tooltip",
+		...props
+	}) });
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
+		"data-slot": "tooltip-content",
+		sideOffset,
+		className: cn("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" })]
+	}) });
+}
+
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/libs/ui-kit-web/dist/ui/utils.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region ../../libs/ui-kit-web/dist/ui/utils.js
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };

package/dist/libs/ui-kit-web/dist/ui-kit-core/dist/utils.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region ../../libs/ui-kit-web/dist/ui-kit-core/dist/utils.js
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };

package/dist/presentation/components/ChatContainer.js

@@ -1 +1,62 @@
-"use client";import*as e from"react";import{ScrollArea as t}from"@lssm/lib.ui-kit-web/ui/scroll-area";import{cn as n}from"@lssm/lib.ui-kit-web/ui/utils";import{jsx as r,jsxs as i}from"react/jsx-runtime";function a({children:a,className:o,showScrollButton:s=!0}){let c=e.useRef(null),[l,u]=e.useState(!1);e.useEffect(()=>{let e=c.current;e&&e.scrollHeight-e.scrollTop<=e.clientHeight+100&&(e.scrollTop=e.scrollHeight)},[a]);let d=e.useCallback(e=>{let t=e.currentTarget;u(!(t.scrollHeight-t.scrollTop<=t.clientHeight+100))},[]),f=e.useCallback(()=>{let e=c.current;e&&e.scrollTo({top:e.scrollHeight,behavior:`smooth`})},[]);return i(`div`,{className:n(`relative flex flex-1 flex-col`,o),children:[r(t,{ref:c,className:`flex-1`,onScroll:d,children:r(`div`,{className:`flex flex-col gap-4 p-4`,children:a})}),s&&l&&i(`button`,{onClick:f,className:n(`absolute bottom-4 left-1/2 -translate-x-1/2`,`bg-primary text-primary-foreground`,`rounded-full px-3 py-1.5 text-sm font-medium shadow-lg`,`hover:bg-primary/90 transition-colors`,`flex items-center gap-1.5`),"aria-label":`Scroll to bottom`,children:[r(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:r(`path`,{d:`m6 9 6 6 6-6`})}),`New messages`]})]})}export{a as ChatContainer};
+'use client';
+
+import { ScrollArea } from "../../libs/ui-kit-web/dist/ui/scroll-area.js";
+import { cn } from "../../libs/ui-kit-web/dist/ui/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/presentation/components/ChatContainer.tsx
+/**
+* Container component for chat messages with scrolling
+*/
+function ChatContainer({ children, className, showScrollButton = true }) {
+	const scrollRef = React.useRef(null);
+	const [showScrollDown, setShowScrollDown] = React.useState(false);
+	React.useEffect(() => {
+		const container = scrollRef.current;
+		if (!container) return;
+		if (container.scrollHeight - container.scrollTop <= container.clientHeight + 100) container.scrollTop = container.scrollHeight;
+	}, [children]);
+	const handleScroll = React.useCallback((event) => {
+		const container = event.currentTarget;
+		setShowScrollDown(!(container.scrollHeight - container.scrollTop <= container.clientHeight + 100));
+	}, []);
+	const scrollToBottom = React.useCallback(() => {
+		const container = scrollRef.current;
+		if (container) container.scrollTo({
+			top: container.scrollHeight,
+			behavior: "smooth"
+		});
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-1 flex-col", className),
+		children: [/* @__PURE__ */ jsx(ScrollArea, {
+			ref: scrollRef,
+			className: "flex-1",
+			onScroll: handleScroll,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-4 p-4",
+				children
+			})
+		}), showScrollButton && showScrollDown && /* @__PURE__ */ jsxs("button", {
+			onClick: scrollToBottom,
+			className: cn("absolute bottom-4 left-1/2 -translate-x-1/2", "bg-primary text-primary-foreground", "rounded-full px-3 py-1.5 text-sm font-medium shadow-lg", "hover:bg-primary/90 transition-colors", "flex items-center gap-1.5"),
+			"aria-label": "Scroll to bottom",
+			children: [/* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "16",
+				height: "16",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+			}), "New messages"]
+		})]
+	});
+}
+
+//#endregion
+export { ChatContainer };

package/dist/presentation/components/ChatInput.d.ts

@@ -1,5 +1,5 @@
 import { ChatAttachment } from "../../core/message-types.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/presentation/components/ChatInput.d.ts
 interface ChatInputProps {
@@ -29,6 +29,6 @@ declare function ChatInput({
   className,
   showAttachments,
   maxAttachments
-}: ChatInputProps): react_jsx_runtime2.JSX.Element;
+}: ChatInputProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { ChatInput };

package/dist/presentation/components/ChatInput.js

@@ -1 +1,149 @@
-"use client";import*as e from"react";import{cn as t}from"@lssm/lib.ui-kit-web/ui/utils";import{Fragment as n,jsx as r,jsxs as i}from"react/jsx-runtime";import{Code as a,FileText as o,Loader2 as s,Paperclip as c,Send as l,X as u}from"lucide-react";import{Button as d,Textarea as f}from"@lssm/lib.design-system";function p({onSend:p,disabled:m=!1,isLoading:h=!1,placeholder:g=`Type a message...`,className:_,showAttachments:v=!0,maxAttachments:y=5}){let[b,x]=e.useState(``),[S,C]=e.useState([]),w=e.useRef(null),T=e.useRef(null),E=b.trim().length>0||S.length>0,D=e.useCallback(e=>{e?.preventDefault(),!(!E||m||h)&&(p(b.trim(),S.length>0?S:void 0),x(``),C([]),w.current?.focus())},[E,b,S,m,h,p]),O=e.useCallback(e=>{e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),D())},[D]),k=e.useCallback(async e=>{let t=e.target.files;if(!t)return;let n=[];for(let e of Array.from(t)){if(S.length+n.length>=y)break;let t=await e.text(),r=e.name.split(`.`).pop()?.toLowerCase()??``,i=[`ts`,`tsx`,`js`,`jsx`,`py`,`go`,`rs`,`java`].includes(r);n.push({id:`att_${Date.now()}_${Math.random().toString(36).slice(2,9)}`,type:i?`code`:`file`,name:e.name,content:t,mimeType:e.type,size:e.size})}C(e=>[...e,...n]),e.target.value=``},[S.length,y]),A=e.useCallback(e=>{C(t=>t.filter(t=>t.id!==e))},[]);return i(`div`,{className:t(`flex flex-col gap-2`,_),children:[S.length>0&&r(`div`,{className:`flex flex-wrap gap-2`,children:S.map(e=>i(`div`,{className:t(`flex items-center gap-1.5 rounded-md px-2 py-1`,`bg-muted text-muted-foreground text-sm`),children:[e.type===`code`?r(a,{className:`h-3.5 w-3.5`}):r(o,{className:`h-3.5 w-3.5`}),r(`span`,{className:`max-w-[150px] truncate`,children:e.name}),r(`button`,{type:`button`,onClick:()=>A(e.id),className:`hover:text-foreground`,"aria-label":`Remove ${e.name}`,children:r(u,{className:`h-3.5 w-3.5`})})]},e.id))}),i(`form`,{onSubmit:D,className:`flex items-end gap-2`,children:[v&&i(n,{children:[r(`input`,{ref:T,type:`file`,multiple:!0,accept:`.ts,.tsx,.js,.jsx,.json,.md,.txt,.py,.go,.rs,.java,.yaml,.yml`,onChange:k,className:`hidden`,"aria-label":`Attach files`}),r(d,{type:`button`,variant:`ghost`,size:`sm`,onPress:()=>T.current?.click(),disabled:m||S.length>=y,"aria-label":`Attach files`,children:r(c,{className:`h-4 w-4`})})]}),r(`div`,{className:`relative flex-1`,children:r(f,{value:b,onChange:e=>x(e.target.value),onKeyDown:O,placeholder:g,disabled:m,className:t(`min-h-[44px] max-h-[200px] resize-none pr-12`,`focus-visible:ring-1`),rows:1,"aria-label":`Chat message`})}),r(d,{type:`submit`,disabled:!E||m||h,size:`sm`,"aria-label":h?`Sending...`:`Send message`,children:h?r(s,{className:`h-4 w-4 animate-spin`}):r(l,{className:`h-4 w-4`})})]}),r(`p`,{className:`text-muted-foreground text-xs`,children:`Press Enter to send, Shift+Enter for new line`})]})}export{p as ChatInput};
+'use client';
+
+import { cn } from "../../libs/ui-kit-web/dist/ui/utils.js";
+import { Button$1 } from "../../libs/design-system/dist/components/atoms/Button.js";
+import { Textarea$1 } from "../../libs/design-system/dist/components/atoms/Textarea.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Code, FileText, Loader2, Paperclip, Send, X } from "lucide-react";
+
+//#region src/presentation/components/ChatInput.tsx
+/**
+* Chat input component with attachment support
+*/
+function ChatInput({ onSend, disabled = false, isLoading = false, placeholder = "Type a message...", className, showAttachments = true, maxAttachments = 5 }) {
+	const [content, setContent] = React.useState("");
+	const [attachments, setAttachments] = React.useState([]);
+	const textareaRef = React.useRef(null);
+	const fileInputRef = React.useRef(null);
+	const canSend = content.trim().length > 0 || attachments.length > 0;
+	const handleSubmit = React.useCallback((e) => {
+		e?.preventDefault();
+		if (!canSend || disabled || isLoading) return;
+		onSend(content.trim(), attachments.length > 0 ? attachments : void 0);
+		setContent("");
+		setAttachments([]);
+		textareaRef.current?.focus();
+	}, [
+		canSend,
+		content,
+		attachments,
+		disabled,
+		isLoading,
+		onSend
+	]);
+	const handleKeyDown = React.useCallback((e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSubmit();
+		}
+	}, [handleSubmit]);
+	const handleFileSelect = React.useCallback(async (e) => {
+		const files = e.target.files;
+		if (!files) return;
+		const newAttachments = [];
+		for (const file of Array.from(files)) {
+			if (attachments.length + newAttachments.length >= maxAttachments) break;
+			const content$1 = await file.text();
+			const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+			const isCode = [
+				"ts",
+				"tsx",
+				"js",
+				"jsx",
+				"py",
+				"go",
+				"rs",
+				"java"
+			].includes(extension);
+			newAttachments.push({
+				id: `att_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`,
+				type: isCode ? "code" : "file",
+				name: file.name,
+				content: content$1,
+				mimeType: file.type,
+				size: file.size
+			});
+		}
+		setAttachments((prev) => [...prev, ...newAttachments]);
+		e.target.value = "";
+	}, [attachments.length, maxAttachments]);
+	const removeAttachment = React.useCallback((id) => {
+		setAttachments((prev) => prev.filter((a) => a.id !== id));
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-2", className),
+		children: [
+			attachments.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-2",
+				children: attachments.map((attachment) => /* @__PURE__ */ jsxs("div", {
+					className: cn("flex items-center gap-1.5 rounded-md px-2 py-1", "bg-muted text-muted-foreground text-sm"),
+					children: [
+						attachment.type === "code" ? /* @__PURE__ */ jsx(Code, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "max-w-[150px] truncate",
+							children: attachment.name
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => removeAttachment(attachment.id),
+							className: "hover:text-foreground",
+							"aria-label": `Remove ${attachment.name}`,
+							children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+						})
+					]
+				}, attachment.id))
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				onSubmit: handleSubmit,
+				className: "flex items-end gap-2",
+				children: [
+					showAttachments && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+						ref: fileInputRef,
+						type: "file",
+						multiple: true,
+						accept: ".ts,.tsx,.js,.jsx,.json,.md,.txt,.py,.go,.rs,.java,.yaml,.yml",
+						onChange: handleFileSelect,
+						className: "hidden",
+						"aria-label": "Attach files"
+					}), /* @__PURE__ */ jsx(Button$1, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						onPress: () => fileInputRef.current?.click(),
+						disabled: disabled || attachments.length >= maxAttachments,
+						"aria-label": "Attach files",
+						children: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" })
+					})] }),
+					/* @__PURE__ */ jsx("div", {
+						className: "relative flex-1",
+						children: /* @__PURE__ */ jsx(Textarea$1, {
+							value: content,
+							onChange: (e) => setContent(e.target.value),
+							onKeyDown: handleKeyDown,
+							placeholder,
+							disabled,
+							className: cn("min-h-[44px] max-h-[200px] resize-none pr-12", "focus-visible:ring-1"),
+							rows: 1,
+							"aria-label": "Chat message"
+						})
+					}),
+					/* @__PURE__ */ jsx(Button$1, {
+						type: "submit",
+						disabled: !canSend || disabled || isLoading,
+						size: "sm",
+						"aria-label": isLoading ? "Sending..." : "Send message",
+						children: isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs",
+				children: "Press Enter to send, Shift+Enter for new line"
+			})
+		]
+	});
+}
+
+//#endregion
+export { ChatInput };

package/dist/presentation/components/ChatMessage.d.ts

@@ -1,5 +1,5 @@
 import { ChatMessage } from "../../core/message-types.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/presentation/components/ChatMessage.d.ts
 interface ChatMessageProps {
@@ -18,6 +18,6 @@ declare function ChatMessage$1({
   className,
   showCopy,
   showAvatar
-}: ChatMessageProps): react_jsx_runtime1.JSX.Element;
+}: ChatMessageProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ChatMessage$1 as ChatMessage };

package/dist/presentation/components/ChatMessage.js

@@ -1 +1,135 @@
-"use client";import{CodePreview as e}from"./CodePreview.js";import*as t from"react";import{cn as n}from"@lssm/lib.ui-kit-web/ui/utils";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{Avatar as o,AvatarFallback as s}from"@lssm/lib.ui-kit-web/ui/avatar";import{Skeleton as c}from"@lssm/lib.ui-kit-web/ui/skeleton";import{AlertCircle as l,Bot as u,Check as d,Copy as f,User as p}from"lucide-react";import{Button as m}from"@lssm/lib.design-system";function h(e){let t=/```(\w+)?\n([\s\S]*?)```/g,n=[],r;for(;(r=t.exec(e))!==null;)n.push({language:r[1]??`text`,code:r[2]??``,raw:r[0]});return n}function g({content:t}){let n=h(t);if(n.length===0)return i(`p`,{className:`whitespace-pre-wrap`,children:t});let a=t,o=[],s=0;for(let t of n){let[n,r]=a.split(t.raw);n&&o.push(i(`p`,{className:`whitespace-pre-wrap`,children:n.trim()},s++)),o.push(i(e,{code:t.code,language:t.language,className:`my-2`},s++)),a=r??``}return a.trim()&&o.push(i(`p`,{className:`whitespace-pre-wrap`,children:a.trim()},s++)),i(r,{children:o})}function _({message:e,className:r,showCopy:h=!0,showAvatar:_=!0}){let[v,y]=t.useState(!1),b=e.role===`user`,x=e.status===`error`,S=e.status===`streaming`,C=t.useCallback(async()=>{await navigator.clipboard.writeText(e.content),y(!0),setTimeout(()=>y(!1),2e3)},[e.content]);return a(`div`,{className:n(`group flex gap-3`,b&&`flex-row-reverse`,r),children:[_&&i(o,{className:`h-8 w-8 shrink-0`,children:i(s,{className:n(b?`bg-primary text-primary-foreground`:`bg-muted`),children:i(b?p:u,{className:`h-4 w-4`})})}),a(`div`,{className:n(`flex max-w-[80%] flex-col gap-1`,b&&`items-end`),children:[i(`div`,{className:n(`rounded-2xl px-4 py-2`,b?`bg-primary text-primary-foreground`:`bg-muted text-foreground`,x&&`border-destructive bg-destructive/10 border`),children:x&&e.error?a(`div`,{className:`flex items-start gap-2`,children:[i(l,{className:`text-destructive mt-0.5 h-4 w-4 shrink-0`}),a(`div`,{children:[i(`p`,{className:`text-destructive font-medium`,children:e.error.code}),i(`p`,{className:`text-muted-foreground text-sm`,children:e.error.message})]})]}):S&&!e.content?a(`div`,{className:`flex flex-col gap-2`,children:[i(c,{className:`h-4 w-48`}),i(c,{className:`h-4 w-32`})]}):i(g,{content:e.content})}),a(`div`,{className:n(`flex items-center gap-2 text-xs`,`text-muted-foreground opacity-0 transition-opacity`,`group-hover:opacity-100`),children:[i(`span`,{children:new Date(e.createdAt).toLocaleTimeString([],{hour:`2-digit`,minute:`2-digit`})}),e.usage&&a(`span`,{children:[e.usage.inputTokens+e.usage.outputTokens,` tokens`]}),h&&!b&&e.content&&i(m,{variant:`ghost`,size:`sm`,className:`h-6 w-6 p-0`,onPress:C,"aria-label":v?`Copied`:`Copy message`,children:i(v?d:f,{className:`h-3 w-3`})})]}),e.reasoning&&a(`details`,{className:`text-muted-foreground mt-2 text-sm`,children:[i(`summary`,{className:`cursor-pointer hover:underline`,children:`View reasoning`}),i(`div`,{className:`bg-muted mt-1 rounded-md p-2`,children:i(`p`,{className:`whitespace-pre-wrap`,children:e.reasoning})})]})]})]})}export{_ as ChatMessage};
+'use client';
+
+import { cn } from "../../libs/ui-kit-web/dist/ui/utils.js";
+import { Avatar, AvatarFallback } from "../../libs/ui-kit-web/dist/ui/avatar.js";
+import { Skeleton } from "../../libs/ui-kit-web/dist/ui/skeleton.js";
+import { Button$1 } from "../../libs/design-system/dist/components/atoms/Button.js";
+import { CodePreview } from "./CodePreview.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, Bot, Check, Copy, User } from "lucide-react";
+
+//#region src/presentation/components/ChatMessage.tsx
+/**
+* Extract code blocks from message content
+*/
+function extractCodeBlocks(content) {
+	const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+	const blocks = [];
+	let match;
+	while ((match = codeBlockRegex.exec(content)) !== null) blocks.push({
+		language: match[1] ?? "text",
+		code: match[2] ?? "",
+		raw: match[0]
+	});
+	return blocks;
+}
+/**
+* Render message content with code blocks
+*/
+function MessageContent({ content }) {
+	const codeBlocks = extractCodeBlocks(content);
+	if (codeBlocks.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "whitespace-pre-wrap",
+		children: content
+	});
+	let remaining = content;
+	const parts = [];
+	let key = 0;
+	for (const block of codeBlocks) {
+		const [before, after] = remaining.split(block.raw);
+		if (before) parts.push(/* @__PURE__ */ jsx("p", {
+			className: "whitespace-pre-wrap",
+			children: before.trim()
+		}, key++));
+		parts.push(/* @__PURE__ */ jsx(CodePreview, {
+			code: block.code,
+			language: block.language,
+			className: "my-2"
+		}, key++));
+		remaining = after ?? "";
+	}
+	if (remaining.trim()) parts.push(/* @__PURE__ */ jsx("p", {
+		className: "whitespace-pre-wrap",
+		children: remaining.trim()
+	}, key++));
+	return /* @__PURE__ */ jsx(Fragment, { children: parts });
+}
+/**
+* Chat message component
+*/
+function ChatMessage({ message, className, showCopy = true, showAvatar = true }) {
+	const [copied, setCopied] = React.useState(false);
+	const isUser = message.role === "user";
+	const isError = message.status === "error";
+	const isStreaming = message.status === "streaming";
+	const handleCopy = React.useCallback(async () => {
+		await navigator.clipboard.writeText(message.content);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	}, [message.content]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group flex gap-3", isUser && "flex-row-reverse", className),
+		children: [showAvatar && /* @__PURE__ */ jsx(Avatar, {
+			className: "h-8 w-8 shrink-0",
+			children: /* @__PURE__ */ jsx(AvatarFallback, {
+				className: cn(isUser ? "bg-primary text-primary-foreground" : "bg-muted"),
+				children: isUser ? /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("flex max-w-[80%] flex-col gap-1", isUser && "items-end"),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("rounded-2xl px-4 py-2", isUser ? "bg-primary text-primary-foreground" : "bg-muted text-foreground", isError && "border-destructive bg-destructive/10 border"),
+					children: isError && message.error ? /* @__PURE__ */ jsxs("div", {
+						className: "flex items-start gap-2",
+						children: [/* @__PURE__ */ jsx(AlertCircle, { className: "text-destructive mt-0.5 h-4 w-4 shrink-0" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+							className: "text-destructive font-medium",
+							children: message.error.code
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: message.error.message
+						})] })]
+					}) : isStreaming && !message.content ? /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })]
+					}) : /* @__PURE__ */ jsx(MessageContent, { content: message.content })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("flex items-center gap-2 text-xs", "text-muted-foreground opacity-0 transition-opacity", "group-hover:opacity-100"),
+					children: [
+						/* @__PURE__ */ jsx("span", { children: new Date(message.createdAt).toLocaleTimeString([], {
+							hour: "2-digit",
+							minute: "2-digit"
+						}) }),
+						message.usage && /* @__PURE__ */ jsxs("span", { children: [message.usage.inputTokens + message.usage.outputTokens, " tokens"] }),
+						showCopy && !isUser && message.content && /* @__PURE__ */ jsx(Button$1, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-6 w-6 p-0",
+							onPress: handleCopy,
+							"aria-label": copied ? "Copied" : "Copy message",
+							children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+						})
+					]
+				}),
+				message.reasoning && /* @__PURE__ */ jsxs("details", {
+					className: "text-muted-foreground mt-2 text-sm",
+					children: [/* @__PURE__ */ jsx("summary", {
+						className: "cursor-pointer hover:underline",
+						children: "View reasoning"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "bg-muted mt-1 rounded-md p-2",
+						children: /* @__PURE__ */ jsx("p", {
+							className: "whitespace-pre-wrap",
+							children: message.reasoning
+						})
+					})]
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+export { ChatMessage };