@chatsdk-dev/elements 0.1.2 → 0.2.0

package/dist/features/chat/conversation/message/part.js

@@ -0,0 +1,35 @@
+"use client";
+import { useMessage } from "./provider.js";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/features/chat/conversation/message/part.tsx
+function usePart(type) {
+	const ctx = use(PartContext);
+	if (!ctx) throw new Error("usePart must be used within Message.Parts");
+	return normalizePartType(ctx.part.type) === type ? ctx : null;
+}
+const PartContext = createContext(null);
+function PartProvider({ part, index, children }) {
+	return /* @__PURE__ */ jsx(PartContext, {
+		value: {
+			part,
+			index
+		},
+		children
+	});
+}
+function normalizePartType(type) {
+	return type === "dynamic-tool" || type.startsWith("tool-") ? "tool" : type;
+}
+function MessageParts({ children }) {
+	const { message } = useMessage();
+	return message.parts.map((part, index) => /* @__PURE__ */ jsx(PartProvider, {
+		part,
+		index,
+		children
+	}, `${message.id}-${index}`));
+}
+//#endregion
+export { MessageParts, PartProvider, usePart };
+
+//# sourceMappingURL=part.js.map

package/dist/features/chat/conversation/message/part.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"part.js","names":[],"sources":["../../../../../src/features/chat/conversation/message/part.tsx"],"sourcesContent":["\"use client\";\n\nimport type { UIMessage } from \"ai\";\nimport { createContext, use } from \"react\";\n\nimport { useMessage } from \"./provider\";\n\ntype Part = UIMessage[\"parts\"][number];\n\n// A renderer claims a part by calling this; null = \"not mine, render nothing\".\nexport function usePart(type: string): { part: Part; index: number } | null {\n  const ctx = use(PartContext);\n  if (!ctx) throw new Error(\"usePart must be used within Message.Parts\");\n  return normalizePartType(ctx.part.type as string) === type ? ctx : null;\n}\n\nconst PartContext = createContext<{ part: Part; index: number } | null>(null);\n\nexport function PartProvider({\n  part,\n  index,\n  children,\n}: {\n  part: Part;\n  index: number;\n  children: React.ReactNode;\n}) {\n  return <PartContext value={{ part, index }}>{children}</PartContext>;\n}\n\n// dynamic-tool + tool-* collapse to \"tool\"\nfunction normalizePartType(type: string): string {\n  return type === \"dynamic-tool\" || type.startsWith(\"tool-\") ? \"tool\" : type;\n}\n\nexport function MessageParts({ children }: { children: React.ReactNode }) {\n  const { message } = useMessage();\n\n  return message.parts.map((part, index) => (\n    <PartProvider key={`${message.id}-${index}`} part={part} index={index}>\n      {children}\n    </PartProvider>\n  ));\n}\n"],"mappings":";;;;;AAUA,SAAgB,QAAQ,MAAoD;CAC1E,MAAM,MAAM,IAAI,WAAW;CAC3B,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,2CAA2C;CACrE,OAAO,kBAAkB,IAAI,KAAK,IAAc,MAAM,OAAO,MAAM;AACrE;AAEA,MAAM,cAAc,cAAoD,IAAI;AAE5E,SAAgB,aAAa,EAC3B,MACA,OACA,YAKC;CACD,OAAO,oBAAC,aAAD;EAAa,OAAO;GAAE;GAAM;EAAM;EAAI;CAAsB,CAAA;AACrE;AAGA,SAAS,kBAAkB,MAAsB;CAC/C,OAAO,SAAS,kBAAkB,KAAK,WAAW,OAAO,IAAI,SAAS;AACxE;AAEA,SAAgB,aAAa,EAAE,YAA2C;CACxE,MAAM,EAAE,YAAY,WAAW;CAE/B,OAAO,QAAQ,MAAM,KAAK,MAAM,UAC9B,oBAAC,cAAD;EAAmD;EAAa;EAC7D;CACW,GAFK,GAAG,QAAQ,GAAG,GAAG,OAEtB,CACf;AACH"}

package/dist/features/chat/conversation/message/provider.d.ts

@@ -0,0 +1,2 @@
+import { i as useMessage, n as MessageProvider, r as ProviderProps, t as MessageContextValue } from "../../../../provider-CkkKc2aq.js";
+export { MessageContextValue, MessageProvider, ProviderProps, useMessage };

package/dist/features/chat/conversation/message/provider.js

@@ -0,0 +1,26 @@
+"use client";
+import { createContext, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/features/chat/conversation/message/provider.tsx
+const Context = createContext(null);
+function useMessage() {
+	const value = use(Context);
+	if (!value) throw new Error("Message.* must be used within a Message.Provider");
+	return value;
+}
+function MessageProvider({ message, messageIndex, children }) {
+	const value = useMemo(() => {
+		return {
+			message,
+			isFirst: messageIndex === 0
+		};
+	}, [message, messageIndex]);
+	return /* @__PURE__ */ jsx(Context, {
+		value,
+		children
+	});
+}
+//#endregion
+export { MessageProvider, useMessage };
+
+//# sourceMappingURL=provider.js.map

package/dist/features/chat/conversation/message/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","names":[],"sources":["../../../../../src/features/chat/conversation/message/provider.tsx"],"sourcesContent":["\"use client\";\n\nimport type { UIMessage } from \"ai\";\nimport { createContext, use, useMemo } from \"react\";\n\nexport interface MessageContextValue {\n  message: UIMessage;\n  isFirst: boolean;\n}\n\nconst Context = createContext<MessageContextValue | null>(null);\n\nexport function useMessage(): MessageContextValue {\n  const value = use(Context);\n  if (!value) {\n    throw new Error(\"Message.* must be used within a Message.Provider\");\n  }\n  return value;\n}\n\nexport interface ProviderProps {\n  message: UIMessage;\n  messageIndex: number;\n  children: React.ReactNode;\n}\n\nexport function MessageProvider({\n  message,\n  messageIndex,\n  children,\n}: ProviderProps) {\n  const value = useMemo<MessageContextValue>(() => {\n    return {\n      message,\n      isFirst: messageIndex === 0,\n    };\n  }, [message, messageIndex]);\n\n  return <Context value={value}>{children}</Context>;\n}\n"],"mappings":";;;;AAUA,MAAM,UAAU,cAA0C,IAAI;AAE9D,SAAgB,aAAkC;CAChD,MAAM,QAAQ,IAAI,OAAO;CACzB,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,kDAAkD;CAEpE,OAAO;AACT;AAQA,SAAgB,gBAAgB,EAC9B,SACA,cACA,YACgB;CAChB,MAAM,QAAQ,cAAmC;EAC/C,OAAO;GACL;GACA,SAAS,iBAAiB;EAC5B;CACF,GAAG,CAAC,SAAS,YAAY,CAAC;CAE1B,OAAO,oBAAC,SAAD;EAAgB;EAAQ;CAAkB,CAAA;AACnD"}

package/dist/features/chat/conversation/message/reasoning.d.ts

@@ -0,0 +1,2 @@
+import { t as MessageReasoning } from "../../../../reasoning-BRNu_n6T.js";
+export { MessageReasoning };

package/dist/features/chat/conversation/message/reasoning.js

@@ -0,0 +1,33 @@
+import { i as useChat } from "../../../../provider-Cps0PPXa.js";
+import { useMessage } from "./provider.js";
+import { usePart } from "./part.js";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "@chatsdk-dev/ui/molecules/ai/reasoning";
+//#region src/features/chat/conversation/message/reasoning.tsx
+function MessageReasoning() {
+	const { t } = useTranslation("chatsdk_elements");
+	const { status } = useChat();
+	const { message } = useMessage();
+	const claimed = usePart("reasoning");
+	if (!claimed) return null;
+	const part = claimed.part;
+	const isStreaming = status === "streaming" && part.state === "streaming";
+	const text = part.text ?? "";
+	return /* @__PURE__ */ jsxs(Reasoning, {
+		className: "w-full",
+		isStreaming,
+		children: [/* @__PURE__ */ jsx(ReasoningTrigger, { getThinkingMessage: (isStreaming, duration) => {
+			if (isStreaming || duration === 0) return /* @__PURE__ */ jsx("span", {
+				className: "shimmer shimmer-duration-1000 text-muted-foreground",
+				children: t("conversation.reasoning.thinking")
+			});
+			if (duration === void 0) return /* @__PURE__ */ jsx("p", { children: t("conversation.reasoning.thought-brief") });
+			return /* @__PURE__ */ jsx("p", { children: t("conversation.reasoning.thought-for", { seconds: duration }) });
+		} }), /* @__PURE__ */ jsx(ReasoningContent, { children: text })]
+	}, `${message.id}-${claimed.index}`);
+}
+//#endregion
+export { MessageReasoning };
+
+//# sourceMappingURL=reasoning.js.map

package/dist/features/chat/conversation/message/reasoning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reasoning.js","names":[],"sources":["../../../../../src/features/chat/conversation/message/reasoning.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport {\n  Reasoning,\n  ReasoningContent,\n  ReasoningTrigger,\n} from \"@chatsdk-dev/ui/molecules/ai/reasoning\";\n\nimport { useChat } from \"../../provider/provider\";\nimport { usePart } from \"./part\";\nimport { useMessage } from \"./provider\";\n\nexport function MessageReasoning() {\n  const { t } = useTranslation(\"chatsdk_elements\");\n  const { status } = useChat();\n  const { message } = useMessage();\n\n  const claimed = usePart(\"reasoning\");\n  if (!claimed) return null;\n\n  const part = claimed.part as { text?: string; state?: string };\n  // Per-part state, not message-level: an approval continuation appends parts\n  // to the SAME message, so \"last message && streaming\" would re-shimmer that\n  // message's earlier reasoning panels and overwrite their durations. The\n  // status guard keeps an aborted stream from shimmering forever.\n  const isStreaming = status === \"streaming\" && part.state === \"streaming\";\n\n  const text = part.text ?? \"\";\n  return (\n    <Reasoning\n      key={`${message.id}-${claimed.index}`}\n      className=\"w-full\"\n      isStreaming={isStreaming}\n    >\n      <ReasoningTrigger\n        getThinkingMessage={(isStreaming, duration) => {\n          if (isStreaming || duration === 0) {\n            return (\n              <span className=\"shimmer shimmer-duration-1000 text-muted-foreground\">\n                {t(\"conversation.reasoning.thinking\")}\n              </span>\n            );\n          }\n          if (duration === undefined) {\n            return <p>{t(\"conversation.reasoning.thought-brief\")}</p>;\n          }\n          return (\n            <p>\n              {t(\"conversation.reasoning.thought-for\", {\n                seconds: duration,\n              })}\n            </p>\n          );\n        }}\n      />\n      <ReasoningContent>{text}</ReasoningContent>\n    </Reasoning>\n  );\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,mBAAmB;CACjC,MAAM,EAAE,MAAM,eAAe,kBAAkB;CAC/C,MAAM,EAAE,WAAW,QAAQ;CAC3B,MAAM,EAAE,YAAY,WAAW;CAE/B,MAAM,UAAU,QAAQ,WAAW;CACnC,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,OAAO,QAAQ;CAKrB,MAAM,cAAc,WAAW,eAAe,KAAK,UAAU;CAE7D,MAAM,OAAO,KAAK,QAAQ;CAC1B,OACE,qBAAC,WAAD;EAEE,WAAU;EACG;YAHf,CAKE,oBAAC,kBAAD,EACE,qBAAqB,aAAa,aAAa;GAC7C,IAAI,eAAe,aAAa,GAC9B,OACE,oBAAC,QAAD;IAAM,WAAU;cACb,EAAE,iCAAiC;GAChC,CAAA;GAGV,IAAI,aAAa,KAAA,GACf,OAAO,oBAAC,KAAD,EAAA,UAAI,EAAE,sCAAsC,EAAK,CAAA;GAE1D,OACE,oBAAC,KAAD,EAAA,UACG,EAAE,sCAAsC,EACvC,SAAS,SACX,CAAC,EACA,CAAA;EAEP,EACD,CAAA,GACD,oBAAC,kBAAD,EAAA,UAAmB,KAAuB,CAAA,CACjC;IA1BJ,GAAG,QAAQ,GAAG,GAAG,QAAQ,OA0BrB;AAEf"}

package/dist/features/chat/conversation/message/sources.d.ts

@@ -0,0 +1,2 @@
+import { t as MessageSources } from "../../../../sources-BXoSxNYc.js";
+export { MessageSources };

package/dist/features/chat/conversation/message/sources.js

@@ -0,0 +1,20 @@
+import { useMessage } from "./provider.js";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Elements from "@chatsdk-dev/ui/molecules/ai/sources";
+//#region src/features/chat/conversation/message/sources.tsx
+function MessageSources() {
+	const { t } = useTranslation("chatsdk_elements");
+	const { message } = useMessage();
+	return message.role === "assistant" && message.parts.filter((part) => part.type === "source-url").length > 0 && /* @__PURE__ */ jsxs(Elements.Sources, { children: [/* @__PURE__ */ jsx(Elements.SourcesTrigger, {
+		count: message.parts.filter((part) => part.type === "source-url").length,
+		label: t("conversation.sources.used", { count: message.parts.filter((part) => part.type === "source-url").length })
+	}), message.parts.filter((part) => part.type === "source-url").map((part, i) => /* @__PURE__ */ jsx(Elements.SourcesContent, { children: /* @__PURE__ */ jsx(Elements.Source, {
+		href: part.url,
+		title: part.url
+	}, `${message.id}-${i}`) }, `${message.id}-${i}`))] });
+}
+//#endregion
+export { MessageSources };
+
+//# sourceMappingURL=sources.js.map

package/dist/features/chat/conversation/message/sources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sources.js","names":[],"sources":["../../../../../src/features/chat/conversation/message/sources.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\nimport * as Elements from \"@chatsdk-dev/ui/molecules/ai/sources\";\n\nimport { useMessage } from \"./provider\";\n\nexport function MessageSources() {\n  const { t } = useTranslation(\"chatsdk_elements\");\n  const { message } = useMessage();\n\n  const isAssistant = message.role === \"assistant\";\n\n  return (\n    isAssistant &&\n    message.parts.filter((part) => part.type === \"source-url\").length > 0 && (\n      <Elements.Sources>\n        <Elements.SourcesTrigger\n          count={\n            message.parts.filter((part) => part.type === \"source-url\").length\n          }\n          label={t(\"conversation.sources.used\", {\n            count: message.parts.filter((part) => part.type === \"source-url\")\n              .length,\n          })}\n        />\n        {message.parts\n          .filter((part) => part.type === \"source-url\")\n          .map((part, i) => (\n            <Elements.SourcesContent key={`${message.id}-${i}`}>\n              <Elements.Source\n                key={`${message.id}-${i}`}\n                href={part.url}\n                title={part.url}\n              />\n            </Elements.SourcesContent>\n          ))}\n      </Elements.Sources>\n    )\n  );\n}\n"],"mappings":";;;;;AAMA,SAAgB,iBAAiB;CAC/B,MAAM,EAAE,MAAM,eAAe,kBAAkB;CAC/C,MAAM,EAAE,YAAY,WAAW;CAI/B,OAFoB,QAAQ,SAAS,eAInC,QAAQ,MAAM,QAAQ,SAAS,KAAK,SAAS,YAAY,CAAC,CAAC,SAAS,KAClE,qBAAC,SAAS,SAAV,EAAA,UAAA,CACE,oBAAC,SAAS,gBAAV;EACE,OACE,QAAQ,MAAM,QAAQ,SAAS,KAAK,SAAS,YAAY,CAAC,CAAC;EAE7D,OAAO,EAAE,6BAA6B,EACpC,OAAO,QAAQ,MAAM,QAAQ,SAAS,KAAK,SAAS,YAAY,CAAC,CAC9D,OACL,CAAC;CACF,CAAA,GACA,QAAQ,MACN,QAAQ,SAAS,KAAK,SAAS,YAAY,CAAC,CAC5C,KAAK,MAAM,MACV,oBAAC,SAAS,gBAAV,EAAA,UACE,oBAAC,SAAS,QAAV;EAEE,MAAM,KAAK;EACX,OAAO,KAAK;CACb,GAHM,GAAG,QAAQ,GAAG,GAAG,GAGvB,EACsB,GANK,GAAG,QAAQ,GAAG,GAAG,GAMtB,CAC1B,CACa,EAAA,CAAA;AAGxB"}

package/dist/features/chat/conversation/message/text.d.ts

@@ -0,0 +1,2 @@
+import { t as MessageText } from "../../../../text-Cio_Hj_h.js";
+export { MessageText };

package/dist/features/chat/conversation/message/text.js

@@ -0,0 +1,29 @@
+"use client";
+import { useMessage } from "./provider.js";
+import { usePart } from "./part.js";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { Bubble, BubbleContent } from "@chatsdk-dev/ui/atoms/bubble";
+import { MessageResponse } from "@chatsdk-dev/ui/molecules/ai/response";
+//#region src/features/chat/conversation/message/text.tsx
+function MessageText() {
+	const { message } = useMessage();
+	const claimed = usePart("text");
+	if (!claimed) return null;
+	const text = claimed.part.text;
+	if (!text) return null;
+	const isUser = message.role === "user";
+	return /* @__PURE__ */ jsx(Bubble, {
+		variant: isUser ? "default" : "muted",
+		align: isUser ? "end" : "start",
+		className: cn(!isUser && "w-full max-w-full"),
+		children: /* @__PURE__ */ jsx(BubbleContent, {
+			className: cn(!isUser && "w-full"),
+			children: /* @__PURE__ */ jsx(MessageResponse, { children: text })
+		})
+	});
+}
+//#endregion
+export { MessageText };
+
+//# sourceMappingURL=text.js.map

package/dist/features/chat/conversation/message/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../../../../src/features/chat/conversation/message/text.tsx"],"sourcesContent":["\"use client\";\n\nimport { Bubble, BubbleContent } from \"@chatsdk-dev/ui/atoms/bubble\";\nimport { cn } from \"@chatsdk-dev/ui/lib/utils\";\nimport { MessageResponse } from \"@chatsdk-dev/ui/molecules/ai/response\";\n\nimport { usePart } from \"./part\";\nimport { useMessage } from \"./provider\";\n\nexport function MessageText() {\n  const { message } = useMessage();\n  const claimed = usePart(\"text\");\n  if (!claimed) return null;\n\n  const text = (claimed.part as { text?: string }).text;\n  if (!text) return null;\n\n  const isUser = message.role === \"user\";\n  // Assistant answers stay a wide panel (fill the column); user messages hug.\n  return (\n    <Bubble\n      variant={isUser ? \"default\" : \"muted\"}\n      align={isUser ? \"end\" : \"start\"}\n      className={cn(!isUser && \"w-full max-w-full\")}\n    >\n      <BubbleContent className={cn(!isUser && \"w-full\")}>\n        <MessageResponse>{text}</MessageResponse>\n      </BubbleContent>\n    </Bubble>\n  );\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,cAAc;CAC5B,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,UAAU,QAAQ,MAAM;CAC9B,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,OAAQ,QAAQ,KAA2B;CACjD,IAAI,CAAC,MAAM,OAAO;CAElB,MAAM,SAAS,QAAQ,SAAS;CAEhC,OACE,oBAAC,QAAD;EACE,SAAS,SAAS,YAAY;EAC9B,OAAO,SAAS,QAAQ;EACxB,WAAW,GAAG,CAAC,UAAU,mBAAmB;YAE5C,oBAAC,eAAD;GAAe,WAAW,GAAG,CAAC,UAAU,QAAQ;aAC9C,oBAAC,iBAAD,EAAA,UAAkB,KAAsB,CAAA;EAC3B,CAAA;CACT,CAAA;AAEZ"}

package/dist/features/chat/conversation/message/timestamp.d.ts

@@ -0,0 +1,2 @@
+import { t as MessageTimestamp } from "../../../../timestamp-CbU3bLa3.js";
+export { MessageTimestamp };

package/dist/features/chat/conversation/message/timestamp.js

@@ -0,0 +1,36 @@
+"use client";
+import { useMessage } from "./provider.js";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chatsdk-dev/ui/atoms/typography/text";
+import { renderRelativeTime } from "@chatsdk-dev/ui/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@chatsdk-dev/ui/atoms/tooltip";
+import { Separator } from "@chatsdk-dev/ui/atoms/separator";
+//#region src/features/chat/conversation/message/timestamp.tsx
+function MessageTimestamp() {
+	const { t, i18n } = useTranslation("chatsdk_elements");
+	const { message } = useMessage();
+	const at = message.metadata?._creationTime;
+	if (!at) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-row items-center pr-1 min-h-7",
+		children: [/* @__PURE__ */ jsxs(Tooltip, {
+			delay: 750,
+			children: [/* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Text, {
+				className: "text-xs text-zinc-500",
+				children: renderRelativeTime({
+					date: new Date(at),
+					locale: i18n.language,
+					nowLabel: t("just-now")
+				})
+			}) }), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: new Date(at).toLocaleString() }) })]
+		}), /* @__PURE__ */ jsx(Separator, {
+			orientation: "vertical",
+			className: "ml-3 h-3!"
+		})]
+	});
+}
+//#endregion
+export { MessageTimestamp };
+
+//# sourceMappingURL=timestamp.js.map

package/dist/features/chat/conversation/message/timestamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timestamp.js","names":[],"sources":["../../../../../src/features/chat/conversation/message/timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"react-i18next\";\n\nimport { Separator } from \"@chatsdk-dev/ui/atoms/separator\";\nimport { Text } from \"@chatsdk-dev/ui/atoms/typography/text\";\nimport { renderRelativeTime } from \"@chatsdk-dev/ui/lib/utils\";\nimport { useMessage } from \"./provider\";\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@chatsdk-dev/ui/atoms/tooltip\";\n\nexport function MessageTimestamp() {\n  const { t, i18n } = useTranslation(\"chatsdk_elements\");\n  const { message } = useMessage();\n  const at = (message.metadata as { _creationTime?: number } | undefined)\n    ?._creationTime;\n  if (!at) return null;\n\n  return (\n    <div className=\"flex flex-row items-center pr-1 min-h-7\">\n      <Tooltip delay={750}>\n        <TooltipTrigger>\n          <Text className=\"text-xs text-zinc-500\">\n            {renderRelativeTime({\n              date: new Date(at),\n              locale: i18n.language,\n              nowLabel: t(\"just-now\"),\n            })}\n          </Text>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>{new Date(at).toLocaleString()}</p>\n        </TooltipContent>\n      </Tooltip>\n      <Separator orientation=\"vertical\" className=\"ml-3 h-3!\" />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,mBAAmB;CACjC,MAAM,EAAE,GAAG,SAAS,eAAe,kBAAkB;CACrD,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,KAAM,QAAQ,UAChB;CACJ,IAAI,CAAC,IAAI,OAAO;CAEhB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,SAAD;GAAS,OAAO;aAAhB,CACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,MAAD;IAAM,WAAU;cACb,mBAAmB;KAClB,MAAM,IAAI,KAAK,EAAE;KACjB,QAAQ,KAAK;KACb,UAAU,EAAE,UAAU;IACxB,CAAC;GACG,CAAA,EACQ,CAAA,GAChB,oBAAC,gBAAD,EAAA,UACE,oBAAC,KAAD,EAAA,UAAI,IAAI,KAAK,EAAE,CAAC,CAAC,eAAe,EAAK,CAAA,EACvB,CAAA,CACT;MACT,oBAAC,WAAD;GAAW,aAAY;GAAW,WAAU;EAAa,CAAA,CACtD;;AAET"}

package/dist/features/chat/conversation/message/tool.d.ts

@@ -0,0 +1,2 @@
+import { t as MessageTool } from "../../../../tool-DskTWxZb.js";
+export { MessageTool };

package/dist/features/chat/conversation/message/tool.js

@@ -0,0 +1,56 @@
+"use client";
+import { usePart } from "./part.js";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getToolName } from "ai";
+import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "@chatsdk-dev/ui/molecules/ai/tool";
+//#region src/features/chat/conversation/message/tool.tsx
+function useToolStatusLabels() {
+	const { t } = useTranslation("chatsdk_elements");
+	return {
+		"approval-requested": t("conversation.tool.status.approval-requested"),
+		"approval-responded": t("conversation.tool.status.approval-responded"),
+		"input-available": t("conversation.tool.status.input-available"),
+		"input-streaming": t("conversation.tool.status.input-streaming"),
+		"output-available": t("conversation.tool.status.output-available"),
+		"output-denied": t("conversation.tool.status.output-denied"),
+		"output-error": t("conversation.tool.status.output-error")
+	};
+}
+function MessageTool() {
+	const { t } = useTranslation("chatsdk_elements");
+	const statusLabels = useToolStatusLabels();
+	const claimed = usePart("tool");
+	if (!claimed) return null;
+	const part = claimed.part;
+	const toolPart = part;
+	const isDynamic = part.type === "dynamic-tool";
+	const title = toolPart.title ?? getToolName(toolPart);
+	return /* @__PURE__ */ jsxs(Tool, {
+		className: isDynamic ? void 0 : "w-full flex-1",
+		children: [isDynamic ? /* @__PURE__ */ jsx(ToolHeader, {
+			type: "dynamic-tool",
+			state: toolPart.state,
+			toolName: part.toolName,
+			title,
+			statusLabels
+		}) : /* @__PURE__ */ jsx(ToolHeader, {
+			type: toolPart.type,
+			state: toolPart.state,
+			title,
+			statusLabels
+		}), /* @__PURE__ */ jsxs(ToolContent, { children: [toolPart.input != null && /* @__PURE__ */ jsx(ToolInput, {
+			input: toolPart.input,
+			label: t("conversation.tool.parameters")
+		}), /* @__PURE__ */ jsx(ToolOutput, {
+			output: toolPart.output,
+			errorText: toolPart.errorText,
+			outputLabel: t("conversation.tool.result"),
+			errorLabel: t("conversation.tool.error")
+		})] })]
+	});
+}
+//#endregion
+export { MessageTool };
+
+//# sourceMappingURL=tool.js.map

package/dist/features/chat/conversation/message/tool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.js","names":[],"sources":["../../../../../src/features/chat/conversation/message/tool.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\nimport { getToolName } from \"ai\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n  Tool,\n  ToolContent,\n  ToolHeader,\n  ToolInput,\n  ToolOutput,\n  type ToolPart,\n} from \"@chatsdk-dev/ui/molecules/ai/tool\";\n\nimport { usePart } from \"./part\";\n\nfunction useToolStatusLabels(): Record<ToolPart[\"state\"], string> {\n  const { t } = useTranslation(\"chatsdk_elements\");\n  return {\n    \"approval-requested\": t(\"conversation.tool.status.approval-requested\"),\n    \"approval-responded\": t(\"conversation.tool.status.approval-responded\"),\n    \"input-available\": t(\"conversation.tool.status.input-available\"),\n    \"input-streaming\": t(\"conversation.tool.status.input-streaming\"),\n    \"output-available\": t(\"conversation.tool.status.output-available\"),\n    \"output-denied\": t(\"conversation.tool.status.output-denied\"),\n    \"output-error\": t(\"conversation.tool.status.output-error\"),\n  };\n}\n\nexport function MessageTool() {\n  const { t } = useTranslation(\"chatsdk_elements\");\n  const statusLabels = useToolStatusLabels();\n  const claimed = usePart(\"tool\");\n  if (!claimed) return null;\n\n  const part = claimed.part;\n  const toolPart = part as unknown as ToolUIPart;\n  const isDynamic = part.type === \"dynamic-tool\";\n  const title = (toolPart as ToolPart).title ?? getToolName(toolPart);\n\n  return (\n    <Tool className={isDynamic ? undefined : \"w-full flex-1\"}>\n      {isDynamic ? (\n        <ToolHeader\n          type=\"dynamic-tool\"\n          state={toolPart.state}\n          toolName={(part as { toolName: string }).toolName}\n          title={title}\n          statusLabels={statusLabels}\n        />\n      ) : (\n        <ToolHeader\n          type={toolPart.type}\n          state={toolPart.state}\n          title={title}\n          statusLabels={statusLabels}\n        />\n      )}\n      <ToolContent>\n        {toolPart.input != null && (\n          <ToolInput\n            input={toolPart.input}\n            label={t(\"conversation.tool.parameters\")}\n          />\n        )}\n        <ToolOutput\n          output={toolPart.output}\n          errorText={toolPart.errorText}\n          outputLabel={t(\"conversation.tool.result\")}\n          errorLabel={t(\"conversation.tool.error\")}\n        />\n      </ToolContent>\n    </Tool>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,SAAS,sBAAyD;CAChE,MAAM,EAAE,MAAM,eAAe,kBAAkB;CAC/C,OAAO;EACL,sBAAsB,EAAE,6CAA6C;EACrE,sBAAsB,EAAE,6CAA6C;EACrE,mBAAmB,EAAE,0CAA0C;EAC/D,mBAAmB,EAAE,0CAA0C;EAC/D,oBAAoB,EAAE,2CAA2C;EACjE,iBAAiB,EAAE,wCAAwC;EAC3D,gBAAgB,EAAE,uCAAuC;CAC3D;AACF;AAEA,SAAgB,cAAc;CAC5B,MAAM,EAAE,MAAM,eAAe,kBAAkB;CAC/C,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,QAAQ,MAAM;CAC9B,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,OAAO,QAAQ;CACrB,MAAM,WAAW;CACjB,MAAM,YAAY,KAAK,SAAS;CAChC,MAAM,QAAS,SAAsB,SAAS,YAAY,QAAQ;CAElE,OACE,qBAAC,MAAD;EAAM,WAAW,YAAY,KAAA,IAAY;YAAzC,CACG,YACC,oBAAC,YAAD;GACE,MAAK;GACL,OAAO,SAAS;GAChB,UAAW,KAA8B;GAClC;GACO;EACf,CAAA,IAED,oBAAC,YAAD;GACE,MAAM,SAAS;GACf,OAAO,SAAS;GACT;GACO;EACf,CAAA,GAEH,qBAAC,aAAD,EAAA,UAAA,CACG,SAAS,SAAS,QACjB,oBAAC,WAAD;GACE,OAAO,SAAS;GAChB,OAAO,EAAE,8BAA8B;EACxC,CAAA,GAEH,oBAAC,YAAD;GACE,QAAQ,SAAS;GACjB,WAAW,SAAS;GACpB,aAAa,EAAE,0BAA0B;GACzC,YAAY,EAAE,yBAAyB;EACxC,CAAA,CACU,EAAA,CAAA,CACT;;AAEV"}

package/dist/features/chat/error/chat-error.d.ts

@@ -0,0 +1,2 @@
+import { t as Error } from "../../../chat-error-CST-PRdq.js";
+export { Error };

package/dist/features/chat/error/chat-error.js

@@ -0,0 +1,46 @@
+"use client";
+import { i as useChat } from "../../../provider-Cps0PPXa.js";
+import { useAppErrorMessage } from "../../errors/use-app-error-message.js";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isRetryable } from "@chatsdk-dev/agent";
+import { RefreshCw, X } from "lucide-react";
+import { Alert, AlertDescription } from "@chatsdk-dev/ui/atoms/alert";
+import { Button } from "@chatsdk-dev/ui/atoms/button";
+//#region src/features/chat/error/chat-error.tsx
+/**
+* Inline banner for a stream/transport failure. Renders nothing until the
+* session reports an `appError`; then shows localized copy with a Dismiss
+* action and — only when the error is retryable (network/rate-limit/5xx) — a
+* Retry that re-runs the last turn. The optimistic user message survives the
+* failure, so retry resends it.
+*/
+function Error() {
+	const { t } = useTranslation();
+	const { appError, retryLastMessage, dismissError } = useChat();
+	const getMessage = useAppErrorMessage();
+	if (!appError) return null;
+	return /* @__PURE__ */ jsxs(Alert, {
+		variant: "destructive",
+		className: "mx-4 mb-2 w-auto",
+		children: [/* @__PURE__ */ jsx(AlertDescription, { children: getMessage(appError) }), /* @__PURE__ */ jsxs("div", {
+			className: "col-start-1 mt-1.5 flex gap-2",
+			children: [isRetryable(appError) && /* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				variant: "outline",
+				onClick: retryLastMessage,
+				children: [/* @__PURE__ */ jsx(RefreshCw, {}), t("errors.retry")]
+			}), /* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				variant: "ghost",
+				onClick: dismissError,
+				children: [/* @__PURE__ */ jsx(X, {}), t("errors.dismiss")]
+			})]
+		})]
+	});
+}
+Error.displayName = "ChatError";
+//#endregion
+export { Error };
+
+//# sourceMappingURL=chat-error.js.map

package/dist/features/chat/error/chat-error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-error.js","names":[],"sources":["../../../../src/features/chat/error/chat-error.tsx"],"sourcesContent":["\"use client\";\n\nimport { RefreshCw, X } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { isRetryable } from \"@chatsdk-dev/agent\";\nimport { Alert, AlertDescription } from \"@chatsdk-dev/ui/atoms/alert\";\nimport { Button } from \"@chatsdk-dev/ui/atoms/button\";\n\nimport { useAppErrorMessage } from \"../../errors/use-app-error-message\";\nimport { useChat } from \"../provider/provider\";\n\n/**\n * Inline banner for a stream/transport failure. Renders nothing until the\n * session reports an `appError`; then shows localized copy with a Dismiss\n * action and — only when the error is retryable (network/rate-limit/5xx) — a\n * Retry that re-runs the last turn. The optimistic user message survives the\n * failure, so retry resends it.\n */\nexport function Error() {\n  const { t } = useTranslation();\n  const { appError, retryLastMessage, dismissError } = useChat();\n  const getMessage = useAppErrorMessage();\n\n  if (!appError) return null;\n\n  return (\n    <Alert variant=\"destructive\" className=\"mx-4 mb-2 w-auto\">\n      <AlertDescription>{getMessage(appError)}</AlertDescription>\n      <div className=\"col-start-1 mt-1.5 flex gap-2\">\n        {isRetryable(appError) && (\n          <Button size=\"sm\" variant=\"outline\" onClick={retryLastMessage}>\n            <RefreshCw />\n            {t(\"errors.retry\")}\n          </Button>\n        )}\n        <Button size=\"sm\" variant=\"ghost\" onClick={dismissError}>\n          <X />\n          {t(\"errors.dismiss\")}\n        </Button>\n      </div>\n    </Alert>\n  );\n}\n\nError.displayName = \"ChatError\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,SAAgB,QAAQ;CACtB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,UAAU,kBAAkB,iBAAiB,QAAQ;CAC7D,MAAM,aAAa,mBAAmB;CAEtC,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAO,SAAQ;EAAc,WAAU;YAAvC,CACE,oBAAC,kBAAD,EAAA,UAAmB,WAAW,QAAQ,EAAoB,CAAA,GAC1D,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,YAAY,QAAQ,KACnB,qBAAC,QAAD;IAAQ,MAAK;IAAK,SAAQ;IAAU,SAAS;cAA7C,CACE,oBAAC,WAAD,CAAY,CAAA,GACX,EAAE,cAAc,CACX;OAEV,qBAAC,QAAD;IAAQ,MAAK;IAAK,SAAQ;IAAQ,SAAS;cAA3C,CACE,oBAAC,GAAD,CAAI,CAAA,GACH,EAAE,gBAAgB,CACb;KACL;IACA;;AAEX;AAEA,MAAM,cAAc"}

package/dist/features/chat/frame/frame.d.ts

@@ -0,0 +1,2 @@
+import { t as Frame } from "../../../frame-BCN71hMj.js";
+export { Frame };

package/dist/features/chat/frame/frame.js

@@ -0,0 +1,52 @@
+import { c as useElementComponent, f as useGetAgentQuery } from "../../../provider-Cps0PPXa.js";
+import { useListConversationsQuery } from "../queries/use-list-conversations-query.js";
+import { useAppErrorMessage } from "../../errors/use-app-error-message.js";
+import "react";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RefreshCw } from "lucide-react";
+import { Alert, AlertDescription } from "@chatsdk-dev/ui/atoms/alert";
+import { Button } from "@chatsdk-dev/ui/atoms/button";
+import { Card } from "@chatsdk-dev/ui/atoms/card";
+import { DotsLoader } from "@chatsdk-dev/ui/atoms/dots-loader";
+//#region src/features/chat/frame/frame.tsx
+function Frame({ className, children }) {
+	const { t } = useTranslation();
+	const { agentId } = useElementComponent();
+	const { isLoading, isError, error, refetch, data: chat } = useGetAgentQuery({ agentId });
+	useListConversationsQuery({ agentId });
+	const getMessage = useAppErrorMessage();
+	const canCreateMessage = (chat?.agentSettingsCore?.allowedModels?.length ?? 0) > 0;
+	if (!isError && !canCreateMessage && chat?.agentSettingsSurface?.hideChatWhenInsufficientCredits) return null;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: className ?? "min-w-[320px] h-[640px] w-[412px] flex flex-col relative p-0 rounded-lg gap-0",
+		children: [
+			isLoading && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center z-10 bg-card rounded-lg",
+				children: /* @__PURE__ */ jsx(DotsLoader, {})
+			}),
+			!isLoading && isError && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 z-10 flex items-center justify-center bg-card rounded-lg p-4",
+				children: /* @__PURE__ */ jsxs(Alert, {
+					variant: "destructive",
+					className: "w-auto",
+					children: [/* @__PURE__ */ jsx(AlertDescription, { children: getMessage(error) }), /* @__PURE__ */ jsx("div", {
+						className: "col-start-1 mt-1.5",
+						children: /* @__PURE__ */ jsxs(Button, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => void refetch(),
+							children: [/* @__PURE__ */ jsx(RefreshCw, {}), t("errors.retry")]
+						})
+					})]
+				})
+			}),
+			!isLoading && !isError && children
+		]
+	});
+}
+Frame.displayName = "ChatFrame";
+//#endregion
+export { Frame };
+
+//# sourceMappingURL=frame.js.map

package/dist/features/chat/frame/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.js","names":[],"sources":["../../../../src/features/chat/frame/frame.tsx"],"sourcesContent":["import React from \"react\";\nimport { RefreshCw } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Alert, AlertDescription } from \"@chatsdk-dev/ui/atoms/alert\";\nimport { Button } from \"@chatsdk-dev/ui/atoms/button\";\nimport { Card } from \"@chatsdk-dev/ui/atoms/card\";\nimport { DotsLoader } from \"@chatsdk-dev/ui/atoms/dots-loader\";\n\nimport { useAppErrorMessage } from \"../../errors/use-app-error-message\";\nimport { useElementComponent } from \"../provider/provider\";\nimport { useGetAgentQuery } from \"../queries/use-get-agent-query\";\nimport { useListConversationsQuery } from \"../queries/use-list-conversations-query\";\n\ninterface FrameProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function Frame({ className, children }: FrameProps) {\n  const { t } = useTranslation();\n  const { agentId } = useElementComponent();\n  const {\n    isLoading,\n    isError,\n    error,\n    refetch,\n    data: chat,\n  } = useGetAgentQuery({ agentId });\n  // Prefetch conversations list so Header/History can read from cache.\n  useListConversationsQuery({ agentId });\n  const getMessage = useAppErrorMessage();\n\n  const canCreateMessage =\n    (chat?.agentSettingsCore?.allowedModels?.length ?? 0) > 0;\n\n  if (\n    !isError &&\n    !canCreateMessage &&\n    chat?.agentSettingsSurface?.hideChatWhenInsufficientCredits\n  ) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={\n        className ??\n        \"min-w-[320px] h-[640px] w-[412px] flex flex-col relative p-0 rounded-lg gap-0\"\n      }\n    >\n      {isLoading && (\n        <div className=\"absolute inset-0 flex items-center justify-center z-10 bg-card rounded-lg\">\n          <DotsLoader />\n        </div>\n      )}\n      {/* Config fetch failed — surface it with a retry instead of an endless\n          loader. getMessage (parseAppError) maps a connection failure to\n          network_unreachable. */}\n      {!isLoading && isError && (\n        <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-card rounded-lg p-4\">\n          <Alert variant=\"destructive\" className=\"w-auto\">\n            <AlertDescription>{getMessage(error)}</AlertDescription>\n            <div className=\"col-start-1 mt-1.5\">\n              <Button\n                size=\"sm\"\n                variant=\"outline\"\n                onClick={() => void refetch()}\n              >\n                <RefreshCw />\n                {t(\"errors.retry\")}\n              </Button>\n            </div>\n          </Alert>\n        </div>\n      )}\n      {!isLoading && !isError && children}\n    </Card>\n  );\n}\n\nFrame.displayName = \"ChatFrame\";\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,MAAM,EAAE,WAAW,YAAwB;CACzD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,YAAY,oBAAoB;CACxC,MAAM,EACJ,WACA,SACA,OACA,SACA,MAAM,SACJ,iBAAiB,EAAE,QAAQ,CAAC;CAEhC,0BAA0B,EAAE,QAAQ,CAAC;CACrC,MAAM,aAAa,mBAAmB;CAEtC,MAAM,oBACH,MAAM,mBAAmB,eAAe,UAAU,KAAK;CAE1D,IACE,CAAC,WACD,CAAC,oBACD,MAAM,sBAAsB,iCAE5B,OAAO;CAGT,OACE,qBAAC,MAAD;EACE,WACE,aACA;YAHJ;GAMG,aACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,YAAD,CAAa,CAAA;GACV,CAAA;GAKN,CAAC,aAAa,WACb,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAO,SAAQ;KAAc,WAAU;eAAvC,CACE,oBAAC,kBAAD,EAAA,UAAmB,WAAW,KAAK,EAAoB,CAAA,GACvD,oBAAC,OAAD;MAAK,WAAU;gBACb,qBAAC,QAAD;OACE,MAAK;OACL,SAAQ;OACR,eAAe,KAAK,QAAQ;iBAH9B,CAKE,oBAAC,WAAD,CAAY,CAAA,GACX,EAAE,cAAc,CACX;;KACL,CAAA,CACA;;GACJ,CAAA;GAEN,CAAC,aAAa,CAAC,WAAW;EACvB;;AAEV;AAEA,MAAM,cAAc"}

package/dist/features/chat/frame/header-menu.d.ts

@@ -0,0 +1,8 @@
+//#region src/features/chat/frame/header-menu.d.ts
+declare function HeaderMenu(): import("react").JSX.Element;
+declare namespace HeaderMenu {
+  var displayName: string;
+}
+//#endregion
+export { HeaderMenu };
+//# sourceMappingURL=header-menu.d.ts.map

package/dist/features/chat/frame/header-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-menu.d.ts","names":[],"sources":["../../../../src/features/chat/frame/header-menu.tsx"],"mappings":";iBAcgB,UAAA,oBAAU,GAAA,CAAA,OAAA;AAAA,kBAAV,UAAA;EAAA,IAAU,WAAA;AAAA"}

package/dist/features/chat/{chat-header/chat-menu.js → frame/header-menu.js}

@@ -1,29 +1,28 @@
-import { useChatStore } from "../store.js";
-import { Ellipsis } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { a as useChatStore } from "../../../provider-Cps0PPXa.js";
+import { useCreateNewChat } from "../main/use-create-new-chat.js";
 import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Ellipsis } from "lucide-react";
 import { buttonVariants } from "@chatsdk-dev/ui/atoms/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@chatsdk-dev/ui/atoms/dropdown-menu";
-//#region src/features/chat/chat-header/chat-menu.tsx
-function ChatMenu() {
+//#region src/features/chat/frame/header-menu.tsx
+function HeaderMenu() {
 	const { t } = useTranslation();
-	const { setSelectedConversationId, setTab, setConversationType } = useChatStore();
+	const setTab = useChatStore((state) => state.setTab);
+	const { createNewChat } = useCreateNewChat();
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		className: buttonVariants({ variant: "transparent" }),
 		children: /* @__PURE__ */ jsx(Ellipsis, { className: "size-4" })
 	}), /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
-		onClick: () => {
-			setConversationType("new");
-			setSelectedConversationId();
-			setTab("chat");
-		},
+		onClick: createNewChat,
 		children: t("header.menu.new-conversation-menu-item-label")
 	}), /* @__PURE__ */ jsx(DropdownMenuItem, {
 		onClick: () => setTab("history"),
 		children: t("header.menu.history-menu-item-label")
 	})] })] });
 }
+HeaderMenu.displayName = "ChatHeaderMenu";
 //#endregion
-export { ChatMenu };
+export { HeaderMenu };
 
-//# sourceMappingURL=chat-menu.js.map
+//# sourceMappingURL=header-menu.js.map

package/dist/features/chat/frame/header-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-menu.js","names":[],"sources":["../../../../src/features/chat/frame/header-menu.tsx"],"sourcesContent":["import { Ellipsis } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { buttonVariants } from \"@chatsdk-dev/ui/atoms/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@chatsdk-dev/ui/atoms/dropdown-menu\";\n\nimport { useCreateNewChat } from \"../main/use-create-new-chat\";\nimport { useChatStore } from \"../provider/provider\";\n\nexport function HeaderMenu() {\n  const { t } = useTranslation();\n  const setTab = useChatStore((state) => state.setTab);\n\n  const { createNewChat } = useCreateNewChat();\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        className={buttonVariants({ variant: \"transparent\" })}\n      >\n        <Ellipsis className=\"size-4\" />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuItem onClick={createNewChat}>\n          {t(\"header.menu.new-conversation-menu-item-label\")}\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTab(\"history\")}>\n          {t(\"header.menu.history-menu-item-label\")}\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nHeaderMenu.displayName = \"ChatHeaderMenu\";\n"],"mappings":";;;;;;;;AAcA,SAAgB,aAAa;CAC3B,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,SAAS,cAAc,UAAU,MAAM,MAAM;CAEnD,MAAM,EAAE,kBAAkB,iBAAiB;CAE3C,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;EACE,WAAW,eAAe,EAAE,SAAS,cAAc,CAAC;YAEpD,oBAAC,UAAD,EAAU,WAAU,SAAU,CAAA;CACX,CAAA,GACrB,qBAAC,qBAAD,EAAA,UAAA,CACE,oBAAC,kBAAD;EAAkB,SAAS;YACxB,EAAE,8CAA8C;CACjC,CAAA,GAClB,oBAAC,kBAAD;EAAkB,eAAe,OAAO,SAAS;YAC9C,EAAE,qCAAqC;CACxB,CAAA,CACC,EAAA,CAAA,CACT,EAAA,CAAA;AAElB;AAEA,WAAW,cAAc"}

package/dist/features/chat/frame/header.d.ts

@@ -0,0 +1,2 @@
+import { t as Header } from "../../../header-BDGB3zKD.js";
+export { Header };

package/dist/features/chat/frame/header.js

@@ -0,0 +1,50 @@
+import { a as useChatStore, c as useElementComponent, f as useGetAgentQuery } from "../../../provider-Cps0PPXa.js";
+import { HeaderMenu } from "./header-menu.js";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@chatsdk-dev/ui/atoms/button";
+import { CardHeader, CardTitle } from "@chatsdk-dev/ui/atoms/card";
+import { Text } from "@chatsdk-dev/ui/atoms/typography/text";
+//#region src/features/chat/frame/header.tsx
+function Header() {
+	const { t } = useTranslation();
+	const { agentId } = useElementComponent();
+	const tab = useChatStore((s) => s.tab);
+	const setTab = useChatStore((s) => s.setTab);
+	const { data } = useGetAgentQuery({ agentId });
+	const name = data?.agentSettingsAppearance?.displayName;
+	const iconUrl = data?.agentSettingsAppearance?.icon?.url;
+	return /* @__PURE__ */ jsxs(CardHeader, {
+		className: "flex h-14 items-center justify-between rounded-t-lg bg-primary px-4! mx-[-1px] mt-[-1px] text-primary-foreground ",
+		children: [/* @__PURE__ */ jsxs(CardTitle, { children: [tab === "chat" && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [iconUrl && /* @__PURE__ */ jsx("img", {
+				src: iconUrl,
+				alt: "Chat Icon",
+				className: "inline-block w-4 h-4"
+			}), /* @__PURE__ */ jsx(Text, {
+				variant: "h1",
+				className: "flex items-center gap-2 text-sm text-primary-foreground",
+				children: name
+			})]
+		}), tab === "history" && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				onClick: () => setTab("chat"),
+				variant: "transparent",
+				className: "p-0!",
+				children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
+			}), /* @__PURE__ */ jsx(Text, {
+				variant: "h1",
+				className: "flex items-center gap-2 text-sm text-primary-foreground",
+				children: t("header.history-tab-label")
+			})]
+		})] }), tab === "chat" && /* @__PURE__ */ jsx(HeaderMenu, {})]
+	});
+}
+Header.displayName = "ChatHeader";
+//#endregion
+export { Header };
+
+//# sourceMappingURL=header.js.map

package/dist/features/chat/frame/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","names":[],"sources":["../../../../src/features/chat/frame/header.tsx"],"sourcesContent":["import { ArrowLeft } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } from \"@chatsdk-dev/ui/atoms/button\";\nimport { CardHeader, CardTitle } from \"@chatsdk-dev/ui/atoms/card\";\nimport { Text } from \"@chatsdk-dev/ui/atoms/typography/text\";\n\nimport { useChatStore, useElementComponent } from \"../provider/provider\";\nimport { useGetAgentQuery } from \"../queries/use-get-agent-query\";\nimport { HeaderMenu } from \"./header-menu\";\n\nexport function Header() {\n  const { t } = useTranslation();\n  const { agentId } = useElementComponent();\n  const tab = useChatStore((s) => s.tab);\n  const setTab = useChatStore((s) => s.setTab);\n  const { data } = useGetAgentQuery({ agentId });\n  // TODO: fix initial loading visuals here (uncached image)\n\n  const name = data?.agentSettingsAppearance?.displayName;\n  const iconUrl = data?.agentSettingsAppearance?.icon?.url;\n  return (\n    <CardHeader className=\"flex h-14 items-center justify-between rounded-t-lg bg-primary px-4! mx-[-1px] mt-[-1px] text-primary-foreground \">\n      <CardTitle>\n        {tab === \"chat\" && (\n          <div className=\"flex items-center gap-2\">\n            {iconUrl && (\n              <img\n                src={iconUrl}\n                alt=\"Chat Icon\"\n                className=\"inline-block w-4 h-4\"\n              />\n            )}\n            <Text\n              variant=\"h1\"\n              className=\"flex items-center gap-2 text-sm text-primary-foreground\"\n            >\n              {name}\n            </Text>\n          </div>\n        )}\n        {tab === \"history\" && (\n          <div className=\"flex items-center gap-2\">\n            <Button\n              onClick={() => setTab(\"chat\")}\n              variant=\"transparent\"\n              className=\"p-0!\"\n            >\n              <ArrowLeft className=\"size-4\" />\n            </Button>\n            <Text\n              variant=\"h1\"\n              className=\"flex items-center gap-2 text-sm text-primary-foreground\"\n            >\n              {t(\"header.history-tab-label\")}\n            </Text>\n          </div>\n        )}\n      </CardTitle>\n      {tab === \"chat\" && <HeaderMenu />}\n    </CardHeader>\n  );\n}\n\nHeader.displayName = \"ChatHeader\";\n"],"mappings":";;;;;;;;;AAWA,SAAgB,SAAS;CACvB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,YAAY,oBAAoB;CACxC,MAAM,MAAM,cAAc,MAAM,EAAE,GAAG;CACrC,MAAM,SAAS,cAAc,MAAM,EAAE,MAAM;CAC3C,MAAM,EAAE,SAAS,iBAAiB,EAAE,QAAQ,CAAC;CAG7C,MAAM,OAAO,MAAM,yBAAyB;CAC5C,MAAM,UAAU,MAAM,yBAAyB,MAAM;CACrD,OACE,qBAAC,YAAD;EAAY,WAAU;YAAtB,CACE,qBAAC,WAAD,EAAA,UAAA,CACG,QAAQ,UACP,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,WACC,oBAAC,OAAD;IACE,KAAK;IACL,KAAI;IACJ,WAAU;GACX,CAAA,GAEH,oBAAC,MAAD;IACE,SAAQ;IACR,WAAU;cAET;GACG,CAAA,CACH;MAEN,QAAQ,aACP,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IACE,eAAe,OAAO,MAAM;IAC5B,SAAQ;IACR,WAAU;cAEV,oBAAC,WAAD,EAAW,WAAU,SAAU,CAAA;GACzB,CAAA,GACR,oBAAC,MAAD;IACE,SAAQ;IACR,WAAU;cAET,EAAE,0BAA0B;GACzB,CAAA,CACH;IAEE,EAAA,CAAA,GACV,QAAQ,UAAU,oBAAC,YAAD,CAAa,CAAA,CACtB;;AAEhB;AAEA,OAAO,cAAc"}

package/dist/features/chat/history/history-empty.d.ts

@@ -0,0 +1,8 @@
+//#region src/features/chat/history/history-empty.d.ts
+declare function HistoryEmpty(): import("react").JSX.Element;
+declare namespace HistoryEmpty {
+  var displayName: string;
+}
+//#endregion
+export { HistoryEmpty };
+//# sourceMappingURL=history-empty.d.ts.map

package/dist/features/chat/history/history-empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"history-empty.d.ts","names":[],"sources":["../../../../src/features/chat/history/history-empty.tsx"],"mappings":";iBAWgB,YAAA,oBAAY,GAAA,CAAA,OAAA;AAAA,kBAAZ,YAAA;EAAA,IAAY,WAAA;AAAA"}