@chatsdk-dev/elements 0.0.1

package/dist/chunk-TDP6D7U7.js

@@ -0,0 +1,551 @@
+import { ChatMenu } from './chunk-AP4MG32M.js';
+import { ChatHistoryEmpty } from './chunk-YXAMLTTT.js';
+import { chatQueryKeys } from './chunk-TDEFIW2L.js';
+import { createMoleculeContext } from './chunk-M5OONVIO.js';
+import { useMergeMoleculeConfig } from './chunk-VYDYCGJL.js';
+import { useChatStore } from './chunk-2LHKM7RD.js';
+import { getInitialMessagesFromStrings } from './chunk-5UMYP6MD.js';
+import { ChatMessage } from './chunk-SLJNKQ2G.js';
+import { getClient } from '@chatsdk-dev/api-client';
+import { useTranslation } from 'react-i18next';
+import { CardHeader, CardTitle, Card } from '@chatsdk-dev/ui/components/card';
+import { DotsLoader } from '@chatsdk-dev/ui/components/dots-loader';
+import { Text } from '@chatsdk-dev/ui/components/typography/text';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useState, useMemo, useEffect, useRef, Fragment } from 'react';
+import { Conversation, ConversationContent, ConversationScrollButton } from '@chatsdk-dev/elements/components/ai-elements/conversation';
+import { GlobeIcon, CheckIcon, ArrowLeft, Plus } from 'lucide-react';
+import { PromptInput, PromptInputTextarea, PromptInputSubmit, PromptInputTools, PromptInputButton } from '@chatsdk-dev/elements/components/ai-elements/prompt-input';
+import { ModelSelector, ModelSelectorTrigger, ModelSelectorLogo, ModelSelectorName, ModelSelectorContent, ModelSelectorInput, ModelSelectorList, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorItem, ModelSelectorLogoGroup } from '@chatsdk-dev/elements/components/ai-elements/model-selector';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChat as useChat$1 } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { renderRelativeTime } from '@chatsdk-dev/elements/common/utilts';
+
+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
+  });
+}
+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;
+  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
+            }
+          )
+        ]
+      }
+    ),
+    /* @__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))
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+async function getConversation({
+  client,
+  chatId,
+  actorId,
+  conversationId
+}) {
+  if (!conversationId) {
+    const { data: newConversation, error: error2 } = await client.chats.conversations.create({
+      path: { chatId },
+      body: { actorId }
+    });
+    if (error2) {
+      throw new Error(
+        "error" in error2 ? error2.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 } = useMoleculeConfig();
+  return useQuery({
+    ...getConversationQueryConfig({
+      chatId,
+      conversationId,
+      client,
+      actorId: context?.actor?.id ?? ""
+    }),
+    enabled: !!chatId,
+    staleTime: 200
+  });
+}
+function useInitialMessages() {
+  const { selectedConversationId } = useChatStore();
+  const { chatId } = useMoleculeComponent();
+  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]);
+  const initialMessages = useMemo(() => {
+    const initialChatMessages = getInitialMessagesFromStrings(
+      data?.chatBaseSettings?.initialChatMessages ?? []
+    );
+    return [...initialChatMessages, ...conversationMessages ?? []];
+  }, [data?.chatBaseSettings?.initialChatMessages, conversationMessages]);
+  return initialMessages;
+}
+
+// src/features/chat/chat-element/use-chat.tsx
+function useChat() {
+  const client = useApiClient();
+  const { config, component } = useMolecule();
+  const { selectedConversationId, conversationType } = useChatStore();
+  const initialMessages = useInitialMessages();
+  const useChatResult = useChat$1({
+    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;
+}
+function ChatElement() {
+  const queryClient = useQueryClient();
+  const client = useApiClient();
+  const { chatId } = useMoleculeComponent();
+  const { context } = useMoleculeConfig();
+  const { selectedConversationId } = useChatStore();
+  const { data: conversation } = useGetConversationQuery({
+    chatId,
+    conversationId: selectedConversationId
+  });
+  const { messages, sendMessage, status } = useChat();
+  const promptInputRef = useRef(null);
+  useEffect(() => {
+    promptInputRef.current?.focus();
+  }, [selectedConversationId]);
+  const handleSubmit = async (message) => {
+    let conversationId = conversation?._id;
+    if (!conversation) {
+      const newConversation = await queryClient.fetchQuery({
+        ...getConversationQueryConfig({
+          chatId,
+          conversationId: selectedConversationId,
+          client,
+          actorId: context?.actor?.id ?? ""
+        })
+      });
+      conversationId = newConversation._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 }),
+        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
+      }
+    ) })
+  ] });
+}
+ChatElement.displayName = "ChatElement";
+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, {})
+  ] });
+}
+function useListConversationsQuery({
+  chatId
+}) {
+  const client = useApiClient();
+  const { context } = useMoleculeConfig();
+  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
+  });
+}
+function ChatHistory() {
+  const { t, i18n } = useTranslation("chat", { keyPrefix: "history" });
+  const queryClient = useQueryClient();
+  const { chatId } = useMoleculeComponent();
+  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")
+        ]
+      }
+    )
+  ] });
+}
+function ChatCard() {
+  const { t } = useTranslation();
+  const { chatId } = useMoleculeComponent();
+  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(ChatElement, {}) : /* @__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, {})
+  ] });
+}
+var {
+  MoleculeProvider,
+  useMolecule,
+  useMoleculeConfig,
+  useMoleculeComponent,
+  useMoleculeCallbacks
+} = createMoleculeContext({ name: "ChatSDK.Chat" });
+function ChatMolecule(props) {
+  const { config, callbacks, ...componentProps } = useMergeMoleculeConfig({
+    props,
+    name: "ChatSDK.Chat"
+  });
+  if (!componentProps.chatId) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    MoleculeProvider,
+    {
+      config,
+      component: componentProps,
+      callbacks,
+      children: /* @__PURE__ */ jsx(ChatCard, {})
+    }
+  );
+}
+ChatMolecule.displayName = "ChatSDK.ChatMolecule";
+
+// src/features/data-fetching/use-api-client.ts
+function useApiClient() {
+  const { api } = useMoleculeConfig();
+  return getClient(api ?? {});
+}
+
+export { ChatCard, ChatElement, ChatHeader, ChatHistory, ChatMolecule, ChatPromptInput, MoleculeProvider, getConversationQueryConfig, useApiClient, useChat, useGetChatQuery, useGetConversationQuery, useInitialMessages, useListConversationsQuery, useMolecule, useMoleculeCallbacks, useMoleculeComponent, useMoleculeConfig };

package/dist/chunk-V2ITXC65.js

@@ -0,0 +1,24 @@
+import { resources, languages, defaultNamespace, fallbackLng } from './chunk-R7G3RQLU.js';
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next/initReactI18next';
+
+var runsOnServerSide = typeof window === "undefined";
+var elementsI18n = i18next.createInstance();
+elementsI18n.use(initReactI18next).init({
+  // debug: true,
+  showSupportNotice: false,
+  supportedLngs: languages,
+  fallbackLng,
+  fallbackNS: defaultNamespace,
+  defaultNS: defaultNamespace,
+  lng: void 0,
+  // detect the language on client side
+  detection: {
+    order: ["path", "htmlTag", "cookie", "navigator"]
+  },
+  preload: runsOnServerSide ? languages : [],
+  resources
+});
+var i18n = elementsI18n;
+
+export { i18n };

package/dist/chunk-VS55HRUS.js

@@ -0,0 +1,16 @@
+// src/features/logger/logger.ts
+function noOp() {
+}
+function getLogger(loggers) {
+  const _loggers = typeof loggers === "function" ? { info: loggers } : loggers;
+  const infoLogger = _loggers?.info || noOp;
+  const warnLogger = _loggers?.warn || infoLogger;
+  const errorLogger = _loggers?.error || infoLogger;
+  return {
+    info: infoLogger,
+    warn: warnLogger,
+    error: errorLogger
+  };
+}
+
+export { getLogger };

package/dist/chunk-VYDYCGJL.js

@@ -0,0 +1,25 @@
+import { useMergeGlobalConfig } from './chunk-MXTBCHYC.js';
+
+// src/features/molecule/use-molecule-config.ts
+function useMergeMoleculeConfig(moleculeConfig) {
+  const {
+    defaultProps: flatDefaultProps,
+    component,
+    ...flatProps
+  } = moleculeConfig.props;
+  const { defaultProps: componentDefaultProps, ...componentProps } = component || {};
+  const _defaultProps = { ...flatDefaultProps, ...componentDefaultProps };
+  const _props = { ...componentProps, ...flatProps };
+  const { config, onloading, onsuccess, onerror, ...rest } = {
+    ..._defaultProps,
+    ..._props
+  };
+  const mergedConfig = useMergeGlobalConfig(config);
+  return {
+    ...rest,
+    config: mergedConfig,
+    callbacks: { onloading, onsuccess, onerror }
+  };
+}
+
+export { useMergeMoleculeConfig };