@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/ai/message/message.css

@@ -0,0 +1,71 @@
+@layer properties, theme, base;
+
+@layer components {
+  .Yi8zjG_root {
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 3);
+    width: 100%;
+    display: flex;
+  }
+
+  .Yi8zjG_rootUser {
+    flex-direction: row-reverse;
+  }
+
+  .Yi8zjG_rootAssistant {
+    flex-direction: row;
+  }
+
+  .Yi8zjG_body {
+    gap: calc(var(--spacing) * 2);
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .Yi8zjG_bodyUser {
+    align-items: flex-end;
+  }
+
+  .Yi8zjG_content {
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    min-width: 0;
+    color: var(--color-fg-base);
+  }
+
+  .Yi8zjG_contentUser {
+    border-radius: var(--radius-2xl);
+    background-color: var(--color-bg-subtle);
+    width: fit-content;
+    max-width: 80%;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+
+  .Yi8zjG_contentAssistant {
+    line-height: var(--line-height-relaxed);
+  }
+
+  .Yi8zjG_actions {
+    align-items: center;
+    gap: calc(var(--spacing) * .5);
+    color: var(--color-fg-mute);
+    display: flex;
+  }
+
+  .Yi8zjG_actionsUser {
+    margin-inline-end: calc(var(--spacing) * -1);
+  }
+
+  .Yi8zjG_actionsAssistant {
+    margin-inline-start: calc(var(--spacing) * -1);
+  }
+
+  .Yi8zjG_selected {
+    color: var(--color-primary-fg);
+  }
+}
+
+@layer utilities;

package/dist/components/ai/message/message.d.mts

@@ -1,15 +1,46 @@
+import { MessageFeedback } from "../types.mjs";
 import { FC, HTMLAttributes, ReactNode } from "react";
 //#region src/components/ai/message/message.d.ts
 type MessageRole = 'user' | 'assistant';
 type RootProps = {
   from: MessageRole;
+  avatar?: ReactNode;
   children: ReactNode;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
-declare const Root: FC<RootProps>;
+export declare const Root: FC<RootProps>;
 type ContentProps = {
   isStreaming?: boolean;
   children: ReactNode;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
-declare const Content: FC<ContentProps>;
+export declare const Content: FC<ContentProps>;
+type ActionsProps = {
+  label?: string;
+  children: ReactNode;
+};
+export declare const Actions: FC<ActionsProps>;
+type ActionProps = {
+  label: string;
+  onAction?: () => void | Promise<void>;
+  disabled?: boolean;
+  children: ReactNode;
+};
+export declare const Action: FC<ActionProps>;
+type CopyProps = {
+  value: string;
+  label?: string;
+};
+export declare const Copy: FC<CopyProps>;
+type RegenerateProps = {
+  onAction: () => void | Promise<void>;
+  label?: string;
+  disabled?: boolean;
+};
+export declare const Regenerate: FC<RegenerateProps>;
+type FeedbackProps = {
+  value?: MessageFeedback | null;
+  defaultValue?: MessageFeedback | null;
+  onChange?: (value: MessageFeedback | null) => void;
+};
+export declare const Feedback: FC<FeedbackProps>;
 //#endregion
-export { Content, Root };
+export {};

package/dist/components/ai/message/message.mjs

@@ -1,20 +1,42 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import { BadIcon, GoodIcon, RefreshIcon } from "../../icons/lucide.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { CopyButton } from "../../buttons/copy-button/copy-button.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
 import { StreamingCursor } from "../_internal/streaming-cursor.mjs";
+import message_module_default from "./message.module.mjs";
+import { clsx } from "clsx";
 import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai/message/message.tsx
-const [MessageProvider, useMessageContext] = createSafeContext("Message.Content must be used within <Message.Root>");
-const Root = ({ from, children, ...rest }) => {
+const ROOT = {
+	user: message_module_default.rootUser,
+	assistant: message_module_default.rootAssistant
+};
+const CONTENT = {
+	user: clsx(message_module_default.contentUser, high_contrast_module_default.edge),
+	assistant: message_module_default.contentAssistant
+};
+const ACTIONS = {
+	user: message_module_default.actionsUser,
+	assistant: message_module_default.actionsAssistant
+};
+const [MessageProvider, useMessageContext] = createSafeContext("Message.* must be used within <Message.Root>");
+const Root = ({ from, avatar, children, ...rest }) => {
 	const contextValue = useMemo(() => ({ from }), [from]);
 	return /* @__PURE__ */ jsx(MessageProvider, {
 		value: contextValue,
-		children: /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			...rest,
-			className: cn("flex w-full items-start gap-3", from === "user" ? "flex-row-reverse" : "flex-row"),
+			className: clsx(message_module_default.root, ROOT[from]),
 			"data-from": from,
-			children
+			children: [avatar, /* @__PURE__ */ jsx("div", {
+				className: clsx(message_module_default.body, from === "user" && message_module_default.bodyUser),
+				children
+			})]
 		})
 	});
 };
@@ -22,9 +44,77 @@ const Content = ({ isStreaming = false, children, ...rest }) => {
 	const { from } = useMessageContext();
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
-		className: cn("min-w-0 wrap-break-word whitespace-pre-wrap text-fg-base", from === "user" ? "w-fit max-w-[80%] rounded-2xl bg-bg-subtle px-4 py-2.5" : "flex-1 leading-relaxed"),
+		className: clsx(message_module_default.content, CONTENT[from]),
 		children: [children, isStreaming ? /* @__PURE__ */ jsx(StreamingCursor, {}) : null]
 	});
 };
+const Actions = ({ label, children }) => {
+	const messages = getMessages();
+	const { from } = useMessageContext();
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": label ?? messages.messageActions,
+		className: clsx(message_module_default.actions, ACTIONS[from]),
+		role: "group",
+		children
+	});
+};
+const Action = ({ label, onAction, disabled, children }) => /* @__PURE__ */ jsx(IconButton, {
+	disabled,
+	label,
+	onAction,
+	size: "sm",
+	children
+});
+const Copy = ({ value, label }) => /* @__PURE__ */ jsx(CopyButton, {
+	iconOnly: true,
+	label,
+	size: "sm",
+	value
+});
+const Regenerate = ({ onAction, label, disabled }) => {
+	const messages = getMessages();
+	return /* @__PURE__ */ jsx(Action, {
+		disabled,
+		label: label ?? messages.regenerate,
+		onAction,
+		children: /* @__PURE__ */ jsx(RefreshIcon, { size: "sm" })
+	});
+};
+const Feedback = ({ value, defaultValue = null, onChange }) => {
+	const messages = getMessages();
+	const [feedback, setFeedback] = useControllableState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const toggle = (next) => {
+		setFeedback(feedback === next ? null : next);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
+		"aria-pressed": feedback === "positive",
+		color: feedback === "positive" ? "primary" : "transparent",
+		label: messages.feedbackPositive,
+		onClick: () => {
+			toggle("positive");
+		},
+		size: "sm",
+		children: /* @__PURE__ */ jsx("span", {
+			className: clsx(feedback === "positive" && message_module_default.selected),
+			children: /* @__PURE__ */ jsx(GoodIcon, { size: "sm" })
+		})
+	}), /* @__PURE__ */ jsx(IconButton, {
+		"aria-pressed": feedback === "negative",
+		color: feedback === "negative" ? "primary" : "transparent",
+		label: messages.feedbackNegative,
+		onClick: () => {
+			toggle("negative");
+		},
+		size: "sm",
+		children: /* @__PURE__ */ jsx("span", {
+			className: clsx(feedback === "negative" && message_module_default.selected),
+			children: /* @__PURE__ */ jsx(BadIcon, { size: "sm" })
+		})
+	})] });
+};
 //#endregion
-export { Content, Root };
+export { Action, Actions, Content, Copy, Feedback, Regenerate, Root };

package/dist/components/ai/message/message.module.mjs

@@ -0,0 +1,18 @@
+import './message.css';
+//#region src/components/ai/message/message.module.css
+var message_module_default = {
+	"actions": "Yi8zjG_actions",
+	"actionsAssistant": "Yi8zjG_actionsAssistant",
+	"actionsUser": "Yi8zjG_actionsUser",
+	"body": "Yi8zjG_body",
+	"bodyUser": "Yi8zjG_bodyUser",
+	"content": "Yi8zjG_content",
+	"contentAssistant": "Yi8zjG_contentAssistant",
+	"contentUser": "Yi8zjG_contentUser",
+	"root": "Yi8zjG_root",
+	"rootAssistant": "Yi8zjG_rootAssistant",
+	"rootUser": "Yi8zjG_rootUser",
+	"selected": "Yi8zjG_selected"
+};
+//#endregion
+export { message_module_default as default };

package/dist/components/ai/prompt-input/index.d.mts

@@ -1,16 +1,24 @@
 import { ChatStatus } from "../types.mjs";
 import "../index.mjs";
 //#region src/components/ai/prompt-input/index.d.ts
-declare const PromptInput: {
+export declare const PromptInput: {
   readonly Root: import("react").FC<{
     status?: ChatStatus;
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
-    onSubmit?: (message: string) => void;
+    onSubmit?: (message: string, files: FileList) => void;
     onStop?: () => void;
+    accept?: string;
+    maxFiles?: number;
     children: import("react").ReactNode;
   }>;
+  readonly Attachments: import("react").FC<{
+    label?: string;
+  }>;
+  readonly Attach: import("react").FC<{
+    label?: string;
+  }>;
   readonly Textarea: import("react").FC<{
     placeholder?: string;
     ref?: import("react").Ref<HTMLTextAreaElement>;
@@ -20,5 +28,4 @@ declare const PromptInput: {
     stopLabel?: string;
   }>;
 };
-//#endregion
-export { PromptInput };
+//#endregion

package/dist/components/ai/prompt-input/index.mjs

@@ -1,7 +1,9 @@
-import { Root, Submit, Textarea } from "./prompt-input.mjs";
+import { Attach, Attachments, Root, Submit, Textarea } from "./prompt-input.mjs";
 //#region src/components/ai/prompt-input/index.ts
 const PromptInput = {
 	Root,
+	Attachments,
+	Attach,
 	Textarea,
 	Submit
 };

package/dist/components/ai/prompt-input/prompt-input.css

@@ -0,0 +1,101 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._2eq2pa_root {
+    align-items: flex-end;
+    gap: calc(var(--spacing) * 2);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    border-radius: var(--radius-2xl);
+    background-color: var(--color-bg-base);
+    padding: calc(var(--spacing) * 2);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  ._2eq2pa_dragging {
+    border-style: dashed;
+    border-color: var(--color-primary-border);
+    background-color: var(--color-primary-bg-subtle);
+  }
+
+  ._2eq2pa_textarea {
+    max-height: calc(var(--spacing) * 48);
+    min-height: calc(var(--spacing) * 10);
+    resize: none;
+    field-sizing: content;
+    min-width: 0;
+    padding: calc(var(--spacing) * 2);
+    color: var(--color-fg-base);
+    background-color: #0000;
+    outline-style: none;
+    flex: 1;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  ._2eq2pa_textarea::placeholder {
+    color: var(--color-fg-subtle);
+  }
+
+  ._2eq2pa_image {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  ._2eq2pa_attachments {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 1);
+    padding-inline-end: calc(var(--spacing) * 2);
+    padding-top: calc(var(--spacing) * 2);
+  }
+
+  ._2eq2pa_button {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+    border-radius: var(--radius-full);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  ._2eq2pa_attach {
+    color: var(--color-fg-mute);
+  }
+
+  @media (hover: hover) {
+    ._2eq2pa_attach:hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+
+  ._2eq2pa_primary {
+    background-color: var(--color-primary-bg);
+    color: var(--color-primary-fg);
+  }
+
+  ._2eq2pa_primary:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  ._2eq2pa_stopMark {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+    border-radius: var(--radius-xs);
+    background-color: currentColor;
+  }
+}
+
+@layer utilities;

package/dist/components/ai/prompt-input/prompt-input.d.mts

@@ -6,20 +6,30 @@ type RootProps = {
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;
-  onSubmit?: (message: string) => void;
+  onSubmit?: (message: string, files: FileList) => void;
   onStop?: () => void;
+  accept?: string;
+  maxFiles?: number;
   children: ReactNode;
 };
-declare const Root: FC<RootProps>;
+export declare const Root: FC<RootProps>;
 type TextareaProps = {
   placeholder?: string;
   ref?: Ref<HTMLTextAreaElement>;
 } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'className' | 'style' | 'rows'>;
-declare const Textarea: FC<TextareaProps>;
+export declare const Textarea: FC<TextareaProps>;
+type AttachmentsProps = {
+  label?: string;
+};
+export declare const Attachments: FC<AttachmentsProps>;
+type AttachProps = {
+  label?: string;
+};
+export declare const Attach: FC<AttachProps>;
 type SubmitProps = {
   sendLabel?: string;
   stopLabel?: string;
 };
-declare const Submit: FC<SubmitProps>;
+export declare const Submit: FC<SubmitProps>;
 //#endregion
-export { Root, Submit, Textarea };
+export {};