@chatsdk-dev/elements 0.0.1 → 0.1.3

package/README.md

@@ -1,4 +1,4 @@
-# @chatsdk-dev/elements
+# Elements
 
 AI components for ChatSDK
 
@@ -18,7 +18,7 @@ import "@chatsdk-dev/elements/styles.css";
 
 function App() {
   return (
-    <MoleculeProvider
+    <ChatSDKProvider
       config={{
         api: {
           convexUrl: process.env.NEXT_PUBLIC_CONVEX_CLOUD_URL,
@@ -26,7 +26,7 @@ function App() {
       }}
     >
       <Chat />
-    </MoleculeProvider>
+    </ChatSDKProvider>
   );
 }
 ```

package/dist/api-CIYPz72L.d.ts

@@ -0,0 +1,10 @@
+import { Config } from "@chatsdk-dev/api-client";
+
+//#region src/features/element/types/api.d.ts
+type APIOptions = Omit<Config, "headers"> & {
+  version?: "internal" | "v1";
+  headers?: Record<string, string>;
+} & Omit<RequestInit, "headers">;
+//#endregion
+export { APIOptions as t };
+//# sourceMappingURL=api-CIYPz72L.d.ts.map

package/dist/api-CIYPz72L.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-CIYPz72L.d.ts","names":[],"sources":["../src/features/element/types/api.ts"],"mappings":";;;KAEY,UAAA,GAAa,IAAA,CAAK,MAAA;EAC5B,OAAA;EACA,OAAA,GAAU,MAAA;AAAA,IACR,IAAA,CAAK,WAAA"}

package/dist/callbacks-PIvHXeEI.d.ts

@@ -0,0 +1,24 @@
+//#region src/features/element/types/callbacks.d.ts
+interface Callbacks<T> {
+  /** Callback function called when the component's query is loading (in flight)
+   * @type function
+   * @category Callbacks
+   * @details () => void
+   */
+  onloading?: () => void;
+  /** Callback function called when the component's query is successful, will receive the data as an argument that is forwarded to the rendering client as an argument
+   * @type function
+   * @category Callbacks
+   * @details (data: T) => void
+   */
+  onsuccess?: (data: T) => void;
+  /** Callback function called when the component's query is unsuccessful, will receive the error as an argument
+   * @type function
+   * @category Callbacks
+   * @details (error: string) => void
+   */
+  onerror?: (error: string) => void;
+}
+//#endregion
+export { Callbacks as t };
+//# sourceMappingURL=callbacks-PIvHXeEI.d.ts.map

package/dist/callbacks-PIvHXeEI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"callbacks-PIvHXeEI.d.ts","names":[],"sources":["../src/features/element/types/callbacks.tsx"],"mappings":";UAAiB,SAAA;EAAA;;;;;EAMf,SAAA;EAMA;;;;;EAAA,SAAA,IAAa,IAAA,EAAM,CAAA;EAMK;;;;;EAAxB,OAAA,IAAW,KAAA;AAAA"}

package/dist/chat-element-CCsDDFif.js

@@ -0,0 +1,441 @@
+import { createElementContext } from "./features/element/element-provider.js";
+import { useMergeElementConfig } from "./features/element/use-element-config.js";
+import { chatQueryKeys } from "./features/chat/queries/query-keys.js";
+import { useChatStore } from "./features/chat/store.js";
+import { ChatMenu } from "./features/chat/chat-header/chat-menu.js";
+import { renderRelativeTime } from "./common/utils.js";
+import { ChatHistoryEmpty } from "./features/chat/chat-history/chat-history-empty.js";
+import { getInitialMessagesFromStrings } from "./features/chat/utils.js";
+import { ArrowLeft, CheckIcon, GlobeIcon, Plus } from "lucide-react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { Card, CardHeader, CardTitle } from "@chatsdk-dev/ui/atoms/card";
+import { DotsLoader } from "@chatsdk-dev/ui/atoms/dots-loader";
+import { Text } from "@chatsdk-dev/ui/atoms/typography/text";
+import { Button } from "@chatsdk-dev/ui/atoms/button";
+import { getClient } from "@chatsdk-dev/api-client";
+import { Conversation, ConversationContent, ConversationScrollButton } from "@chatsdk-dev/ui/molecules/ai/conversation";
+import { ChatMessage } from "@chatsdk-dev/ui/molecules/chat-message";
+import { PromptInput, PromptInputButton, PromptInputSubmit, PromptInputTextarea, PromptInputTools } from "@chatsdk-dev/ui/molecules/ai/prompt-input";
+import { ModelSelector, ModelSelectorContent, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorTrigger } from "@chatsdk-dev/ui/molecules/ai/model-selector";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+//#region src/features/data-fetching/use-api-client.ts
+function useApiClient() {
+	const { api } = useElementConfig();
+	return getClient(api ?? {});
+}
+//#endregion
+//#region src/features/chat/queries/use-get-chat-query.ts
+function useGetChatQuery({ chatId }) {
+	const client = useApiClient();
+	return useQuery({
+		queryKey: chatQueryKeys.get(chatId),
+		queryFn: async () => {
+			const { data, error } = await client.chats.get({ path: { chatId } });
+			if (error) throw new Error("error" in error ? error.error : "Failed to fetch chat");
+			return data;
+		},
+		enabled: !!chatId
+	});
+}
+//#endregion
+//#region src/features/chat/chat-header/chat-header.tsx
+function ChatHeader({ chatId }) {
+	const { t } = useTranslation();
+	const { tab, setTab } = useChatStore();
+	const { data } = useGetChatQuery({ chatId });
+	const [_, setImgLoaded] = useState(false);
+	const name = data?.chatAppearanceSettings?.displayName;
+	const iconUrl = data?.chatAppearanceSettings?.icon?.url;
+	return /* @__PURE__ */ jsxs(CardHeader, {
+		className: "flex justify-between items-center h-14 bg-slate-900 dark:bg-zinc-400 rounded-t-lg px-4!",
+		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",
+				onLoad: () => setImgLoaded(true)
+			}), /* @__PURE__ */ jsx(Text, {
+				variant: "h1",
+				className: "text-sm text-background flex items-center gap-2",
+				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: "text-sm text-background flex items-center gap-2",
+				children: t("header.history-tab-label")
+			})]
+		})] }), tab === "chat" && /* @__PURE__ */ jsx(ChatMenu, {})]
+	});
+}
+//#endregion
+//#region src/features/chat/queries/use-list-conversations-query.ts
+function useListConversationsQuery({ chatId }) {
+	const client = useApiClient();
+	const { context } = useElementConfig();
+	return useQuery({
+		queryKey: chatQueryKeys.listConversations(chatId),
+		queryFn: async () => {
+			const { data, error } = await client.chats.conversations.list({
+				path: { chatId },
+				query: { actorId: context?.actor?.id ?? "" }
+			});
+			if (error) throw new Error("error" in error ? error.error : "Failed to fetch conversations");
+			return data.conversations.reverse();
+		},
+		enabled: !!chatId
+	});
+}
+//#endregion
+//#region src/features/chat/chat-history/chat-history.tsx
+function ChatHistory() {
+	const { t, i18n } = useTranslation("chat", { keyPrefix: "history" });
+	const queryClient = useQueryClient();
+	const { chatId } = useElementComponent();
+	const { data, isLoading } = useListConversationsQuery({ chatId });
+	const { setSelectedConversationId, setTab, setConversationType } = useChatStore();
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "w-full h-full flex items-center justify-center",
+		children: /* @__PURE__ */ jsx(DotsLoader, {})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex-1 min-h-0 flex flex-col gap-1 overflow-y-auto gap-2 p-2",
+		children: [data?.length === 0 ? /* @__PURE__ */ jsx(ChatHistoryEmpty, {}) : data?.map((conversation, index) => /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			className: "flex flex-col items-start justify-center gap-2 px-3 py-2 h-auto text-left",
+			onClick: () => {
+				queryClient.invalidateQueries({ queryKey: chatQueryKeys.conversation(chatId, conversation._id) });
+				setSelectedConversationId(conversation._id);
+				setTab("chat");
+				setConversationType("history");
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "self-stretch flex justify-between gap-1",
+				children: [/* @__PURE__ */ jsxs(Text, {
+					className: "truncate text-sm",
+					children: [
+						data.length - index,
+						":",
+						" ",
+						conversation.title ?? t("unitled-conversation")
+					]
+				}), /* @__PURE__ */ jsx(Text, {
+					variant: "tiny",
+					color: "muted",
+					children: renderRelativeTime({
+						date: conversation._creationTime,
+						locale: i18n.language
+					})
+				})]
+			}), /* @__PURE__ */ jsx(Text, {
+				className: "flex-1 min-w-0 max-w-full truncate",
+				variant: "paragraph2",
+				color: "muted",
+				children: conversation.summary
+			})]
+		}, conversation._id)), /* @__PURE__ */ jsxs(Button, {
+			className: "absolute bottom-6 left-1/2 -translate-x-1/2",
+			onClick: () => {
+				setConversationType("new");
+				setSelectedConversationId();
+				setTab("chat");
+			},
+			children: [/* @__PURE__ */ jsx(Plus, { className: "size-4" }), t("new-conversation")]
+		})]
+	});
+}
+//#endregion
+//#region src/features/chat/chat-prompt-input.tsx
+function ChatPromptInput({ chatId, onSubmit, onModelChange, status, ref }) {
+	const { data } = useGetChatQuery({ chatId });
+	const defaultModel = data?.chatModelSettings?.defaultModel;
+	const allowedModels = data?.chatModelSettings?.allowedModels;
+	const [input, setInput] = useState("");
+	const [model, setModel] = useState(defaultModel?.name);
+	const [modelSelectorOpen, setModelSelectorOpen] = useState(false);
+	const [webSearch, setWebSearch] = useState(false);
+	const selectedModel = allowedModels?.find((m) => m.name === model);
+	const modelGroups = allowedModels?.map((m) => m.chef);
+	const hasMultipleModels = allowedModels && allowedModels.length > 1;
+	const hasActions = hasMultipleModels || true;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsxs(PromptInput, {
+			onSubmit: (message, event) => {
+				onSubmit(message, event);
+				setInput("");
+			},
+			children: [/* @__PURE__ */ jsx(PromptInputTextarea, {
+				ref,
+				placeholder: data?.chatBaseSettings?.inputPlaceholder,
+				onChange: (e) => setInput(e.target.value),
+				value: input
+			}), /* @__PURE__ */ jsx(PromptInputSubmit, {
+				className: "m-1.5 self-end",
+				disabled: !input,
+				status
+			})]
+		}), hasActions && /* @__PURE__ */ jsxs(PromptInputTools, { children: [/* @__PURE__ */ jsxs(PromptInputButton, {
+			variant: webSearch ? "primary" : "ghost",
+			onClick: () => setWebSearch(!webSearch),
+			children: [/* @__PURE__ */ jsx(GlobeIcon, { size: 16 }), /* @__PURE__ */ jsx("span", { children: "Search" })]
+		}), hasMultipleModels && /* @__PURE__ */ jsxs(ModelSelector, {
+			onOpenChange: setModelSelectorOpen,
+			open: modelSelectorOpen,
+			children: [/* @__PURE__ */ jsx(ModelSelectorTrigger, { children: /* @__PURE__ */ jsxs(PromptInputButton, { children: [selectedModel?.chefSlug && /* @__PURE__ */ jsx(ModelSelectorLogo, { provider: selectedModel.chefSlug }), /* @__PURE__ */ jsx(ModelSelectorName, { children: selectedModel?.name })] }) }), /* @__PURE__ */ jsxs(ModelSelectorContent, { children: [/* @__PURE__ */ jsx(ModelSelectorInput, { placeholder: "Search models..." }), /* @__PURE__ */ jsxs(ModelSelectorList, { children: [/* @__PURE__ */ jsx(ModelSelectorEmpty, { children: "No models found." }), modelGroups?.map((chef) => /* @__PURE__ */ jsx(ModelSelectorGroup, {
+				heading: chef,
+				children: allowedModels.filter((m) => m.chef === chef).map((m) => /* @__PURE__ */ jsxs(ModelSelectorItem, {
+					onSelect: () => {
+						setModel(m.name);
+						onModelChange?.(m);
+						setModelSelectorOpen(false);
+					},
+					value: m.name,
+					children: [
+						/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: m.chefSlug }),
+						/* @__PURE__ */ jsx(ModelSelectorName, { children: m.name }),
+						/* @__PURE__ */ jsx(ModelSelectorLogoGroup, { children: m.providers.map((provider) => /* @__PURE__ */ jsx(ModelSelectorLogo, { provider }, provider)) }),
+						selectedModel?.name === m.name ? /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto size-4" }) : /* @__PURE__ */ jsx("div", { className: "ml-auto size-4" })
+					]
+				}, m.name))
+			}, chef))] })] })]
+		})] })]
+	});
+}
+//#endregion
+//#region src/features/chat/queries/use-get-conversation-query.ts
+async function getConversation({ client, chatId, actorId, conversationId }) {
+	if (!conversationId) {
+		const { data: newConversation, error } = await client.chats.conversations.create({
+			path: { chatId },
+			body: { actorId }
+		});
+		if (error) throw new Error("error" in error ? error.error : "Failed to create conversation");
+		useChatStore.setState({
+			...useChatStore.getState(),
+			selectedConversationId: newConversation._id
+		});
+		return newConversation;
+	}
+	const { data, error } = await client.chats.conversations.get({ path: {
+		chatId,
+		conversationId
+	} });
+	if (error) throw new Error("error" in error ? error.error : "Failed to fetch conversation");
+	return data;
+}
+function getConversationQueryConfig({ chatId, conversationId, client, actorId }) {
+	return {
+		queryKey: chatQueryKeys.conversation(chatId, conversationId),
+		queryFn: () => getConversation({
+			client,
+			chatId,
+			conversationId,
+			actorId
+		})
+	};
+}
+function useGetConversationQuery({ chatId, conversationId }) {
+	const client = useApiClient();
+	const { context } = useElementConfig();
+	return useQuery({
+		...getConversationQueryConfig({
+			chatId,
+			conversationId,
+			client,
+			actorId: context?.actor?.id ?? ""
+		}),
+		enabled: !!chatId,
+		staleTime: 200
+	});
+}
+//#endregion
+//#region src/features/chat/chat-main/use-initial-messages.tsx
+function useInitialMessages() {
+	const { selectedConversationId } = useChatStore();
+	const { chatId } = useElementComponent();
+	const { data } = useGetChatQuery({ chatId });
+	const { data: conversation } = useGetConversationQuery({
+		chatId,
+		conversationId: selectedConversationId
+	});
+	const conversationMessages = useMemo(() => {
+		if (!selectedConversationId) return void 0;
+		return conversation?.messages?.map((msg) => {
+			return {
+				id: msg.id,
+				role: msg.role,
+				parts: msg.parts.map((p) => ({
+					type: "text",
+					text: p.text ?? ""
+				})),
+				metadata: msg
+			};
+		});
+	}, [conversation, selectedConversationId]);
+	return useMemo(() => {
+		return [...getInitialMessagesFromStrings(data?.chatBaseSettings?.initialChatMessages ?? []), ...conversationMessages ?? []];
+	}, [data?.chatBaseSettings?.initialChatMessages, conversationMessages]);
+}
+//#endregion
+//#region src/features/chat/chat-main/use-chat.tsx
+function useChat$1() {
+	const client = useApiClient();
+	const { config, component } = useElement();
+	const { selectedConversationId, conversationType } = useChatStore();
+	const initialMessages = useInitialMessages();
+	const useChatResult = useChat({
+		messages: initialMessages,
+		transport: new DefaultChatTransport({
+			prepareSendMessagesRequest: ({ body, headers, credentials, id, messages, trigger, messageId }) => {
+				return {
+					api: client.getUrl("chats.conversations.completion", {
+						chatId: component.chatId,
+						conversationId: body?.conversationId || "new"
+					}),
+					body: {
+						...body,
+						id,
+						messages,
+						trigger,
+						messageId
+					},
+					headers,
+					credentials
+				};
+			},
+			headers: { ...config.api?.headers }
+		})
+	});
+	useEffect(() => {
+		if (conversationType === "history" || !selectedConversationId) {
+			useChatResult.stop();
+			useChatResult.setMessages(initialMessages);
+		}
+	}, [
+		conversationType,
+		selectedConversationId,
+		initialMessages
+	]);
+	return useChatResult;
+}
+//#endregion
+//#region src/features/chat/chat-main/chat-main.tsx
+function ChatMain() {
+	const queryClient = useQueryClient();
+	const client = useApiClient();
+	const { chatId } = useElementComponent();
+	const { context } = useElementConfig();
+	const { selectedConversationId } = useChatStore();
+	const { data: conversation } = useGetConversationQuery({
+		chatId,
+		conversationId: selectedConversationId
+	});
+	const { messages, sendMessage, status } = useChat$1();
+	const promptInputRef = useRef(null);
+	useEffect(() => {
+		promptInputRef.current?.focus();
+	}, [selectedConversationId]);
+	const handleSubmit = async (message) => {
+		let conversationId = conversation?._id;
+		if (!conversation) conversationId = (await queryClient.fetchQuery({ ...getConversationQueryConfig({
+			chatId,
+			conversationId: selectedConversationId,
+			client,
+			actorId: context?.actor?.id ?? ""
+		}) }))._id;
+		sendMessage({ text: message.text }, { body: { conversationId } });
+	};
+	const lastMessage = messages[messages.length - 1];
+	const isWaitingForContent = status === "submitted" || status === "streaming" && lastMessage?.role === "assistant" && !lastMessage.parts.some((part) => part.type === "text" && part.text.length > 0);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Conversation, { children: [/* @__PURE__ */ jsxs(ConversationContent, { children: [/* @__PURE__ */ jsx(ChatMessage, {
+		messages,
+		status
+	}), isWaitingForContent && /* @__PURE__ */ jsx(DotsLoader, {})] }), /* @__PURE__ */ jsx(ConversationScrollButton, {})] }), /* @__PURE__ */ jsx("div", {
+		className: "m-4 my-2",
+		children: /* @__PURE__ */ jsx(ChatPromptInput, {
+			ref: promptInputRef,
+			chatId,
+			onSubmit: handleSubmit,
+			status
+		})
+	})] });
+}
+ChatMain.displayName = "ChatMain";
+//#endregion
+//#region src/features/chat/chat-card.tsx
+function ChatCard() {
+	const { t } = useTranslation();
+	const { chatId } = useElementComponent();
+	const { tab, selectedConversationId, conversationType } = useChatStore();
+	useListConversationsQuery({ chatId });
+	const { isLoading, data: chat } = useGetChatQuery({ chatId });
+	const { isLoading: isConversationLoading } = useGetConversationQuery({
+		chatId,
+		conversationId: selectedConversationId
+	});
+	const canCreateMessage = chat?.chatModelSettings?.allowedModels && chat?.chatModelSettings?.allowedModels.length > 0;
+	if (!canCreateMessage && chat?.chatBaseSettings?.hideChatWhenInsufficientCredits) return null;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "min-w-[320px] h-[640px] w-[400px] 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, {})
+			}),
+			/* @__PURE__ */ jsx(ChatHeader, { chatId }),
+			conversationType === "history" && isConversationLoading && /* @__PURE__ */ jsx("div", {
+				className: "flex-1 flex items-center justify-center z-10 bg-card rounded-lg",
+				children: /* @__PURE__ */ jsx(DotsLoader, {})
+			}),
+			!isLoading && (conversationType === "new" || !isConversationLoading) && /* @__PURE__ */ jsxs("div", {
+				className: tab !== "chat" ? "hidden" : "flex flex-col flex-1 min-h-0",
+				children: [conversationType === "history" && isConversationLoading && /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 flex items-center justify-center z-10 bg-card rounded-lg",
+					children: /* @__PURE__ */ jsx(DotsLoader, {})
+				}), canCreateMessage ? /* @__PURE__ */ jsx(ChatMain, {}) : /* @__PURE__ */ jsx("div", {
+					className: "m-4 h-full flex items-center justify-center",
+					children: /* @__PURE__ */ jsx(Text, {
+						variant: "paragraph1",
+						color: "muted",
+						className: "text-center font-light italic",
+						children: t("chat-card.insufficient-credits-error")
+					})
+				})]
+			}),
+			!isLoading && tab === "history" && /* @__PURE__ */ jsx(ChatHistory, {})
+		]
+	});
+}
+//#endregion
+//#region src/features/chat/chat-element.tsx
+const { ElementProvider, useElement, useElementConfig, useElementComponent, useElementCallbacks } = createElementContext({ name: "ChatSDK.Chat" });
+function ChatElement(props) {
+	const { config, callbacks, ...componentProps } = useMergeElementConfig({
+		props,
+		name: "ChatSDK.Chat"
+	});
+	if (!componentProps.chatId) return null;
+	return /* @__PURE__ */ jsx(ElementProvider, {
+		config,
+		component: componentProps,
+		callbacks,
+		children: /* @__PURE__ */ jsx(ChatCard, {})
+	});
+}
+ChatElement.displayName = "ChatSDK.ChatElement";
+//#endregion
+export { useGetChatQuery as _, useElementComponent as a, ChatMain as c, getConversationQueryConfig as d, useGetConversationQuery as f, ChatHeader as g, useListConversationsQuery as h, useElementCallbacks as i, useChat$1 as l, ChatHistory as m, ElementProvider as n, useElementConfig as o, ChatPromptInput as p, useElement as r, ChatCard as s, ChatElement as t, useInitialMessages as u, useApiClient as v };
+
+//# sourceMappingURL=chat-element-CCsDDFif.js.map

package/dist/chat-element-CCsDDFif.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-element-CCsDDFif.js","names":["useChat","useAiChat","useChat"],"sources":["../src/features/data-fetching/use-api-client.ts","../src/features/chat/queries/use-get-chat-query.ts","../src/features/chat/chat-header/chat-header.tsx","../src/features/chat/queries/use-list-conversations-query.ts","../src/features/chat/chat-history/chat-history.tsx","../src/features/chat/chat-prompt-input.tsx","../src/features/chat/queries/use-get-conversation-query.ts","../src/features/chat/chat-main/use-initial-messages.tsx","../src/features/chat/chat-main/use-chat.tsx","../src/features/chat/chat-main/chat-main.tsx","../src/features/chat/chat-card.tsx","../src/features/chat/chat-element.tsx"],"sourcesContent":["import { getClient } from \"@chatsdk-dev/api-client\";\nimport { useElementConfig } from \"../chat/chat-element\";\n\nexport function useApiClient() {\n  const { api } = useElementConfig();\n  return getClient(api ?? {});\n}\n","import { useQuery } from \"@tanstack/react-query\";\n\nimport { useApiClient } from \"../../data-fetching/use-api-client\";\nimport { chatQueryKeys } from \"./query-keys\";\n\ninterface UseGetChatQueryProps {\n  chatId?: string;\n}\n\nexport function useGetChatQuery({ chatId }: UseGetChatQueryProps) {\n  const client = useApiClient();\n\n  return useQuery({\n    queryKey: chatQueryKeys.get(chatId),\n    queryFn: async () => {\n      const { data, error } = await client.chats.get({\n        path: { chatId: chatId! },\n      });\n\n      if (error) {\n        throw new Error(\n          \"error\" in error ? error.error : \"Failed to fetch chat\",\n        );\n      }\n\n      return data;\n    },\n    enabled: !!chatId,\n  });\n}\n","import { ArrowLeft } from \"lucide-react\";\nimport { useState } from \"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 { useGetChatQuery } from \"../queries/use-get-chat-query\";\nimport { useChatStore } from \"../store\";\nimport { ChatMenu } from \"./chat-menu\";\n\ninterface ChatTitleProps {\n  chatId?: string;\n}\n\nexport function ChatHeader({ chatId }: ChatTitleProps) {\n  const { t } = useTranslation();\n  const { tab, setTab } = useChatStore();\n  const { data } = useGetChatQuery({ chatId });\n  // TODO: fix initial loading visuals here (uncached image)\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const [_, setImgLoaded] = useState(false);\n\n  const name = data?.chatAppearanceSettings?.displayName;\n  const iconUrl = data?.chatAppearanceSettings?.icon?.url;\n\n  return (\n    <CardHeader className=\"flex justify-between items-center h-14 bg-slate-900 dark:bg-zinc-400 rounded-t-lg px-4!\">\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                onLoad={() => setImgLoaded(true)}\n              />\n            )}\n            <Text\n              variant=\"h1\"\n              className=\"text-sm text-background flex items-center gap-2\"\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=\"text-sm text-background flex items-center gap-2\"\n            >\n              {t(\"header.history-tab-label\")}\n            </Text>\n          </div>\n        )}\n      </CardTitle>\n      {tab === \"chat\" && <ChatMenu />}\n    </CardHeader>\n  );\n}\n","import { useQuery } from \"@tanstack/react-query\";\n\nimport { useApiClient } from \"../../data-fetching/use-api-client\";\nimport { useElementConfig } from \"../chat-element\";\nimport { chatQueryKeys } from \"./query-keys\";\n\ninterface UseListConversationsQueryProps {\n  chatId: string;\n}\n\nexport function useListConversationsQuery({\n  chatId,\n}: UseListConversationsQueryProps) {\n  const client = useApiClient();\n  const { context } = useElementConfig();\n\n  return useQuery({\n    queryKey: chatQueryKeys.listConversations(chatId),\n    queryFn: async () => {\n      const { data, error } = await client.chats.conversations.list({\n        path: { chatId },\n        query: { actorId: context?.actor?.id ?? \"\" },\n      });\n\n      if (error) {\n        throw new Error(\n          \"error\" in error ? error.error : \"Failed to fetch conversations\",\n        );\n      }\n\n      return data.conversations.reverse();\n    },\n    enabled: !!chatId,\n  });\n}\n","import { useQueryClient } from \"@tanstack/react-query\";\nimport { Plus } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } from \"@chatsdk-dev/ui/atoms/button\";\nimport { DotsLoader } from \"@chatsdk-dev/ui/atoms/dots-loader\";\nimport { Text } from \"@chatsdk-dev/ui/atoms/typography/text\";\n\nimport { renderRelativeTime } from \"../../../common/utils\";\nimport { useElementComponent } from \"../chat-element\";\nimport { chatQueryKeys } from \"../queries/query-keys\";\nimport { useListConversationsQuery } from \"../queries/use-list-conversations-query\";\nimport { useChatStore } from \"../store\";\nimport { ChatHistoryEmpty } from \"./chat-history-empty\";\n\nexport function ChatHistory() {\n  const { t, i18n } = useTranslation(\"chat\", { keyPrefix: \"history\" });\n  const queryClient = useQueryClient();\n  const { chatId } = useElementComponent();\n  const { data, isLoading } = useListConversationsQuery({ chatId });\n  const { setSelectedConversationId, setTab, setConversationType } =\n    useChatStore();\n\n  if (isLoading) {\n    return (\n      <div className=\"w-full h-full flex items-center justify-center\">\n        <DotsLoader />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex-1 min-h-0 flex flex-col gap-1 overflow-y-auto gap-2 p-2\">\n      {data?.length === 0 ? (\n        <ChatHistoryEmpty />\n      ) : (\n        data?.map((conversation, index) => (\n          <Button\n            key={conversation._id}\n            variant=\"ghost\"\n            className=\"flex flex-col items-start justify-center gap-2 px-3 py-2 h-auto text-left\"\n            onClick={() => {\n              // invalidate the conversation query to make sure last conversation messages are loaded\n              queryClient.invalidateQueries({\n                queryKey: chatQueryKeys.conversation(chatId, conversation._id),\n              });\n              setSelectedConversationId(conversation._id);\n              setTab(\"chat\");\n              setConversationType(\"history\");\n            }}\n          >\n            <div className=\"self-stretch flex justify-between gap-1\">\n              <Text className=\"truncate text-sm\">\n                {data.length - index}:{\" \"}\n                {conversation.title ?? t(\"unitled-conversation\")}\n              </Text>\n              <Text variant=\"tiny\" color=\"muted\">\n                {renderRelativeTime({\n                  date: conversation._creationTime,\n                  locale: i18n.language,\n                })}\n              </Text>\n            </div>\n            <Text\n              className=\"flex-1 min-w-0 max-w-full truncate\"\n              variant=\"paragraph2\"\n              color=\"muted\"\n            >\n              {conversation.summary}\n            </Text>\n          </Button>\n        ))\n      )}\n      <Button\n        className=\"absolute bottom-6 left-1/2 -translate-x-1/2\"\n        onClick={() => {\n          setConversationType(\"new\");\n          setSelectedConversationId();\n          setTab(\"chat\");\n        }}\n      >\n        <Plus className=\"size-4\" />\n        {t(\"new-conversation\")}\n      </Button>\n    </div>\n  );\n}\n","\"use client\";\n\nimport type { ChatStatus } from \"ai\";\nimport { CheckIcon, GlobeIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport {\n  PromptInput,\n  PromptInputButton,\n  PromptInputMessage,\n  PromptInputSubmit,\n  PromptInputTextarea,\n  PromptInputTools,\n} from \"@chatsdk-dev/ui/molecules/ai/prompt-input\";\n\nimport type { ChatModelSettings } from \"@chatsdk-dev/api-client\";\nimport {\n  ModelSelector,\n  ModelSelectorContent,\n  ModelSelectorEmpty,\n  ModelSelectorGroup,\n  ModelSelectorInput,\n  ModelSelectorItem,\n  ModelSelectorList,\n  ModelSelectorLogo,\n  ModelSelectorLogoGroup,\n  ModelSelectorName,\n  ModelSelectorTrigger,\n} from \"@chatsdk-dev/ui/molecules/ai/model-selector\";\n\nimport { useGetChatQuery } from \"./queries/use-get-chat-query\";\n\ninterface ChatPromptInputProps {\n  chatId?: string;\n  onSubmit: (\n    message: PromptInputMessage,\n    event: React.SubmitEvent<HTMLFormElement>,\n  ) => void;\n  onModelChange?: (model: ChatModelSettings[\"defaultModel\"]) => void;\n  onWebSearchChange?: (webSearch: boolean) => void;\n  status: ChatStatus;\n  ref: React.RefObject<HTMLTextAreaElement | null>;\n}\n\nexport function ChatPromptInput({\n  chatId,\n  onSubmit,\n  onModelChange,\n  status,\n  ref,\n}: ChatPromptInputProps) {\n  const { data } = useGetChatQuery({ chatId });\n  const defaultModel = data?.chatModelSettings?.defaultModel;\n  const allowedModels = data?.chatModelSettings?.allowedModels;\n\n  const [input, setInput] = useState(\"\");\n  const [model, setModel] = useState<string | undefined>(defaultModel?.name);\n  const [modelSelectorOpen, setModelSelectorOpen] = useState(false);\n  const [webSearch, setWebSearch] = useState(false);\n\n  const selectedModel = allowedModels?.find((m) => m.name === model);\n  const modelGroups = allowedModels?.map((m) => m.chef);\n\n  const hasMultipleModels = allowedModels && allowedModels.length > 1;\n  const hasActions = hasMultipleModels || true; // true because Search is always shown\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <PromptInput\n        onSubmit={(message, event) => {\n          onSubmit(message, event as React.SubmitEvent<HTMLFormElement>);\n          setInput(\"\");\n        }}\n      >\n        <PromptInputTextarea\n          ref={ref}\n          placeholder={data?.chatBaseSettings?.inputPlaceholder}\n          onChange={(e) => setInput(e.target.value)}\n          value={input}\n        />\n        <PromptInputSubmit\n          className=\"m-1.5 self-end\"\n          disabled={!input}\n          status={status}\n        />\n      </PromptInput>\n\n      {/* Actions row below the border */}\n      {hasActions && (\n        <PromptInputTools>\n          <PromptInputButton\n            variant={webSearch ? \"primary\" : \"ghost\"}\n            onClick={() => setWebSearch(!webSearch)}\n          >\n            <GlobeIcon size={16} />\n            <span>Search</span>\n          </PromptInputButton>\n          {hasMultipleModels && (\n            <ModelSelector\n              onOpenChange={setModelSelectorOpen}\n              open={modelSelectorOpen}\n            >\n              <ModelSelectorTrigger>\n                <PromptInputButton>\n                  {selectedModel?.chefSlug && (\n                    <ModelSelectorLogo provider={selectedModel.chefSlug} />\n                  )}\n                  <ModelSelectorName>{selectedModel?.name}</ModelSelectorName>\n                </PromptInputButton>\n              </ModelSelectorTrigger>\n              <ModelSelectorContent>\n                <ModelSelectorInput placeholder=\"Search models...\" />\n                <ModelSelectorList>\n                  <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>\n                  {modelGroups?.map((chef) => (\n                    <ModelSelectorGroup key={chef} heading={chef}>\n                      {allowedModels\n                        .filter((m) => m.chef === chef)\n                        .map((m) => (\n                          <ModelSelectorItem\n                            key={m.name}\n                            onSelect={() => {\n                              setModel(m.name);\n                              onModelChange?.(m);\n                              setModelSelectorOpen(false);\n                            }}\n                            value={m.name}\n                          >\n                            <ModelSelectorLogo provider={m.chefSlug} />\n                            <ModelSelectorName>{m.name}</ModelSelectorName>\n                            <ModelSelectorLogoGroup>\n                              {m.providers.map((provider) => (\n                                <ModelSelectorLogo\n                                  key={provider}\n                                  provider={provider}\n                                />\n                              ))}\n                            </ModelSelectorLogoGroup>\n                            {selectedModel?.name === m.name ? (\n                              <CheckIcon className=\"ml-auto size-4\" />\n                            ) : (\n                              <div className=\"ml-auto size-4\" />\n                            )}\n                          </ModelSelectorItem>\n                        ))}\n                    </ModelSelectorGroup>\n                  ))}\n                </ModelSelectorList>\n              </ModelSelectorContent>\n            </ModelSelector>\n          )}\n        </PromptInputTools>\n      )}\n    </div>\n  );\n}\n","import { useQuery } from \"@tanstack/react-query\";\n\nimport { ChatSDK } from \"@chatsdk-dev/api-client\";\n\nimport { useApiClient } from \"../../data-fetching/use-api-client\";\nimport { useElementConfig } from \"../chat-element\";\nimport { useChatStore } from \"../store\";\nimport { chatQueryKeys } from \"./query-keys\";\n\ninterface GetConversationParams {\n  client: ChatSDK;\n  chatId: string;\n  actorId: string;\n  conversationId?: string;\n}\n\nasync function getConversation({\n  client,\n  chatId,\n  actorId,\n  conversationId,\n}: GetConversationParams) {\n  // create conversation if no conversation id is provided (conversation doesn't exist yet)\n  if (!conversationId) {\n    const { data: newConversation, error } =\n      await client.chats.conversations.create({\n        path: { chatId: chatId! },\n        body: { actorId },\n      });\n    if (error) {\n      throw new Error(\n        \"error\" in error ? error.error : \"Failed to create conversation\",\n      );\n    }\n    useChatStore.setState({\n      ...useChatStore.getState(),\n      selectedConversationId: newConversation._id,\n    });\n    return newConversation;\n  }\n\n  const { data, error } = await client.chats.conversations.get({\n    path: { chatId, conversationId },\n  });\n\n  if (error) {\n    throw new Error(\n      \"error\" in error ? error.error : \"Failed to fetch conversation\",\n    );\n  }\n\n  return data;\n}\n\ninterface GetConversationQueryConfigParams {\n  chatId: string;\n  conversationId?: string;\n  actorId: string;\n  client: ChatSDK;\n}\n\nexport function getConversationQueryConfig({\n  chatId,\n  conversationId,\n  client,\n  actorId,\n}: GetConversationQueryConfigParams) {\n  return {\n    queryKey: chatQueryKeys.conversation(chatId, conversationId),\n    queryFn: () => getConversation({ client, chatId, conversationId, actorId }),\n  };\n}\n\ninterface UseGetConversationQueryProps {\n  chatId?: string;\n  conversationId?: string | null;\n}\n\nexport function useGetConversationQuery({\n  chatId,\n  conversationId,\n}: UseGetConversationQueryProps) {\n  const client = useApiClient();\n  const { context } = useElementConfig();\n\n  return useQuery({\n    ...getConversationQueryConfig({\n      chatId: chatId!,\n      conversationId: conversationId!,\n      client,\n      actorId: context?.actor?.id ?? \"\",\n    }),\n    enabled: !!chatId,\n    staleTime: 200,\n  });\n}\n","import { useMemo } from \"react\";\n\nimport { useElementComponent } from \"../chat-element\";\nimport { useGetChatQuery } from \"../queries/use-get-chat-query\";\nimport { useGetConversationQuery } from \"../queries/use-get-conversation-query\";\nimport { useChatStore } from \"../store\";\nimport { getInitialMessagesFromStrings } from \"../utils\";\n\nexport function useInitialMessages() {\n  const { selectedConversationId } = useChatStore();\n  const { chatId } = useElementComponent();\n  const { data } = useGetChatQuery({ chatId });\n  const { data: conversation } = useGetConversationQuery({\n    chatId,\n    conversationId: selectedConversationId,\n  });\n\n  const conversationMessages = useMemo(() => {\n    if (!selectedConversationId) return undefined;\n\n    return conversation?.messages?.map((msg) => {\n      return {\n        id: msg.id,\n        role: msg.role as \"user\" | \"assistant\" | \"system\",\n        parts: msg.parts.map((p) => ({\n          type: \"text\" as const,\n          text: p.text ?? \"\",\n        })),\n        metadata: msg,\n      };\n    });\n  }, [conversation, selectedConversationId]);\n\n  const initialMessages = useMemo(() => {\n    const initialChatMessages = getInitialMessagesFromStrings(\n      data?.chatBaseSettings?.initialChatMessages ?? [],\n    );\n\n    return [...initialChatMessages, ...(conversationMessages ?? [])];\n  }, [data?.chatBaseSettings?.initialChatMessages, conversationMessages]);\n\n  return initialMessages;\n}\n","\"use client\";\n\nimport { useChat as useAiChat } from \"@ai-sdk/react\";\nimport { DefaultChatTransport } from \"ai\";\nimport { useEffect } from \"react\";\n\nimport { useApiClient } from \"../../data-fetching/use-api-client\";\nimport { useElement } from \"../chat-element\";\nimport { useChatStore } from \"../store\";\nimport { useInitialMessages } from \"./use-initial-messages\";\n\nexport function useChat() {\n  const client = useApiClient();\n  const { config, component } = useElement();\n  const { selectedConversationId, conversationType } = useChatStore();\n\n  const initialMessages = useInitialMessages();\n\n  const useChatResult = useAiChat({\n    messages: initialMessages,\n\n    transport: new DefaultChatTransport({\n      prepareSendMessagesRequest: ({\n        body,\n        headers,\n        credentials,\n        id,\n        messages,\n        trigger,\n        messageId,\n      }) => {\n        return {\n          api: client.getUrl(\"chats.conversations.completion\", {\n            chatId: component.chatId,\n            conversationId: body?.conversationId || \"new\",\n          }),\n          body: {\n            ...body,\n            id,\n            messages,\n            trigger,\n            messageId,\n          },\n          headers,\n          credentials,\n        };\n      },\n      headers: {\n        ...config.api?.headers,\n      },\n    }),\n  });\n\n  useEffect(() => {\n    if (conversationType === \"history\" || !selectedConversationId) {\n      useChatResult.stop();\n      useChatResult.setMessages(initialMessages);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [conversationType, selectedConversationId, initialMessages]);\n\n  return useChatResult;\n}\n","\"use client\";\n\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { Fragment, useEffect, useRef } from \"react\";\n\nimport { DotsLoader } from \"@chatsdk-dev/ui/atoms/dots-loader\";\nimport {\n  Conversation,\n  ConversationContent,\n  ConversationScrollButton,\n} from \"@chatsdk-dev/ui/molecules/ai/conversation\";\nimport type { PromptInputMessage } from \"@chatsdk-dev/ui/molecules/ai/prompt-input\";\nimport { ChatMessage } from \"@chatsdk-dev/ui/molecules/chat-message\";\n\nimport { useApiClient } from \"../../data-fetching/use-api-client\";\nimport { useElementComponent, useElementConfig } from \"../chat-element\";\nimport { ChatPromptInput } from \"../chat-prompt-input\";\nimport {\n  getConversationQueryConfig,\n  useGetConversationQuery,\n} from \"../queries/use-get-conversation-query\";\nimport { useChatStore } from \"../store\";\nimport { useChat } from \"./use-chat\";\n\nexport function ChatMain() {\n  const queryClient = useQueryClient();\n  const client = useApiClient();\n\n  const { chatId } = useElementComponent();\n  const { context } = useElementConfig();\n  const { selectedConversationId } = useChatStore();\n  const { data: conversation } = useGetConversationQuery({\n    chatId,\n    conversationId: selectedConversationId,\n  });\n  const { messages, sendMessage, status } = useChat();\n\n  const promptInputRef = useRef<HTMLTextAreaElement>(null);\n\n  // Focus when user starts a new conversation within the same chat\n  useEffect(() => {\n    promptInputRef.current?.focus();\n  }, [selectedConversationId]);\n\n  const handleSubmit = async (message: PromptInputMessage) => {\n    let conversationId = conversation?._id;\n    if (!conversation) {\n      const newConversation = await queryClient.fetchQuery({\n        ...getConversationQueryConfig({\n          chatId,\n          conversationId: selectedConversationId,\n          client,\n          actorId: context?.actor?.id ?? \"\",\n        }),\n      });\n      conversationId = newConversation._id;\n    }\n    sendMessage({ text: message.text }, { body: { conversationId } });\n  };\n\n  // loading state until the last assistant message has some content\n  const lastMessage = messages[messages.length - 1];\n  const isWaitingForContent =\n    status === \"submitted\" ||\n    (status === \"streaming\" &&\n      lastMessage?.role === \"assistant\" &&\n      !lastMessage.parts.some(\n        (part) => part.type === \"text\" && part.text.length > 0,\n      ));\n\n  return (\n    <Fragment>\n      <Conversation>\n        <ConversationContent>\n          <ChatMessage messages={messages} status={status} />\n          {isWaitingForContent && <DotsLoader />}\n        </ConversationContent>\n        <ConversationScrollButton />\n      </Conversation>\n      <div className=\"m-4 my-2\">\n        <ChatPromptInput\n          ref={promptInputRef}\n          chatId={chatId}\n          onSubmit={handleSubmit}\n          status={status}\n        />\n      </div>\n    </Fragment>\n  );\n}\n\nChatMain.displayName = \"ChatMain\";\n","import { useTranslation } from \"react-i18next\";\n\nimport { Card } from \"@chatsdk-dev/ui/atoms/card\";\nimport { DotsLoader } from \"@chatsdk-dev/ui/atoms/dots-loader\";\nimport { Text } from \"@chatsdk-dev/ui/atoms/typography/text\";\n\nimport { useElementComponent } from \"./chat-element\";\nimport { ChatHeader } from \"./chat-header/chat-header\";\nimport { ChatHistory } from \"./chat-history/chat-history\";\nimport { ChatMain } from \"./chat-main/chat-main\";\nimport { useGetChatQuery } from \"./queries/use-get-chat-query\";\nimport { useGetConversationQuery } from \"./queries/use-get-conversation-query\";\nimport { useListConversationsQuery } from \"./queries/use-list-conversations-query\";\nimport { useChatStore } from \"./store\";\n\nexport function ChatCard() {\n  const { t } = useTranslation();\n  const { chatId } = useElementComponent();\n  const { tab, selectedConversationId, conversationType } = useChatStore();\n\n  useListConversationsQuery({ chatId });\n  const { isLoading, data: chat } = useGetChatQuery({ chatId });\n  const { isLoading: isConversationLoading } = useGetConversationQuery({\n    chatId,\n    conversationId: selectedConversationId,\n  });\n\n  const canCreateMessage =\n    chat?.chatModelSettings?.allowedModels &&\n    chat?.chatModelSettings?.allowedModels.length > 0;\n\n  if (\n    !canCreateMessage &&\n    chat?.chatBaseSettings?.hideChatWhenInsufficientCredits\n  ) {\n    return null;\n  }\n\n  return (\n    <Card className=\"min-w-[320px] h-[640px] w-[400px] flex flex-col relative p-0 rounded-lg gap-0\">\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\n      <ChatHeader chatId={chatId} />\n      {conversationType === \"history\" && isConversationLoading && (\n        <div className=\"flex-1 flex items-center justify-center z-10 bg-card rounded-lg\">\n          <DotsLoader />\n        </div>\n      )}\n      {!isLoading && (conversationType === \"new\" || !isConversationLoading) && (\n        <div\n          className={tab !== \"chat\" ? \"hidden\" : \"flex flex-col flex-1 min-h-0\"}\n        >\n          {conversationType === \"history\" && isConversationLoading && (\n            <div className=\"absolute inset-0 flex items-center justify-center z-10 bg-card rounded-lg\">\n              <DotsLoader />\n            </div>\n          )}\n          {canCreateMessage ? (\n            <ChatMain />\n          ) : (\n            <div className=\"m-4 h-full flex items-center justify-center\">\n              <Text\n                variant=\"paragraph1\"\n                color=\"muted\"\n                className=\"text-center font-light italic\"\n              >\n                {t(\"chat-card.insufficient-credits-error\")}\n              </Text>\n            </div>\n          )}\n        </div>\n      )}\n      {!isLoading && tab === \"history\" && <ChatHistory />}\n    </Card>\n  );\n}\n","import { createElementContext } from \"../element/element-provider\";\nimport type { ElementConfig } from \"../element/types/config\";\nimport { useMergeElementConfig } from \"../element/use-element-config\";\nimport { ChatCard } from \"./chat-card\";\n\ntype ChatProps = { chatId: string };\ntype ChatData = { chatId: string };\ntype ChatElementProps = ElementConfig<ChatProps, ChatData>;\n\nexport const {\n  ElementProvider,\n  useElement,\n  useElementConfig,\n  useElementComponent,\n  useElementCallbacks,\n} = createElementContext<ChatProps, ChatData>({ name: \"ChatSDK.Chat\" });\n\nexport function ChatElement(props: ChatElementProps) {\n  const { config, callbacks, ...componentProps } = useMergeElementConfig({\n    props,\n    name: \"ChatSDK.Chat\",\n  });\n\n  if (!componentProps.chatId) {\n    // TODO: log here\n    return null;\n  }\n\n  return (\n    <ElementProvider\n      config={config}\n      component={componentProps}\n      callbacks={callbacks}\n    >\n      <ChatCard />\n    </ElementProvider>\n  );\n}\n\nChatElement.displayName = \"ChatSDK.ChatElement\";\n"],"mappings":"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"}

package/dist/chat-element-CSpa62Te.d.ts

@@ -0,0 +1,53 @@
+import { t as Callbacks } from "./callbacks-PIvHXeEI.js";
+import { r as RootConfig, t as ElementConfig } from "./config-CqihvSgz.js";
+import { n as ElementProviderProps, t as ElementContextType } from "./element-provider-C_nBsftD.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { UIMessage } from "ai";
+
+//#region ../ui/src/molecules/chat-message.d.ts
+interface ChatMessageProps {
+  messages: UIMessage[];
+  withAvatar?: boolean;
+  /** From `useChat().status` — controls reasoning streaming UI */
+  status?: string;
+}
+declare function ChatMessage({
+  messages,
+  withAvatar,
+  status
+}: ChatMessageProps): (react_jsx_runtime0.JSX.Element | null)[];
+//#endregion
+//#region src/index.d.ts
+type ChatSDKWindowApi = {
+  setConfig: (config: Partial<RootConfig>, merge?: boolean) => void;
+};
+declare global {
+  interface Window {
+    chatsdk?: ChatSDKWindowApi;
+  }
+}
+//#endregion
+//#region src/features/chat/chat-element.d.ts
+type ChatProps = {
+  chatId: string;
+};
+type ChatData = {
+  chatId: string;
+};
+type ChatElementProps = ElementConfig<ChatProps, ChatData>;
+declare const ElementProvider: {
+    ({
+      config,
+      component,
+      callbacks,
+      children
+    }: ElementProviderProps<ChatProps, ChatData>): react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  }, useElement: () => ElementContextType<ChatProps, ChatData>, useElementConfig: () => RootConfig, useElementComponent: () => ChatProps, useElementCallbacks: () => Callbacks<ChatData>;
+declare function ChatElement(props: ChatElementProps): react_jsx_runtime0.JSX.Element | null;
+declare namespace ChatElement {
+  var displayName: string;
+}
+//#endregion
+export { useElementComponent as a, ChatMessage as c, useElementCallbacks as i, ElementProvider as n, useElementConfig as o, useElement as r, ChatSDKWindowApi as s, ChatElement as t };
+//# sourceMappingURL=chat-element-CSpa62Te.d.ts.map

package/dist/chat-element-CSpa62Te.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-element-CSpa62Te.d.ts","names":[],"sources":["../../ui/src/molecules/chat-message.tsx","../src/index.ts","../src/features/chat/chat-element.tsx"],"mappings":";;;;;;;UAsBU,gBAAA;EACR,QAAA,EAAU,SAAA;EACV,UAAA;;EAEA,MAAA;AAAA;AAAA,iBAGc,WAAA,CAAA;EACd,QAAA;EACA,UAAA;EACA;AAAA,GACC,gBAAA,IAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCzBP,gBAAA;EACV,SAAA,GAAY,MAAA,EAAQ,OAAA,CAAQ,UAAA,GAAa,KAAA;AAAA;AAAA,QAGnC,MAAA;EAAA,UACI,MAAA;IACR,OAAA,GAAU,gBAAA;EAAA;AAAA;;;KCTT,SAAA;EAAc,MAAA;AAAA;AAAA,KACd,QAAA;EAAa,MAAA;AAAA;AAAA,KACb,gBAAA,GAAmB,aAAA,CAAc,SAAA,EAAW,QAAA;AAAA,cAG/C,eAAA;IAAA;;;;;;;uBACU,kBAAA,CAAA,SAAA,EAAA,QAAA,GAAA,gBAAA,QAAA,UAAA,EAAA,mBAAA,QAES,SAAA,EAAA,mBAAA,QACA,SAAA,CAAA,QAAA;AAAA,iBAGL,WAAA,CAAY,KAAA,EAAO,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAAnC,WAAA;EAAA,IAAW,WAAA;AAAA"}