@logicplanes/kaeso-ui 0.4.4 → 0.4.5

package/dist/components/kaeso/conversation.js

@@ -1,18 +1,18 @@
 "use client";
-import { t as e } from "../../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../../chunks/cn-BjnOAUrA.js";
 import { i as t } from "../../chunks/context-BELWW79w.js";
-import { t as n } from "../../chunks/icon-D7ja-_Yk.js";
-import { r } from "../../chunks/link-KWI7PevW.js";
-import { t as i } from "../../chunks/banner-BA2ALw9M.js";
-import { t as a } from "../../chunks/json-view-Dqd2TDkc.js";
-import { t as o } from "../../chunks/badge-C2KtxCLB.js";
-import { n as s } from "../../chunks/collapsible-CKrCX_T9.js";
+import { t as n } from "../../chunks/icon-CBzOwqrX.js";
+import { r } from "../../chunks/link-CMjkcLQK.js";
+import { t as i } from "../../chunks/banner-B3DGLTBu.js";
+import { t as a } from "../../chunks/json-view-DZ2nL2Ir.js";
+import { t as o } from "../../chunks/badge-C0GC3B9X.js";
+import { t as s } from "../../chunks/reasoning-frame-C3HdQRRS.js";
 import { t as c } from "../../chunks/safe-href-G5DBNVwm.js";
 import { Suspense as l, forwardRef as u, lazy as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { Image01Icon as m, Pdf01Icon as h, ToolsIcon as g } from "@hugeicons/core-free-icons";
 //#region src/components/kaeso/conversation.tsx
-var _ = /* @__PURE__ */ d(() => import("../../chunks/markdown-BupwFOae.js").then((e) => e.o).then((e) => ({ default: e.Markdown }))), v = { density: {
+var _ = /* @__PURE__ */ d(() => import("../../chunks/markdown-C565aBR7.js").then((e) => e.o).then((e) => ({ default: e.Markdown }))), v = { density: {
 	default: { classes: "gap-24" },
 	compact: { classes: "gap-16" }
 } }, y = { density: "default" };
@@ -89,7 +89,7 @@ function T({ blocks: e, markdown: c }) {
 					})]
 				}, t);
 				case "tool_result": return /* @__PURE__ */ p("div", {
-					className: "flex flex-col gap-8 pl-16 hairline-l",
+					className: "flex flex-col gap-8 pl-12 hairline-l",
 					children: [/* @__PURE__ */ p("span", {
 						className: "inline-flex items-center gap-8 text-small font-medium text-fg-secondary",
 						children: [
@@ -103,11 +103,14 @@ function T({ blocks: e, markdown: c }) {
 								children: l("conversationView.error", "Error")
 							})
 						]
-					}), typeof e.content == "string" ? c && !C(e.content) ? /* @__PURE__ */ f(w, {
+					}), typeof e.content == "string" ? C(e.content) ? /* @__PURE__ */ f(a, {
+						value: JSON.parse(e.content),
+						defaultDepth: 3
+					}) : c ? /* @__PURE__ */ f(w, {
 						text: e.content,
 						markdown: !0
 					}) : /* @__PURE__ */ f("pre", {
-						className: "mono text-small whitespace-pre-wrap wrap-anywhere text-fg",
+						className: "mono text-small whitespace-pre-wrap wrap-break-word text-fg",
 						children: e.content
 					}) : /* @__PURE__ */ f(T, {
 						blocks: e.content,
@@ -115,11 +118,8 @@ function T({ blocks: e, markdown: c }) {
 					})]
 				}, t);
 				case "reasoning": return /* @__PURE__ */ f(s, {
-					title: /* @__PURE__ */ f("span", {
-						className: "text-fg-secondary",
-						children: l("conversationView.reasoning", "Reasoning")
-					}),
-					hint: e.redacted ? l("conversationView.redacted", "Redacted by the provider") : void 0,
+					heading: l("conversationView.reasoning", "Reasoning"),
+					preview: e.redacted ? l("conversationView.redacted", "Redacted by the provider") : void 0,
 					children: e.redacted ? /* @__PURE__ */ f("p", {
 						className: "max-w-prose text-small text-fg-secondary",
 						children: l("conversationView.encrypted", "The provider returned this reasoning in encrypted form.")
@@ -146,7 +146,7 @@ function T({ blocks: e, markdown: c }) {
 						className: "w-max max-w-full wrap-anywhere",
 						children: l("conversationView.imageFrom", "Image from {host}", { host: new URL(i).host })
 					}, t) : /* @__PURE__ */ p("span", {
-						className: "inline-flex h-32 w-max items-center gap-8 rounded-pill bg-fill-1 px-12 text-small text-fg-secondary",
+						className: "inline-flex w-max max-w-full items-center gap-8 text-small text-fg-secondary",
 						children: [
 							/* @__PURE__ */ f(n, {
 								icon: m,
@@ -154,24 +154,22 @@ function T({ blocks: e, markdown: c }) {
 							}),
 							" ",
 							l("conversationView.image", "Image"),
-							" ",
 							e.media_type && /* @__PURE__ */ f("span", {
-								className: "mono",
+								className: "mono text-fg-tertiary",
 								children: e.media_type
 							})
 						]
 					}, t);
 				}
 				case "document": return /* @__PURE__ */ p("span", {
-					className: "inline-flex h-32 w-max items-center gap-8 rounded-pill bg-fill-1 px-12 text-small text-fg-secondary",
-					children: [
-						/* @__PURE__ */ f(n, {
-							icon: h,
-							size: "xs"
-						}),
-						" ",
-						e.name ?? l("conversationView.document", "Document")
-					]
+					className: "inline-flex w-max max-w-full items-center gap-8 text-small text-fg-secondary",
+					children: [/* @__PURE__ */ f(n, {
+						icon: h,
+						size: "xs"
+					}), /* @__PURE__ */ f("span", {
+						className: "min-w-0 wrap-break-word",
+						children: e.name ?? l("conversationView.document", "Document")
+					})]
 				}, t);
 				case "refusal": return /* @__PURE__ */ f(i, {
 					tone: "warning",
@@ -183,27 +181,34 @@ function T({ blocks: e, markdown: c }) {
 	});
 }
 var E = /* @__PURE__ */ u(function({ messages: n, density: r = "default", markdown: i = !1, className: a, footer: o }, s) {
-	let c = b(t());
+	let c = t(), l = b(c);
 	return /* @__PURE__ */ p("div", {
 		ref: s,
 		className: e("flex flex-col", v.density[r].classes, a),
-		children: [n.map((t, n) => /* @__PURE__ */ p("section", {
-			"aria-label": c[t.role],
-			className: "flex flex-col gap-8",
-			children: [/* @__PURE__ */ f("span", {
-				className: e("text-caption font-medium", t.role === "assistant" ? "text-fg" : "text-fg-secondary"),
-				children: c[t.role]
-			}), /* @__PURE__ */ f("div", {
-				className: e(t.role === "system" || t.role === "developer" ? "rounded-well bg-fill-1 px-16 py-12" : ""),
-				children: /* @__PURE__ */ f(T, {
-					blocks: typeof t.content == "string" ? [{
-						type: "text",
-						text: t.content
-					}] : t.content,
-					markdown: i
-				})
-			})]
-		}, n)), o]
+		children: [
+			n.length === 0 && /* @__PURE__ */ f("p", {
+				className: "text-small text-fg-secondary",
+				children: c("conversationView.empty", "This request has no messages.")
+			}),
+			n.map((t, n) => /* @__PURE__ */ p("section", {
+				"aria-label": l[t.role],
+				className: "flex flex-col gap-8",
+				children: [/* @__PURE__ */ f("span", {
+					className: e("text-caption font-medium", t.role === "assistant" ? "text-fg" : "text-fg-secondary"),
+					children: l[t.role]
+				}), /* @__PURE__ */ f("div", {
+					className: e(t.role === "system" || t.role === "developer" ? "rounded-well bg-fill-1 px-12 py-12" : ""),
+					children: /* @__PURE__ */ f(T, {
+						blocks: typeof t.content == "string" ? [{
+							type: "text",
+							text: t.content
+						}] : t.content,
+						markdown: i
+					})
+				})]
+			}, n)),
+			o
+		]
 	});
 });
 process.env.NODE_ENV !== "production" && (E.displayName = "ConversationView");

package/dist/components/kaeso/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","names":["__icon_ToolsIcon","__icon_Image01Icon","__icon_Pdf01Icon","cn","useUiText","Icon","Banner","JsonView","Badge","Collapsible","safeHref","LazyMarkdown","n","m","KAESO_CONVERSATION_VARIANTS","KAESO_CONVERSATION_DEFAULT_VARIANTS","roleNames","t","DATA_IMAGE","webHref","href","src","isJson","s","Prose","plain","small","text","markdown","Suspense","Blocks","blocks","b","i","ToolsIcon","j","part","Link","Image01Icon","Pdf01Icon","ConversationView","role","density","className","messages","footer"],"sources":["../../../src/components/kaeso/conversation.tsx"],"sourcesContent":["import { forwardRef, lazy, Suspense, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { ToolsIcon as __icon_ToolsIcon, Image01Icon as __icon_Image01Icon, Pdf01Icon as __icon_Pdf01Icon } from \"@hugeicons/core-free-icons\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Banner } from \"../banner/banner.js\";\nimport { Collapsible } from \"../collapsible/collapsible.js\";\nimport { JsonView } from \"../code-block/json-view.js\";\nimport { Badge } from \"../badge/badge.js\";\nimport { Link } from \"../link/link.js\";\nimport { safeHref } from \"../../utils/safe-href.js\";\nimport { useUiText, type UiText } from \"../../i18n/context.js\";\n\nconst LazyMarkdown = /* @__PURE__ */ lazy(() => import(\"../markdown/markdown.js\").then((m) => ({ default: m.Markdown })));\n\nexport const KAESO_CONVERSATION_VARIANTS = {\n  density: {\n    default: { classes: \"gap-24\" },\n    compact: { classes: \"gap-16\" },\n  },\n} as const;\nexport const KAESO_CONVERSATION_DEFAULT_VARIANTS = { density: \"default\" } as const;\n\nexport type ContentBlock =\n  | { type: \"text\"; text: string }\n  | { type: \"tool_call\"; id?: string | undefined; name: string; arguments: unknown }\n  | { type: \"tool_result\"; tool_call_id?: string | undefined; content: string | ContentBlock[]; is_error?: boolean | undefined }\n  | { type: \"reasoning\"; text: string; redacted?: boolean | undefined }\n  | { type: \"image\"; src?: string | undefined; alt?: string | undefined; media_type?: string | undefined }\n  | { type: \"document\"; name?: string | undefined; media_type?: string | undefined }\n  | { type: \"refusal\"; text: string };\n\nexport interface ConversationMessage {\n  role: \"system\" | \"user\" | \"assistant\" | \"tool\" | \"developer\";\n  content: string | ContentBlock[];\n}\n\nfunction roleNames(t: UiText): Record<ConversationMessage[\"role\"], string> {\n  return {\n    system: t(\"conversationView.system\", \"System\"),\n    developer: t(\"conversationView.developer\", \"Developer\"),\n    user: t(\"conversationView.user\", \"User\"),\n    assistant: t(\"conversationView.assistant\", \"Assistant\"),\n    tool: t(\"conversationView.tool\", \"Tool\"),\n  };\n}\n\nconst DATA_IMAGE = /^data:image\\/[a-z0-9.+-]+;/i;\n\nfunction webHref(src: string): string | null {\n  const href = safeHref(src);\n  return href && /^https?:/.test(href) ? href : null;\n}\n\nfunction isJson(s: string) {\n  const t = s.trim();\n  if (!/^[[{]/.test(t)) return false;\n  try {\n    JSON.parse(t);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nfunction Prose({ text, markdown, small }: { text: string; markdown: boolean; small?: boolean | undefined }) {\n  const plain = (\n    <p className={cn(\"max-w-prose whitespace-pre-wrap wrap-break-word text-pretty\", small ? \"text-small text-fg-secondary\" : \"text-body text-fg\")}>{text}</p>\n  );\n  if (!markdown) return plain;\n  return (\n    <Suspense fallback={plain}>\n      <LazyMarkdown text={text} {...(small ? { size: \"small\" as const, tone: \"secondary\" as const } : {})} />\n    </Suspense>\n  );\n}\n\nfunction Blocks({ blocks, markdown }: { blocks: ContentBlock[]; markdown: boolean }) {\n  const t = useUiText();\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {blocks.map((b, i) => {\n        switch (b.type) {\n          case \"text\":\n            return <Prose key={i} text={b.text} markdown={markdown} />;\n          case \"tool_call\":\n            return (\n              <div key={i} className=\"flex flex-col gap-8\">\n                <span className=\"inline-flex items-center gap-8 text-small font-medium text-fg-secondary\">\n                  <Icon icon={__icon_ToolsIcon} size=\"xs\" />\n                  {t(\"conversationView.called\", \"Called **{name}**\", { name: b.name })\n                    .split(\"**\")\n                    .map((part, j) =>\n                      j % 2 ? (\n                        <span key={j} className=\"mono text-fg\">\n                          {part}\n                        </span>\n                      ) : (\n                        part\n                      ),\n                    )}\n                  {b.id && <span className=\"mono text-fg-tertiary\">{b.id}</span>}\n                </span>\n                <JsonView value={b.arguments} defaultDepth={3} />\n              </div>\n            );\n          case \"tool_result\":\n            return (\n              <div key={i} className=\"flex flex-col gap-8 pl-16 hairline-l\">\n                <span className=\"inline-flex items-center gap-8 text-small font-medium text-fg-secondary\">\n                  {t(\"conversationView.result\", \"Result\")}\n                  {b.tool_call_id && <span className=\"mono text-fg-tertiary\">{b.tool_call_id}</span>}\n                  {b.is_error && <Badge tone=\"danger\">{t(\"conversationView.error\", \"Error\")}</Badge>}\n                </span>\n                {typeof b.content !== \"string\" ? (\n                  <Blocks blocks={b.content} markdown={markdown} />\n                ) : markdown && !isJson(b.content) ? (\n                  <Prose text={b.content} markdown />\n                ) : (\n                  <pre className=\"mono text-small whitespace-pre-wrap wrap-anywhere text-fg\">{b.content}</pre>\n                )}\n              </div>\n            );\n          case \"reasoning\":\n            return (\n              <Collapsible\n                key={i}\n                title={<span className=\"text-fg-secondary\">{t(\"conversationView.reasoning\", \"Reasoning\")}</span>}\n                hint={b.redacted ? t(\"conversationView.redacted\", \"Redacted by the provider\") : undefined}\n              >\n                {b.redacted ? (\n                  <p className=\"max-w-prose text-small text-fg-secondary\">\n                    {t(\"conversationView.encrypted\", \"The provider returned this reasoning in encrypted form.\")}\n                  </p>\n                ) : (\n                  <Prose text={b.text} markdown={markdown} small />\n                )}\n              </Collapsible>\n            );\n          case \"image\": {\n            if (b.src && DATA_IMAGE.test(b.src))\n              return (\n                <span key={i} className=\"block w-120 overflow-hidden rounded-well ring-over ring-over-line\">\n                  <img src={b.src} alt={b.alt ?? t(\"conversationView.imageInput\", \"Image input\")} className=\"block h-120 w-120 object-cover\" />\n                </span>\n              );\n            const href = b.src ? webHref(b.src) : null;\n            return href ? (\n              <Link key={i} href={href} external rel=\"noopener noreferrer nofollow\" className=\"w-max max-w-full wrap-anywhere\">\n                {t(\"conversationView.imageFrom\", \"Image from {host}\", { host: new URL(href).host })}\n              </Link>\n            ) : (\n              <span key={i} className=\"inline-flex h-32 w-max items-center gap-8 rounded-pill bg-fill-1 px-12 text-small text-fg-secondary\">\n                <Icon icon={__icon_Image01Icon} size=\"xs\" /> {t(\"conversationView.image\", \"Image\")} {b.media_type && <span className=\"mono\">{b.media_type}</span>}\n              </span>\n            );\n          }\n          case \"document\":\n            return (\n              <span key={i} className=\"inline-flex h-32 w-max items-center gap-8 rounded-pill bg-fill-1 px-12 text-small text-fg-secondary\">\n                <Icon icon={__icon_Pdf01Icon} size=\"xs\" /> {b.name ?? t(\"conversationView.document\", \"Document\")}\n              </span>\n            );\n          case \"refusal\":\n            return (\n              <Banner key={i} tone=\"warning\" title={t(\"conversationView.refused\", \"The model refused.\")}>\n                {b.text}\n              </Banner>\n            );\n        }\n      })}\n    </div>\n  );\n}\n\nexport interface ConversationViewProps {\n  messages: ConversationMessage[];\n  density?: keyof typeof KAESO_CONVERSATION_VARIANTS.density | undefined;\n  markdown?: boolean | undefined;\n  className?: string | undefined;\n  footer?: ReactNode | undefined;\n}\n\nexport const ConversationView = /* @__PURE__ */ forwardRef<HTMLDivElement, ConversationViewProps>(function ConversationView(\n  { messages, density = \"default\", markdown = false, className, footer },\n  ref,\n) {\n  const t = useUiText();\n  const role = roleNames(t);\n  return (\n    <div ref={ref} className={cn(\"flex flex-col\", KAESO_CONVERSATION_VARIANTS.density[density].classes, className)}>\n      {messages.map((m, i) => (\n        <section key={i} aria-label={role[m.role]} className=\"flex flex-col gap-8\">\n          <span className={cn(\"text-caption font-medium\", m.role === \"assistant\" ? \"text-fg\" : \"text-fg-secondary\")}>{role[m.role]}</span>\n          <div className={cn(m.role === \"system\" || m.role === \"developer\" ? \"rounded-well bg-fill-1 px-16 py-12\" : \"\")}>\n            <Blocks blocks={typeof m.content === \"string\" ? [{ type: \"text\", text: m.content }] : m.content} markdown={markdown} />\n          </div>\n        </section>\n      ))}\n      {footer}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") ConversationView.displayName = \"ConversationView\";\n"],"mappings":"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"}
+{"version":3,"file":"conversation.js","names":["__icon_ToolsIcon","__icon_Image01Icon","__icon_Pdf01Icon","cn","useUiText","Icon","Banner","JsonView","Badge","ReasoningFrame","safeHref","LazyMarkdown","n","m","KAESO_CONVERSATION_VARIANTS","KAESO_CONVERSATION_DEFAULT_VARIANTS","roleNames","t","DATA_IMAGE","webHref","href","src","isJson","s","Prose","plain","small","text","markdown","Suspense","Blocks","blocks","b","i","ToolsIcon","j","part","Link","Image01Icon","Pdf01Icon","ConversationView","role","density","className","messages","footer"],"sources":["../../../src/components/kaeso/conversation.tsx"],"sourcesContent":["import { forwardRef, lazy, Suspense, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { ToolsIcon as __icon_ToolsIcon, Image01Icon as __icon_Image01Icon, Pdf01Icon as __icon_Pdf01Icon } from \"@hugeicons/core-free-icons\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Banner } from \"../banner/banner.js\";\nimport { ReasoningFrame } from \"../playground/reasoning-frame.js\";\nimport { JsonView } from \"../code-block/json-view.js\";\nimport { Badge } from \"../badge/badge.js\";\nimport { Link } from \"../link/link.js\";\nimport { safeHref } from \"../../utils/safe-href.js\";\nimport { useUiText, type UiText } from \"../../i18n/context.js\";\n\nconst LazyMarkdown = /* @__PURE__ */ lazy(() => import(\"../markdown/markdown.js\").then((m) => ({ default: m.Markdown })));\n\nexport const KAESO_CONVERSATION_VARIANTS = {\n  density: {\n    default: { classes: \"gap-24\" },\n    compact: { classes: \"gap-16\" },\n  },\n} as const;\nexport const KAESO_CONVERSATION_DEFAULT_VARIANTS = { density: \"default\" } as const;\n\nexport type ContentBlock =\n  | { type: \"text\"; text: string }\n  | { type: \"tool_call\"; id?: string | undefined; name: string; arguments: unknown }\n  | { type: \"tool_result\"; tool_call_id?: string | undefined; content: string | ContentBlock[]; is_error?: boolean | undefined }\n  | { type: \"reasoning\"; text: string; redacted?: boolean | undefined }\n  | { type: \"image\"; src?: string | undefined; alt?: string | undefined; media_type?: string | undefined }\n  | { type: \"document\"; name?: string | undefined; media_type?: string | undefined }\n  | { type: \"refusal\"; text: string };\n\nexport interface ConversationMessage {\n  role: \"system\" | \"user\" | \"assistant\" | \"tool\" | \"developer\";\n  content: string | ContentBlock[];\n}\n\nfunction roleNames(t: UiText): Record<ConversationMessage[\"role\"], string> {\n  return {\n    system: t(\"conversationView.system\", \"System\"),\n    developer: t(\"conversationView.developer\", \"Developer\"),\n    user: t(\"conversationView.user\", \"User\"),\n    assistant: t(\"conversationView.assistant\", \"Assistant\"),\n    tool: t(\"conversationView.tool\", \"Tool\"),\n  };\n}\n\nconst DATA_IMAGE = /^data:image\\/[a-z0-9.+-]+;/i;\n\nfunction webHref(src: string): string | null {\n  const href = safeHref(src);\n  return href && /^https?:/.test(href) ? href : null;\n}\n\nfunction isJson(s: string) {\n  const t = s.trim();\n  if (!/^[[{]/.test(t)) return false;\n  try {\n    JSON.parse(t);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nfunction Prose({ text, markdown, small }: { text: string; markdown: boolean; small?: boolean | undefined }) {\n  const plain = (\n    <p className={cn(\"max-w-prose whitespace-pre-wrap wrap-break-word text-pretty\", small ? \"text-small text-fg-secondary\" : \"text-body text-fg\")}>{text}</p>\n  );\n  if (!markdown) return plain;\n  return (\n    <Suspense fallback={plain}>\n      <LazyMarkdown text={text} {...(small ? { size: \"small\" as const, tone: \"secondary\" as const } : {})} />\n    </Suspense>\n  );\n}\n\nfunction Blocks({ blocks, markdown }: { blocks: ContentBlock[]; markdown: boolean }) {\n  const t = useUiText();\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {blocks.map((b, i) => {\n        switch (b.type) {\n          case \"text\":\n            return <Prose key={i} text={b.text} markdown={markdown} />;\n          case \"tool_call\":\n            return (\n              <div key={i} className=\"flex flex-col gap-8\">\n                <span className=\"inline-flex items-center gap-8 text-small font-medium text-fg-secondary\">\n                  <Icon icon={__icon_ToolsIcon} size=\"xs\" />\n                  {t(\"conversationView.called\", \"Called **{name}**\", { name: b.name })\n                    .split(\"**\")\n                    .map((part, j) =>\n                      j % 2 ? (\n                        <span key={j} className=\"mono text-fg\">\n                          {part}\n                        </span>\n                      ) : (\n                        part\n                      ),\n                    )}\n                  {b.id && <span className=\"mono text-fg-tertiary\">{b.id}</span>}\n                </span>\n                <JsonView value={b.arguments} defaultDepth={3} />\n              </div>\n            );\n          case \"tool_result\":\n            return (\n              <div key={i} className=\"flex flex-col gap-8 pl-12 hairline-l\">\n                <span className=\"inline-flex items-center gap-8 text-small font-medium text-fg-secondary\">\n                  {t(\"conversationView.result\", \"Result\")}\n                  {b.tool_call_id && <span className=\"mono text-fg-tertiary\">{b.tool_call_id}</span>}\n                  {b.is_error && <Badge tone=\"danger\">{t(\"conversationView.error\", \"Error\")}</Badge>}\n                </span>\n                {typeof b.content !== \"string\" ? (\n                  <Blocks blocks={b.content} markdown={markdown} />\n                ) : isJson(b.content) ? (\n                  <JsonView value={JSON.parse(b.content)} defaultDepth={3} />\n                ) : markdown ? (\n                  <Prose text={b.content} markdown />\n                ) : (\n                  <pre className=\"mono text-small whitespace-pre-wrap wrap-break-word text-fg\">{b.content}</pre>\n                )}\n              </div>\n            );\n          case \"reasoning\":\n            return (\n              <ReasoningFrame\n                key={i}\n                heading={t(\"conversationView.reasoning\", \"Reasoning\")}\n                preview={b.redacted ? t(\"conversationView.redacted\", \"Redacted by the provider\") : undefined}\n              >\n                {b.redacted ? (\n                  <p className=\"max-w-prose text-small text-fg-secondary\">\n                    {t(\"conversationView.encrypted\", \"The provider returned this reasoning in encrypted form.\")}\n                  </p>\n                ) : (\n                  <Prose text={b.text} markdown={markdown} small />\n                )}\n              </ReasoningFrame>\n            );\n          case \"image\": {\n            if (b.src && DATA_IMAGE.test(b.src))\n              return (\n                <span key={i} className=\"block w-120 overflow-hidden rounded-well ring-over ring-over-line\">\n                  <img src={b.src} alt={b.alt ?? t(\"conversationView.imageInput\", \"Image input\")} className=\"block h-120 w-120 object-cover\" />\n                </span>\n              );\n            const href = b.src ? webHref(b.src) : null;\n            return href ? (\n              <Link key={i} href={href} external rel=\"noopener noreferrer nofollow\" className=\"w-max max-w-full wrap-anywhere\">\n                {t(\"conversationView.imageFrom\", \"Image from {host}\", { host: new URL(href).host })}\n              </Link>\n            ) : (\n              <span key={i} className=\"inline-flex w-max max-w-full items-center gap-8 text-small text-fg-secondary\">\n                <Icon icon={__icon_Image01Icon} size=\"xs\" /> {t(\"conversationView.image\", \"Image\")}\n                {b.media_type && <span className=\"mono text-fg-tertiary\">{b.media_type}</span>}\n              </span>\n            );\n          }\n          case \"document\":\n            return (\n              <span key={i} className=\"inline-flex w-max max-w-full items-center gap-8 text-small text-fg-secondary\">\n                <Icon icon={__icon_Pdf01Icon} size=\"xs\" />\n                <span className=\"min-w-0 wrap-break-word\">{b.name ?? t(\"conversationView.document\", \"Document\")}</span>\n              </span>\n            );\n          case \"refusal\":\n            return (\n              <Banner key={i} tone=\"warning\" title={t(\"conversationView.refused\", \"The model refused.\")}>\n                {b.text}\n              </Banner>\n            );\n        }\n      })}\n    </div>\n  );\n}\n\nexport interface ConversationViewProps {\n  messages: ConversationMessage[];\n  density?: keyof typeof KAESO_CONVERSATION_VARIANTS.density | undefined;\n  markdown?: boolean | undefined;\n  className?: string | undefined;\n  footer?: ReactNode | undefined;\n}\n\nexport const ConversationView = /* @__PURE__ */ forwardRef<HTMLDivElement, ConversationViewProps>(function ConversationView(\n  { messages, density = \"default\", markdown = false, className, footer },\n  ref,\n) {\n  const t = useUiText();\n  const role = roleNames(t);\n  return (\n    <div ref={ref} className={cn(\"flex flex-col\", KAESO_CONVERSATION_VARIANTS.density[density].classes, className)}>\n      {messages.length === 0 && <p className=\"text-small text-fg-secondary\">{t(\"conversationView.empty\", \"This request has no messages.\")}</p>}\n      {messages.map((m, i) => (\n        <section key={i} aria-label={role[m.role]} className=\"flex flex-col gap-8\">\n          <span className={cn(\"text-caption font-medium\", m.role === \"assistant\" ? \"text-fg\" : \"text-fg-secondary\")}>{role[m.role]}</span>\n          <div className={cn(m.role === \"system\" || m.role === \"developer\" ? \"rounded-well bg-fill-1 px-12 py-12\" : \"\")}>\n            <Blocks blocks={typeof m.content === \"string\" ? [{ type: \"text\", text: m.content }] : m.content} markdown={markdown} />\n          </div>\n        </section>\n      ))}\n      {footer}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") ConversationView.displayName = \"ConversationView\";\n"],"mappings":"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"}

package/dist/components/kaeso/identity.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as CapabilityIcons, n as KAESO_IDENTITY_DEFAULT_VARIANTS, r as KAESO_IDENTITY_VARIANTS, i as KAESO_KEY_DISPLAY_DEFAULT_VARIANTS, a as KAESO_KEY_DISPLAY_VARIANTS, o as KeyDisplay, s as ModelLabel, c as ProviderBadge, l as ProviderCard, u as RequestTimeline, d as StatusCode, f as providerName } from "../../chunks/identity-BmhQ6BQ-.js";
+export { t as CapabilityIcons, n as KAESO_IDENTITY_DEFAULT_VARIANTS, r as KAESO_IDENTITY_VARIANTS, i as KAESO_KEY_DISPLAY_DEFAULT_VARIANTS, a as KAESO_KEY_DISPLAY_VARIANTS, o as KeyDisplay, s as ModelLabel, c as ProviderBadge, l as ProviderCard, u as RequestTimeline, d as StatusCode, f as providerName } from "../../chunks/identity-3Foi5F8w.js";

package/dist/components/kaeso/moments.js

@@ -1,11 +1,11 @@
 "use client";
-import { t as e } from "../../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../../chunks/cn-BjnOAUrA.js";
 import { i as t } from "../../chunks/context-BELWW79w.js";
-import { t as n } from "../../chunks/icon-D7ja-_Yk.js";
-import { n as r } from "../../chunks/button-CzuxqawA.js";
+import { t as n } from "../../chunks/icon-CBzOwqrX.js";
+import { n as r } from "../../chunks/button-IblhXUyZ.js";
 import { t as i } from "../../chunks/use-copy-Dm2ncvMX.js";
-import { t as a } from "../../chunks/copy-button-FJvPJn72.js";
-import { t as o } from "../../chunks/code-block-BZIe_B9l.js";
+import { t as a } from "../../chunks/copy-button-CwU8t_9_.js";
+import { t as o } from "../../chunks/code-block-64e-Cy1S.js";
 import { forwardRef as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { Alert02Icon as u, Copy01Icon as d, Tick02Icon as f } from "@hugeicons/core-free-icons";
@@ -32,7 +32,14 @@ function h({ baseUrl: e, apiKey: t = "$KAESO_API_KEY", model: n = "gpt-5" }) {
 	];
 }
 var g = /* @__PURE__ */ s(function({ secret: a, name: s, baseUrl: p, model: m, onCopied: g, snippets: _, className: v }, y) {
-	let b = t(), { copied: x, copy: S } = i(2400), C = b("secretReveal.copyKey", "Copy key"), w = b("secretReveal.copied", "Copied");
+	let b = t(), { copied: x, copy: S } = i(2400), C = b("secretReveal.copyKey", "Copy key"), w = b("secretReveal.copied", "Key copied"), T = _ || [{
+		label: ".env",
+		lang: "bash",
+		code: `KAESO_BASE_URL=${p}/v1\nKAESO_API_KEY=${a}`
+	}, ...h({
+		baseUrl: p,
+		...m ? { model: m } : {}
+	})];
 	return /* @__PURE__ */ l("div", {
 		ref: y,
 		className: e("flex flex-col gap-24", v),
@@ -43,7 +50,7 @@ var g = /* @__PURE__ */ s(function({ secret: a, name: s, baseUrl: p, model: m, o
 					tabIndex: 0,
 					role: "textbox",
 					"aria-readonly": !0,
-					"aria-label": typeof s == "string" ? b("secretReveal.secretFor", "Secret for {name}", { name: s }) : b("secretReveal.secret", "Secret"),
+					"aria-label": typeof s == "string" ? b("secretReveal.keyFor", "Key for {name}", { name: s }) : b("secretReveal.key", "Key"),
 					onClick: (e) => {
 						let t = document.createRange();
 						t.selectNodeContents(e.currentTarget);
@@ -53,6 +60,13 @@ var g = /* @__PURE__ */ s(function({ secret: a, name: s, baseUrl: p, model: m, o
 					className: "w-full cursor-text rounded-well bg-fill-1 px-20 py-16 mono text-body-lg leading-code break-all text-fg select-all focus-ring",
 					children: a
 				}),
+				/* @__PURE__ */ l("p", {
+					className: "inline-flex items-center gap-6 text-body text-warning-text",
+					children: [/* @__PURE__ */ c(n, {
+						icon: u,
+						size: "sm"
+					}), b("secretReveal.shownOnce", "Shown once. Store it now.")]
+				}),
 				/* @__PURE__ */ c(r, {
 					variant: "primary",
 					size: "xl",
@@ -62,21 +76,10 @@ var g = /* @__PURE__ */ s(function({ secret: a, name: s, baseUrl: p, model: m, o
 						await S(a) && g?.();
 					},
 					children: x ? w : C
-				}),
-				/* @__PURE__ */ l("p", {
-					className: "inline-flex items-center gap-6 text-body text-warning-text",
-					children: [/* @__PURE__ */ c(n, {
-						icon: u,
-						size: "sm"
-					}), b("secretReveal.shownOnce", "Shown once. Store it now.")]
 				})
 			]
 		}), _ !== !1 && /* @__PURE__ */ c(o, {
-			tabs: _ ?? h({
-				baseUrl: p,
-				apiKey: a,
-				...m ? { model: m } : {}
-			}),
+			tabs: T,
 			copy: !0
 		})]
 	});
@@ -102,7 +105,7 @@ var _ = /* @__PURE__ */ s(function({ baseUrl: n, apiKey: r = "$KAESO_API_KEY", m
 				className: "flex min-w-0 flex-col gap-6",
 				children: [/* @__PURE__ */ c("span", {
 					className: "text-small font-medium text-fg-secondary",
-					children: d("environmentSnippet.apiKey", "API key")
+					children: d("environmentSnippet.apiKeyVariable", "API key variable")
 				}), /* @__PURE__ */ c(a, {
 					value: r,
 					label: d("environmentSnippet.copyVariableName", "Copy variable name")

package/dist/components/kaeso/moments.js.map

@@ -1 +1 @@
-{"version":3,"file":"moments.js","names":["__icon_Tick02Icon","__icon_Copy01Icon","__icon_Alert02Icon","cn","useUiText","Icon","Button","useCopy","ClipboardText","CodeBlock","KAESO_MOMENTS_VARIANTS","KAESO_MOMENTS_DEFAULT_VARIANTS","sdkSnippets","envKey","apiKey","nodeKey","baseUrl","model","SecretReveal","t","copyKey","done","className","name","range","selection","secret","copied","Tick02Icon","Copy01Icon","copy","onCopied","Alert02Icon","snippets","EnvironmentSnippet"],"sources":["../../../src/components/kaeso/moments.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Tick02Icon as __icon_Tick02Icon, Copy01Icon as __icon_Copy01Icon, Alert02Icon as __icon_Alert02Icon } from \"@hugeicons/core-free-icons\";\nimport { useCopy } from \"../../hooks/use-copy.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Button } from \"../button/button.js\";\nimport { CodeBlock, type CodeTab } from \"../code-block/code-block.js\";\nimport { ClipboardText } from \"../copy-button/copy-button.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_MOMENTS_VARIANTS = {\n  secret: { md: { classes: \"rounded-well bg-fill-1 px-20 py-16\" } },\n} as const;\nexport const KAESO_MOMENTS_DEFAULT_VARIANTS = { secret: \"md\" } as const;\n\nexport interface SnippetOptions {\n  baseUrl: string;\n  apiKey?: string | undefined;\n  model?: string | undefined;\n}\n\nexport function sdkSnippets({ baseUrl, apiKey = \"$KAESO_API_KEY\", model = \"gpt-5\" }: SnippetOptions): CodeTab[] {\n  const envKey = apiKey.startsWith(\"$\") ? `os.environ[\"${apiKey.slice(1)}\"]` : `\"${apiKey}\"`;\n  const nodeKey = apiKey.startsWith(\"$\") ? `process.env.${apiKey.slice(1)}` : `\"${apiKey}\"`;\n  return [\n    {\n      label: \"Python\",\n      lang: \"python\",\n      code: `from openai import OpenAI\\n${apiKey.startsWith(\"$\") ? \"import os\\n\" : \"\"}\\nclient = OpenAI(\\n    base_url=\"${baseUrl}/v1\",\\n    api_key=${envKey},\\n)\\n\\nresponse = client.responses.create(\\n    model=\"${model}\",\\n    input=\"Write one sentence about gateways.\",\\n)\\nprint(response.output_text)`,\n    },\n    {\n      label: \"Node\",\n      lang: \"ts\",\n      code: `import OpenAI from \"openai\";\\n\\nconst client = new OpenAI({\\n  baseURL: \"${baseUrl}/v1\",\\n  apiKey: ${nodeKey},\\n});\\n\\nconst response = await client.responses.create({\\n  model: \"${model}\",\\n  input: \"Write one sentence about gateways.\",\\n});\\nconsole.log(response.output_text);`,\n    },\n    {\n      label: \"curl\",\n      lang: \"bash\",\n      code: `${apiKey.startsWith(\"$\") ? \"\" : `KAESO_API_KEY=${apiKey}\\n`}curl ${baseUrl}/v1/responses \\\\\\n  -H \"Authorization: Bearer ${apiKey.startsWith(\"$\") ? apiKey : \"$KAESO_API_KEY\"}\" \\\\\\n  -H \"Content-Type: application/json\" \\\\\\n  -d '{\\n    \"model\": \"${model}\",\\n    \"input\": \"Write one sentence about gateways.\"\\n  }'`,\n    },\n  ];\n}\n\nexport interface SecretRevealProps extends SnippetOptions {\n  secret: string;\n  name?: ReactNode | undefined;\n  onCopied?: (() => void) | undefined;\n  snippets?: CodeTab[] | false | undefined;\n  className?: string | undefined;\n}\n\nexport const SecretReveal = /* @__PURE__ */ forwardRef<HTMLDivElement, SecretRevealProps>(function SecretReveal(\n  { secret, name, baseUrl, model, onCopied, snippets, className },\n  ref,\n) {\n  const t = useUiText();\n  const { copied, copy } = useCopy(2400);\n  const copyKey = t(\"secretReveal.copyKey\", \"Copy key\");\n  const done = t(\"secretReveal.copied\", \"Copied\");\n  return (\n    <div ref={ref} className={cn(\"flex flex-col gap-24\", className)}>\n      <div className=\"flex flex-col items-center gap-16 text-center\">\n        <div\n          tabIndex={0}\n          role=\"textbox\"\n          aria-readonly\n          aria-label={typeof name === \"string\" ? t(\"secretReveal.secretFor\", \"Secret for {name}\", { name }) : t(\"secretReveal.secret\", \"Secret\")}\n          onClick={(e) => {\n            const range = document.createRange();\n            range.selectNodeContents(e.currentTarget);\n            const selection = window.getSelection();\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }}\n          className=\"w-full cursor-text rounded-well bg-fill-1 px-20 py-16 mono text-body-lg leading-code break-all text-fg select-all focus-ring\"\n        >\n          {secret}\n        </div>\n        <Button\n          variant=\"primary\"\n          size=\"xl\"\n          leadingIcon={copied ? __icon_Tick02Icon : __icon_Copy01Icon}\n          reserveLabels={[copyKey, done]}\n          onClick={async () => {\n            if (await copy(secret)) onCopied?.();\n          }}\n        >\n          {copied ? done : copyKey}\n        </Button>\n        <p className=\"inline-flex items-center gap-6 text-body text-warning-text\">\n          <Icon icon={__icon_Alert02Icon} size=\"sm\" />\n          {t(\"secretReveal.shownOnce\", \"Shown once. Store it now.\")}\n        </p>\n      </div>\n      {snippets !== false && <CodeBlock tabs={snippets ?? sdkSnippets({ baseUrl, apiKey: secret, ...(model ? { model } : {}) })} copy />}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") SecretReveal.displayName = \"SecretReveal\";\n\nexport const EnvironmentSnippet = /* @__PURE__ */ forwardRef<HTMLDivElement, SnippetOptions & { className?: string | undefined }>(function EnvironmentSnippet(\n  { baseUrl, apiKey = \"$KAESO_API_KEY\", model, className },\n  ref,\n) {\n  const t = useUiText();\n  return (\n    <div ref={ref} className={cn(\"flex flex-col gap-16\", className)}>\n      <div className=\"grid gap-12 md:grid-cols-2\">\n        <div className=\"flex min-w-0 flex-col gap-6\">\n          <span className=\"text-small font-medium text-fg-secondary\">{t(\"environmentSnippet.baseUrl\", \"Base URL\")}</span>\n          <ClipboardText value={`${baseUrl}/v1`} label={t(\"environmentSnippet.copyBaseUrl\", \"Copy base URL\")} />\n        </div>\n        <div className=\"flex min-w-0 flex-col gap-6\">\n          <span className=\"text-small font-medium text-fg-secondary\">{t(\"environmentSnippet.apiKey\", \"API key\")}</span>\n          <ClipboardText value={apiKey} label={t(\"environmentSnippet.copyVariableName\", \"Copy variable name\")} />\n        </div>\n      </div>\n      <CodeBlock tabs={sdkSnippets({ baseUrl, apiKey, ...(model ? { model } : {}) })} />\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") EnvironmentSnippet.displayName = \"EnvironmentSnippet\";\n"],"mappings":"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"}
+{"version":3,"file":"moments.js","names":["__icon_Alert02Icon","__icon_Tick02Icon","__icon_Copy01Icon","cn","useUiText","Icon","Button","useCopy","ClipboardText","CodeBlock","KAESO_MOMENTS_VARIANTS","KAESO_MOMENTS_DEFAULT_VARIANTS","sdkSnippets","envKey","apiKey","nodeKey","baseUrl","model","SecretReveal","t","copyKey","done","tabs","snippets","secret","className","name","range","selection","Alert02Icon","copied","Tick02Icon","Copy01Icon","copy","onCopied","EnvironmentSnippet"],"sources":["../../../src/components/kaeso/moments.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Alert02Icon as __icon_Alert02Icon, Tick02Icon as __icon_Tick02Icon, Copy01Icon as __icon_Copy01Icon } from \"@hugeicons/core-free-icons\";\nimport { useCopy } from \"../../hooks/use-copy.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Button } from \"../button/button.js\";\nimport { CodeBlock, type CodeTab } from \"../code-block/code-block.js\";\nimport { ClipboardText } from \"../copy-button/copy-button.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_MOMENTS_VARIANTS = {\n  secret: { md: { classes: \"rounded-well bg-fill-1 px-20 py-16\" } },\n} as const;\nexport const KAESO_MOMENTS_DEFAULT_VARIANTS = { secret: \"md\" } as const;\n\nexport interface SnippetOptions {\n  baseUrl: string;\n  apiKey?: string | undefined;\n  model?: string | undefined;\n}\n\nexport function sdkSnippets({ baseUrl, apiKey = \"$KAESO_API_KEY\", model = \"gpt-5\" }: SnippetOptions): CodeTab[] {\n  const envKey = apiKey.startsWith(\"$\") ? `os.environ[\"${apiKey.slice(1)}\"]` : `\"${apiKey}\"`;\n  const nodeKey = apiKey.startsWith(\"$\") ? `process.env.${apiKey.slice(1)}` : `\"${apiKey}\"`;\n  return [\n    {\n      label: \"Python\",\n      lang: \"python\",\n      code: `from openai import OpenAI\\n${apiKey.startsWith(\"$\") ? \"import os\\n\" : \"\"}\\nclient = OpenAI(\\n    base_url=\"${baseUrl}/v1\",\\n    api_key=${envKey},\\n)\\n\\nresponse = client.responses.create(\\n    model=\"${model}\",\\n    input=\"Write one sentence about gateways.\",\\n)\\nprint(response.output_text)`,\n    },\n    {\n      label: \"Node\",\n      lang: \"ts\",\n      code: `import OpenAI from \"openai\";\\n\\nconst client = new OpenAI({\\n  baseURL: \"${baseUrl}/v1\",\\n  apiKey: ${nodeKey},\\n});\\n\\nconst response = await client.responses.create({\\n  model: \"${model}\",\\n  input: \"Write one sentence about gateways.\",\\n});\\nconsole.log(response.output_text);`,\n    },\n    {\n      label: \"curl\",\n      lang: \"bash\",\n      code: `${apiKey.startsWith(\"$\") ? \"\" : `KAESO_API_KEY=${apiKey}\\n`}curl ${baseUrl}/v1/responses \\\\\\n  -H \"Authorization: Bearer ${apiKey.startsWith(\"$\") ? apiKey : \"$KAESO_API_KEY\"}\" \\\\\\n  -H \"Content-Type: application/json\" \\\\\\n  -d '{\\n    \"model\": \"${model}\",\\n    \"input\": \"Write one sentence about gateways.\"\\n  }'`,\n    },\n  ];\n}\n\nexport interface SecretRevealProps extends SnippetOptions {\n  secret: string;\n  name?: ReactNode | undefined;\n  onCopied?: (() => void) | undefined;\n  snippets?: CodeTab[] | false | undefined;\n  className?: string | undefined;\n}\n\nexport const SecretReveal = /* @__PURE__ */ forwardRef<HTMLDivElement, SecretRevealProps>(function SecretReveal(\n  { secret, name, baseUrl, model, onCopied, snippets, className },\n  ref,\n) {\n  const t = useUiText();\n  const { copied, copy } = useCopy(2400);\n  const copyKey = t(\"secretReveal.copyKey\", \"Copy key\");\n  const done = t(\"secretReveal.copied\", \"Key copied\");\n  const tabs = snippets || [\n    { label: \".env\", lang: \"bash\" as const, code: `KAESO_BASE_URL=${baseUrl}/v1\\nKAESO_API_KEY=${secret}` },\n    ...sdkSnippets({ baseUrl, ...(model ? { model } : {}) }),\n  ];\n  return (\n    <div ref={ref} className={cn(\"flex flex-col gap-24\", className)}>\n      <div className=\"flex flex-col items-center gap-16 text-center\">\n        <div\n          tabIndex={0}\n          role=\"textbox\"\n          aria-readonly\n          aria-label={typeof name === \"string\" ? t(\"secretReveal.keyFor\", \"Key for {name}\", { name }) : t(\"secretReveal.key\", \"Key\")}\n          onClick={(e) => {\n            const range = document.createRange();\n            range.selectNodeContents(e.currentTarget);\n            const selection = window.getSelection();\n            selection?.removeAllRanges();\n            selection?.addRange(range);\n          }}\n          className=\"w-full cursor-text rounded-well bg-fill-1 px-20 py-16 mono text-body-lg leading-code break-all text-fg select-all focus-ring\"\n        >\n          {secret}\n        </div>\n        <p className=\"inline-flex items-center gap-6 text-body text-warning-text\">\n          <Icon icon={__icon_Alert02Icon} size=\"sm\" />\n          {t(\"secretReveal.shownOnce\", \"Shown once. Store it now.\")}\n        </p>\n        <Button\n          variant=\"primary\"\n          size=\"xl\"\n          leadingIcon={copied ? __icon_Tick02Icon : __icon_Copy01Icon}\n          reserveLabels={[copyKey, done]}\n          onClick={async () => {\n            if (await copy(secret)) onCopied?.();\n          }}\n        >\n          {copied ? done : copyKey}\n        </Button>\n      </div>\n      {snippets !== false && <CodeBlock tabs={tabs} copy />}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") SecretReveal.displayName = \"SecretReveal\";\n\nexport const EnvironmentSnippet = /* @__PURE__ */ forwardRef<HTMLDivElement, SnippetOptions & { className?: string | undefined }>(function EnvironmentSnippet(\n  { baseUrl, apiKey = \"$KAESO_API_KEY\", model, className },\n  ref,\n) {\n  const t = useUiText();\n  return (\n    <div ref={ref} className={cn(\"flex flex-col gap-16\", className)}>\n      <div className=\"grid gap-12 md:grid-cols-2\">\n        <div className=\"flex min-w-0 flex-col gap-6\">\n          <span className=\"text-small font-medium text-fg-secondary\">{t(\"environmentSnippet.baseUrl\", \"Base URL\")}</span>\n          <ClipboardText value={`${baseUrl}/v1`} label={t(\"environmentSnippet.copyBaseUrl\", \"Copy base URL\")} />\n        </div>\n        <div className=\"flex min-w-0 flex-col gap-6\">\n          <span className=\"text-small font-medium text-fg-secondary\">{t(\"environmentSnippet.apiKeyVariable\", \"API key variable\")}</span>\n          <ClipboardText value={apiKey} label={t(\"environmentSnippet.copyVariableName\", \"Copy variable name\")} />\n        </div>\n      </div>\n      <CodeBlock tabs={sdkSnippets({ baseUrl, apiKey, ...(model ? { model } : {}) })} />\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") EnvironmentSnippet.displayName = \"EnvironmentSnippet\";\n"],"mappings":";;;;;;;;;;;;AAUA,IAAaU,IAAyB,EACpC,QAAQ,EAAE,IAAI,EAAE,SAAS,qCAAqC,EAAE,EAClE,GACaC,IAAiC,EAAE,QAAQ,KAAK;AAQ7D,SAAgBC,EAAY,EAAE,YAAS,YAAS,kBAAkB,WAAQ,WAAsC;CAC9G,IAAMC,IAASC,EAAO,WAAW,GAAG,IAAI,eAAeA,EAAO,MAAM,CAAC,EAAE,MAAM,IAAIA,EAAO,IAClFC,IAAUD,EAAO,WAAW,GAAG,IAAI,eAAeA,EAAO,MAAM,CAAC,MAAM,IAAIA,EAAO;CACvF,OAAO;EACL;GACE,OAAO;GACP,MAAM;GACN,MAAM,8BAA8BA,EAAO,WAAW,GAAG,IAAI,gBAAgB,GAAG,oCAAoCE,EAAQ,qBAAqBH,EAAO,0DAA0DI,EAAM;EAC1N;EACA;GACE,OAAO;GACP,MAAM;GACN,MAAM,4EAA4ED,EAAQ,mBAAmBD,EAAQ,wEAAwEE,EAAM;EACrM;EACA;GACE,OAAO;GACP,MAAM;GACN,MAAM,GAAGH,EAAO,WAAW,GAAG,IAAI,KAAK,iBAAiBA,EAAO,IAAI,OAAOE,EAAQ,gDAAgDF,EAAO,WAAW,GAAG,IAAIA,IAAS,iBAAiB,yEAAyEG,EAAM;EACtQ;CACF;AACF;AAUA,IAAaC,IAA+B,kBAA8C,SACxF,EAAE,WAAQ,SAAM,YAAS,UAAO,aAAU,aAAU,gBACpD,GACA;CACA,IAAMC,IAAIf,EAAU,GACd,EAAE,WAAQ,YAASG,EAAQ,IAAI,GAC/Ba,IAAUD,EAAE,wBAAwB,UAAU,GAC9CE,IAAOF,EAAE,uBAAuB,YAAY,GAC5CG,IAAOC,KAAY,CACvB;EAAE,OAAO;EAAQ,MAAM;EAAiB,MAAM,kBAAkBP,EAAQ,qBAAqBQ;CAAS,GACtG,GAAGZ,EAAY;EAAE;EAAS,GAAIK,IAAQ,EAAE,SAAM,IAAI,CAAC;CAAG,CAAC,CACzD;CACA,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWd,EAAG,wBAAwBsB,CAAS;EAA9D,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,OAAD;KACE,UAAU;KACV,MAAK;KACL,iBAAA;KACA,cAAY,OAAOC,KAAS,WAAWP,EAAE,uBAAuB,kBAAkB,EAAE,QAAK,CAAC,IAAIA,EAAE,oBAAoB,KAAK;KACzH,UAAU,MAAM;MACd,IAAMQ,IAAQ,SAAS,YAAY;MACnC,EAAM,mBAAmB,EAAE,aAAa;MACxC,IAAMC,IAAY,OAAO,aAAa;MAEtC,AADAA,GAAW,gBAAgB,GAC3BA,GAAW,SAASD,CAAK;KAC3B;KACA,WAAU;KAET,UAAAH;IACE,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;KAAb,UAAA,CACE,kBAACnB,GAAD;MAAM,MAAML;MAAoB,MAAK;KAAM,CAAA,GAC1CmB,EAAE,0BAA0B,2BAA2B,CACvD;;IACH,kBAACb,GAAD;KACE,SAAQ;KACR,MAAK;KACL,aAAawB,IAAS7B,IAAoBC;KAC1C,eAAe,CAACkB,GAASC,CAAI;KAC7B,SAAS,YAAY;MACnB,AAAI,MAAMY,EAAKT,CAAM,KAAGU,IAAW;KACrC;KAEC,UAAAJ,IAAST,IAAOD;IACX,CAAA;GACL;EACJ,CAAA,GAAAG,MAAa,MAAS,kBAACd,GAAD;GAAiB;GAAM,MAAA;EAAM,CAAA,CACjD;;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAa,cAAc;AAEtE,IAAa0B,IAAqC,kBAAgF,SAChI,EAAE,YAAS,YAAS,kBAAkB,UAAO,gBAC7C,GACA;CACA,IAAMhB,IAAIf,EAAU;CACpB,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWD,EAAG,wBAAwBsB,CAAS;EAA9D,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAA4C,UAAAN,EAAE,8BAA8B,UAAU;IAAQ,CAAA,GAC9G,kBAACX,GAAD;KAAe,OAAO,GAAGQ,EAAQ;KAAM,OAAOG,EAAE,kCAAkC,eAAe;IAAI,CAAA,CAClG;GACL,CAAA,GAAA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAA4C,UAAAA,EAAE,qCAAqC,kBAAkB;IAAQ,CAAA,GAC7H,kBAACX,GAAD;KAAe,OAAOM;KAAQ,OAAOK,EAAE,uCAAuC,oBAAoB;IAAI,CAAA,CACnG;GACF,CAAA,CAAA;EACL,CAAA,GAAA,kBAACV,GAAD,EAAW,MAAMG,EAAY;GAAE;GAAS;GAAQ,GAAIK,IAAQ,EAAE,SAAM,IAAI,CAAC;EAAG,CAAC,EAAI,CAAA,CAC9E;;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAmB,cAAc"}

package/dist/components/kaeso/rights.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as KAESO_RIGHTS_MATRIX_DEFAULT_VARIANTS, n as KAESO_RIGHTS_MATRIX_VARIANTS, r as RightsMatrix } from "../../chunks/rights-Cyp0Pzp-.js";
+export { t as KAESO_RIGHTS_MATRIX_DEFAULT_VARIANTS, n as KAESO_RIGHTS_MATRIX_VARIANTS, r as RightsMatrix } from "../../chunks/rights-B68ocZuq.js";

package/dist/components/kaeso/usage.js

@@ -1,101 +1,117 @@
 "use client";
-import { t as e } from "../../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../../chunks/cn-BjnOAUrA.js";
 import { i as t } from "../../chunks/context-BELWW79w.js";
 import { formatNumber as n, formatTokens as r } from "../../format.js";
-import { t as i } from "../../chunks/icon-D7ja-_Yk.js";
-import { a } from "../../chunks/meter-Bj4N3Xuh.js";
-import { t as o } from "../../chunks/badge-C2KtxCLB.js";
-import { C as s, c, l } from "../../chunks/core-BYns5ytV.js";
-import { forwardRef as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Layers01Icon as p, LeftToRightListBulletIcon as m, Wallet01Icon as h } from "@hugeicons/core-free-icons";
+import { t as i } from "../../chunks/icon-CBzOwqrX.js";
+import { r as a } from "../../chunks/tooltip-Tkm-urbi.js";
+import { r as o } from "../../chunks/text-DkKdTVUf.js";
+import { a as s } from "../../chunks/meter-CASMHlxl.js";
+import { t as c } from "../../chunks/badge-C0GC3B9X.js";
+import { C as l, M as u, c as d, l as f, w as p } from "../../chunks/core-CmK-8ObW.js";
+import { forwardRef as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Layers01Icon as v, LeftToRightListBulletIcon as y, Wallet01Icon as b } from "@hugeicons/core-free-icons";
 //#region src/components/kaeso/usage.tsx
-var g = { limit: {
+var x = { limit: {
 	hard: { classes: "" },
 	soft: { classes: "" }
-} }, _ = { limit: "hard" }, v = l;
-function y(e) {
-	return {
-		input: e("usageBreakdown.input", "Input"),
-		output: e("usageBreakdown.output", "Output"),
-		cacheRead: e("usageBreakdown.cacheRead", "Cache read"),
-		cacheWrite: e("usageBreakdown.cacheWrite", "Cache write"),
-		reasoning: e("usageBreakdown.reasoning", "Reasoning")
-	};
-}
-var b = {}, x = {}, S = /* @__PURE__ */ u(function({ tokens: i, className: a }, o) {
-	let l = t(), u = y(l), p = v.filter((e) => (i[e] ?? 0) > 0), m = p.reduce((e, t) => e + (i[t] ?? 0), 0) || 1;
-	return /* @__PURE__ */ f("div", {
-		ref: o,
-		className: e("flex flex-col gap-12", a),
-		children: [/* @__PURE__ */ d("div", {
+} }, S = { limit: "hard" }, C = f, w = {}, T = {}, E = /* @__PURE__ */ m(function({ tokens: i, className: o }, s) {
+	let c = t(), f = C.filter((e) => (i[e] ?? 0) > 0), m = f.reduce((e, t) => e + (i[t] ?? 0), 0) || 1;
+	return /* @__PURE__ */ _("div", {
+		ref: s,
+		className: e("flex flex-col gap-12", o),
+		children: [/* @__PURE__ */ g("div", {
 			role: "img",
-			"aria-label": l("usageBreakdown.tokens", "Tokens: {list}", { list: p.map((e) => l("usageBreakdown.kindCount", "{kind} {count}", {
-				kind: u[e],
+			"aria-label": c("usageBreakdown.tokens", "Tokens: {list}", { list: f.map((e) => c("usageBreakdown.kindCount", "{kind} {count}", {
+				kind: p(e, c),
 				count: n(i[e] ?? 0)
-			})).join(l("usageBreakdown.listSeparator", ", ")) }),
-			className: "flex h-8 w-full gap-2 overflow-hidden rounded-pill",
-			children: p.map((e) => /* @__PURE__ */ d("span", {
-				className: "h-full min-w-2 first:rounded-l-pill last:rounded-r-pill width-motion",
-				style: {
-					width: `${(i[e] ?? 0) / m * 100}%`,
-					background: s(e)
-				}
-			}, e))
-		}), /* @__PURE__ */ d("dl", {
+			})).join(c("usageBreakdown.listSeparator", ", ")) }),
+			className: e("flex h-8 w-full gap-2 overflow-hidden rounded-pill", f.length === 0 && "bg-fill-2"),
+			children: f.map((e) => {
+				let t = u(l(e));
+				return /* @__PURE__ */ g("span", {
+					className: "h-full min-w-2 data-mark first:rounded-l-pill last:rounded-r-pill width-motion",
+					style: {
+						width: `${(i[e] ?? 0) / m * 100}%`,
+						background: l(e),
+						...t ? { boxShadow: `inset 0 0 0 1px ${t}` } : {}
+					}
+				}, e);
+			})
+		}), /* @__PURE__ */ g("dl", {
 			className: "flex flex-wrap gap-x-24 gap-y-8",
-			children: v.filter((e) => i[e] !== void 0).map((e) => /* @__PURE__ */ f("div", {
-				className: "flex flex-col gap-2",
-				children: [/* @__PURE__ */ f("dt", {
-					className: "flex items-center gap-8 text-small text-fg-secondary",
-					children: [/* @__PURE__ */ d(c, { color: s(e) }), u[e]]
-				}), /* @__PURE__ */ d("dd", {
-					className: "pl-18 text-body font-medium text-fg tabular",
-					title: l("usageBreakdown.tokenCount", "{count} tokens", { count: n(i[e] ?? 0) }),
-					children: r(i[e] ?? 0)
-				})]
-			}, e))
+			children: C.filter((e) => i[e] !== void 0).map((e) => {
+				let t = i[e] ?? 0, o = r(t), s = c("usageBreakdown.tokenCount", "{count} tokens", { count: n(t) });
+				return /* @__PURE__ */ _("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ _("dt", {
+						className: "flex items-center gap-8 text-small text-fg-secondary",
+						children: [/* @__PURE__ */ g(d, { color: l(e) }), p(e, c)]
+					}), /* @__PURE__ */ g("dd", {
+						className: "pl-18 text-body font-medium text-fg tabular",
+						children: Math.abs(t) < 1e3 ? o : /* @__PURE__ */ g(a, {
+							content: s,
+							children: /* @__PURE__ */ g("span", {
+								tabIndex: 0,
+								"aria-label": s,
+								className: "rounded-code focus-ring",
+								children: o
+							})
+						})
+					})]
+				}, e);
+			})
 		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (S.displayName = "UsageBreakdown");
-var C = {
-	requests: m,
-	tokens: p,
-	spend: h
-}, w = /* @__PURE__ */ u(function({ kind: e, scope: n, window: r, used: s, limit: c, valueLabel: l, hard: u = !0, alerts: p = [.8], resets: m, className: h }, g) {
-	let _ = t();
-	return /* @__PURE__ */ d(a, {
-		ref: g,
-		className: h,
-		value: c > 0 ? s / c : 0,
+process.env.NODE_ENV !== "production" && (E.displayName = "UsageBreakdown");
+var D = {
+	requests: y,
+	tokens: v,
+	spend: b
+}, O = /* @__PURE__ */ m(function({ kind: n, scope: r, window: a, used: l, limit: u, valueLabel: d, hard: f = !0, alerts: p = [.8], resets: m, className: v }, y) {
+	let b = t(), x = u > 0 && l > u, S = b("limitMeter.label", "{kind, select, requests {requests limit} tokens {tokens limit} other {spend limit}}", { kind: n });
+	return /* @__PURE__ */ g(s, {
+		ref: y,
+		className: v,
+		value: u > 0 ? l / u : 0,
 		thresholds: p,
-		leading: /* @__PURE__ */ d(i, {
-			icon: C[e],
+		leading: /* @__PURE__ */ g(i, {
+			icon: D[n],
 			size: "sm",
 			className: "text-fg-secondary"
 		}),
-		label: n,
-		trailing: /* @__PURE__ */ d(o, {
-			tone: u ? "neutral" : "outline",
-			children: u ? _("limitMeter.hard", "Hard") : _("limitMeter.soft", "Soft")
+		label: typeof r == "string" ? /* @__PURE__ */ g(o, {
+			truncate: !0,
+			children: r
+		}) : r,
+		trailing: /* @__PURE__ */ g(c, {
+			tone: f ? "neutral" : "outline",
+			children: f ? b("limitMeter.hard", "Hard limit") : b("limitMeter.soft", "Soft limit")
 		}),
-		caption: /* @__PURE__ */ f("span", {
+		caption: /* @__PURE__ */ _("span", {
 			className: "flex flex-wrap items-baseline justify-between gap-x-12 gap-y-2",
-			children: [/* @__PURE__ */ f("span", { children: [
-				/* @__PURE__ */ d("span", {
+			children: [/* @__PURE__ */ _("span", { children: [
+				x && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("span", {
+					className: e("font-medium", f ? "text-danger-text" : "text-warning-text"),
+					children: f ? b("limitMeter.overHard", "Over the limit, requests refused") : b("limitMeter.overSoft", "Over the limit, alerts only")
+				}), " · "] }),
+				/* @__PURE__ */ g("span", {
 					className: "font-medium text-fg-secondary tabular",
-					children: l
+					children: d
 				}),
 				" · ",
-				r
-			] }), m && /* @__PURE__ */ d("span", { children: m })]
+				a
+			] }), m && /* @__PURE__ */ g("span", { children: m })]
 		}),
-		"aria-label": _("limitMeter.label", "{kind, select, requests {requests limit} tokens {tokens limit} other {spend limit}}", { kind: e })
+		"aria-label": typeof r == "string" ? b("limitMeter.scopedLabel", "{scope}, {limit}", {
+			scope: r,
+			limit: S
+		}) : S
 	});
 });
-process.env.NODE_ENV !== "production" && (w.displayName = "LimitMeter");
+process.env.NODE_ENV !== "production" && (O.displayName = "LimitMeter");
 //#endregion
-export { x as KAESO_USAGE_BREAKDOWN_DEFAULT_VARIANTS, b as KAESO_USAGE_BREAKDOWN_VARIANTS, _ as KAESO_USAGE_DEFAULT_VARIANTS, g as KAESO_USAGE_VARIANTS, w as LimitMeter, S as UsageBreakdown };
+export { T as KAESO_USAGE_BREAKDOWN_DEFAULT_VARIANTS, w as KAESO_USAGE_BREAKDOWN_VARIANTS, S as KAESO_USAGE_DEFAULT_VARIANTS, x as KAESO_USAGE_VARIANTS, O as LimitMeter, E as UsageBreakdown };
 
 //# sourceMappingURL=usage.js.map