@copilotkit/react-ui 0.11.0 → 0.13.0-alpha.0

package/src/hooks/use-at-bottom.tsx

@@ -5,10 +5,7 @@ export function useAtBottom(offset = 0) {
 
   React.useEffect(() => {
     const handleScroll = () => {
-      setIsAtBottom(
-        window.innerHeight + window.scrollY >=
-          document.body.offsetHeight - offset
-      );
+      setIsAtBottom(window.innerHeight + window.scrollY >= document.body.offsetHeight - offset);
     };
 
     window.addEventListener("scroll", handleScroll, { passive: true });

package/src/hooks/use-copy-to-clipboard.tsx

@@ -6,9 +6,7 @@ export interface useCopyToClipboardProps {
   timeout?: number;
 }
 
-export function useCopyToClipboard({
-  timeout = 2000,
-}: useCopyToClipboardProps) {
+export function useCopyToClipboard({ timeout = 2000 }: useCopyToClipboardProps) {
   const [isCopied, setIsCopied] = React.useState<Boolean>(false);
 
   const copyToClipboard = (value: string) => {

package/src/hooks/use-enter-submit.tsx

@@ -6,14 +6,8 @@ export function useEnterSubmit(): {
 } {
   const formRef = useRef<HTMLFormElement>(null);
 
-  const handleKeyDown = (
-    event: React.KeyboardEvent<HTMLTextAreaElement>
-  ): void => {
-    if (
-      event.key === "Enter" &&
-      !event.shiftKey &&
-      !event.nativeEvent.isComposing
-    ) {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
       formRef.current?.requestSubmit();
       event.preventDefault();
     }

package/src/lib/utils.ts

@@ -8,13 +8,10 @@ export function cn(...inputs: ClassValue[]) {
 
 export const nanoid = customAlphabet(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
-  7
+  7,
 ); // 7-character random string
 
-export async function fetcher<JSON = any>(
-  input: RequestInfo,
-  init?: RequestInit
-): Promise<JSON> {
+export async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {
   const res = await fetch(input, init);
 
   if (!res.ok) {

package/dist/chunk-2NO6SF5H.mjs

@@ -1,53 +0,0 @@
-import { DefaultEmptyScreen } from './chunk-VSNDSL6W.mjs';
-import { ChatList } from './chunk-LMCFSE4V.mjs';
-import { ChatPanel } from './chunk-APH6ZQHG.mjs';
-import { ChatScrollAnchor } from './chunk-RSONJDLO.mjs';
-import { useCopilotChat } from '@copilotkit/react-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function CopilotChat({
-  id,
-  initialMessages,
-  makeSystemMessage,
-  EmptyScreen = DefaultEmptyScreen
-}) {
-  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = useCopilotChat({ id, initialMessages, makeSystemMessage });
-  return /* @__PURE__ */ jsxs("div", {
-    className: "w-full h-full flex flex-col overflow-hidden box-border items-start",
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        className: "pt-5 px-5 overflow-y-auto overflow-x-hidden w-full flex-grow",
-        children: visibleMessages.length ? /* @__PURE__ */ jsxs("div", {
-          className: "pl-0 pr-6",
-          children: [
-            /* @__PURE__ */ jsx(ChatList, {
-              messages: visibleMessages
-            }),
-            /* @__PURE__ */ jsx(ChatScrollAnchor, {
-              trackVisibility: isLoading
-            })
-          ]
-        }) : /* @__PURE__ */ jsx(EmptyScreen, {
-          setInput
-        })
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: "flex-shrink-0 w-full",
-        children: /* @__PURE__ */ jsx(ChatPanel, {
-          id,
-          isLoading,
-          stop,
-          append,
-          reload,
-          messages: visibleMessages,
-          input,
-          setInput
-        })
-      })
-    ]
-  });
-}
-
-export { CopilotChat };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-2NO6SF5H.mjs.map

package/dist/chunk-2NO6SF5H.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat-components/copilot-chat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AASA,SAAS,sBAAsB;AAuBrB,SACE,KADF;AAhCV;AAmBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAqB;AACnB,QAAM,EAAE,iBAAiB,QAAQ,QAAQ,MAAM,WAAW,OAAO,SAAS,IACxE,eAAe,EAAE,IAAI,iBAAiB,kBAAkB,CAAC;AAE3D,SACE,qBAAC;AAAA,IAAI,WAAU;AAAA,IACb;AAAA,0BAAC;AAAA,QAAI,WAAU;AAAA,QACZ,0BAAgB,SACf,qBAAC;AAAA,UAAI,WAAU;AAAA,UACb;AAAA,gCAAC;AAAA,cAAS,UAAU;AAAA,aAAiB;AAAA,YACrC,oBAAC;AAAA,cAAiB,iBAAiB;AAAA,aAAW;AAAA;AAAA,SAChD,IAEA,oBAAC;AAAA,UAAY;AAAA,SAAoB;AAAA,OAErC;AAAA,MAEA,oBAAC;AAAA,QAAI,WAAU;AAAA,QACb,8BAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA;AAAA,SACF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ","sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\nimport { ChatList } from \"./chat-list\";\nimport { ChatPanel } from \"./chat-panel\";\nimport { DefaultEmptyScreen, EmptyScreenProps } from \"./default-empty-screen\";\nimport { ChatScrollAnchor } from \"./chat-scroll-anchor\";\nimport { UseCopilotChatOptions } from \"@copilotkit/react-core\";\nimport { useCopilotChat } from \"@copilotkit/react-core\";\n\ninterface ChatComponentInjectionsProps {\n  EmptyScreen?: React.FC<EmptyScreenProps>;\n}\n\ninterface CopilotChatProps\n  extends UseCopilotChatOptions,\n    ChatComponentInjectionsProps {}\n\nexport function CopilotChat({\n  id,\n  initialMessages,\n  makeSystemMessage,\n  EmptyScreen = DefaultEmptyScreen,\n}: CopilotChatProps) {\n  const { visibleMessages, append, reload, stop, isLoading, input, setInput } =\n    useCopilotChat({ id, initialMessages, makeSystemMessage });\n\n  return (\n    <div className=\"w-full h-full flex flex-col overflow-hidden box-border items-start\">\n      <div className=\"pt-5 px-5 overflow-y-auto overflow-x-hidden w-full flex-grow\">\n        {visibleMessages.length ? (\n          <div className=\"pl-0 pr-6\">\n            <ChatList messages={visibleMessages} />\n            <ChatScrollAnchor trackVisibility={isLoading} />\n          </div>\n        ) : (\n          <EmptyScreen setInput={setInput} />\n        )}\n      </div>\n\n      <div className=\"flex-shrink-0 w-full\">\n        <ChatPanel\n          id={id}\n          isLoading={isLoading}\n          stop={stop}\n          append={append}\n          reload={reload}\n          messages={visibleMessages}\n          input={input}\n          setInput={setInput}\n        />\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-6LAC5RA2.mjs

@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-// src/hooks/use-copy-to-clipboard.tsx
-function useCopyToClipboard({
-  timeout = 2e3
-}) {
-  const [isCopied, setIsCopied] = React.useState(false);
-  const copyToClipboard = (value) => {
-    var _a;
-    if (typeof window === "undefined" || !((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
-      return;
-    }
-    if (!value) {
-      return;
-    }
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
-      setTimeout(() => {
-        setIsCopied(false);
-      }, timeout);
-    });
-  };
-  return { isCopied, copyToClipboard };
-}
-
-export { useCopyToClipboard };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-6LAC5RA2.mjs.map

package/dist/chunk-6LAC5RA2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"names":[],"mappings":";AAEA,YAAY,WAAW;AAFvB;AAQO,SAAS,mBAAmB;AAAA,EACjC,UAAU;AACZ,GAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAU,eAAkB,KAAK;AAE7D,QAAM,kBAAkB,CAAC,UAAkB;AAb7C;AAcI,QAAI,OAAO,WAAW,eAAe,GAAC,eAAU,cAAV,mBAAqB,YAAW;AACpE;AAAA,IACF;AAEA,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,cAAU,UAAU,UAAU,KAAK,EAAE,KAAK,MAAM;AAC9C,kBAAY,IAAI;AAEhB,iBAAW,MAAM;AACf,oBAAY,KAAK;AAAA,MACnB,GAAG,OAAO;AAAA,IACZ,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,UAAU,gBAAgB;AACrC","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport interface useCopyToClipboardProps {\n  timeout?: number;\n}\n\nexport function useCopyToClipboard({\n  timeout = 2000,\n}: useCopyToClipboardProps) {\n  const [isCopied, setIsCopied] = React.useState<Boolean>(false);\n\n  const copyToClipboard = (value: string) => {\n    if (typeof window === \"undefined\" || !navigator.clipboard?.writeText) {\n      return;\n    }\n\n    if (!value) {\n      return;\n    }\n\n    navigator.clipboard.writeText(value).then(() => {\n      setIsCopied(true);\n\n      setTimeout(() => {\n        setIsCopied(false);\n      }, timeout);\n    });\n  };\n\n  return { isCopied, copyToClipboard };\n}\n"]}

package/dist/chunk-6LRNF2VU.mjs

@@ -1,12 +0,0 @@
-import { memo } from 'react';
-import ReactMarkdown from 'react-markdown';
-
-// src/components/chat-components/markdown.tsx
-var MemoizedReactMarkdown = memo(
-  ReactMarkdown,
-  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
-);
-
-export { MemoizedReactMarkdown };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-6LRNF2VU.mjs.map

package/dist/chunk-6LRNF2VU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat-components/markdown.tsx"],"names":[],"mappings":";AAAA,SAAa,YAAY;AACzB,OAAO,mBAAgC;AAEhC,IAAM,wBAAqC;AAAA,EAChD;AAAA,EACA,CAAC,WAAW,cACV,UAAU,aAAa,UAAU,YACjC,UAAU,cAAc,UAAU;AACtC","sourcesContent":["import { FC, memo } from \"react\";\nimport ReactMarkdown, { Options } from \"react-markdown\";\n\nexport const MemoizedReactMarkdown: FC<Options> = memo(\n  ReactMarkdown,\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children &&\n    prevProps.className === nextProps.className\n);\n"]}

package/dist/chunk-6UJWRTL6.mjs

@@ -1,45 +0,0 @@
-import { Button } from './chunk-V6QYUEJR.mjs';
-import { IconCheck, IconCopy } from './chunk-KR7MH7XO.mjs';
-import { cn } from './chunk-TVTG3V4F.mjs';
-import { useCopyToClipboard } from './chunk-6LAC5RA2.mjs';
-import { __objRest, __spreadProps, __spreadValues } from './chunk-MRXNTQOX.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function ChatMessageActions(_a) {
-  var _b = _a, {
-    message,
-    className
-  } = _b, props = __objRest(_b, [
-    "message",
-    "className"
-  ]);
-  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
-  const onCopy = () => {
-    if (isCopied)
-      return;
-    copyToClipboard(message.content);
-  };
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
-    className: cn(
-      "flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0",
-      className
-    )
-  }, props), {
-    children: /* @__PURE__ */ jsxs(Button, {
-      variant: "ghost",
-      size: "icon",
-      onClick: onCopy,
-      children: [
-        isCopied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, {}),
-        /* @__PURE__ */ jsx("span", {
-          className: "sr-only",
-          children: "Copy message"
-        })
-      ]
-    })
-  }));
-}
-
-export { ChatMessageActions };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-6UJWRTL6.mjs.map

package/dist/chunk-6UJWRTL6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat-components/chat-message-actions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCM,SACc,KADd;AAjCN;AAaO,SAAS,mBAAmB,IAIP;AAJO,eACjC;AAAA;AAAA,IACA;AAAA,EAfF,IAamC,IAG9B,kBAH8B,IAG9B;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,UAAU,gBAAgB,IAAI,mBAAmB,EAAE,SAAS,IAAK,CAAC;AAE1E,QAAM,SAAS,MAAM;AACnB,QAAI;AAAU;AACd,oBAAgB,QAAQ,OAAO;AAAA,EACjC;AAEA,SACE,oBAAC;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,KACI,QALL;AAAA,IAOC,+BAAC;AAAA,MAAO,SAAQ;AAAA,MAAQ,MAAK;AAAA,MAAO,SAAS;AAAA,MAC1C;AAAA,mBAAW,oBAAC,aAAU,IAAK,oBAAC,YAAS;AAAA,QACtC,oBAAC;AAAA,UAAK,WAAU;AAAA,UAAU;AAAA,SAAY;AAAA;AAAA,KACxC;AAAA,IACF;AAEJ","sourcesContent":["\"use client\";\n\nimport { type Message } from \"ai\";\n\nimport { Button } from \"./ui/button\";\nimport { IconCheck, IconCopy } from \"./ui/icons\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard\";\nimport { cn } from \"../../lib/utils\";\n\ninterface ChatMessageActionsProps extends React.ComponentProps<\"div\"> {\n  message: Message;\n}\n\nexport function ChatMessageActions({\n  message,\n  className,\n  ...props\n}: ChatMessageActionsProps) {\n  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });\n\n  const onCopy = () => {\n    if (isCopied) return;\n    copyToClipboard(message.content);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0\",\n        className\n      )}\n      {...props}\n    >\n      <Button variant=\"ghost\" size=\"icon\" onClick={onCopy}>\n        {isCopied ? <IconCheck /> : <IconCopy />}\n        <span className=\"sr-only\">Copy message</span>\n      </Button>\n    </div>\n  );\n}\n"]}

package/dist/chunk-7KPMJBGH.mjs

@@ -1,48 +0,0 @@
-import { CopilotChat } from './chunk-2NO6SF5H.mjs';
-import { __spreadValues } from './chunk-MRXNTQOX.mjs';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function CopilotSidebar(props) {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "shadow-lg bg-gray-50 flex flex-col border-l-2",
-    style: { width: "100%", height: "100%" },
-    children: [
-      /* @__PURE__ */ jsx(TopBar, __spreadValues({}, props)),
-      /* @__PURE__ */ jsx(CopilotChat, {})
-    ]
-  });
-}
-function TopBar(props) {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "py-6 flex bg-gray-50 items-center justify-between px-4",
-    children: [
-      /* @__PURE__ */ jsx("h1", {
-        className: "text-base font-semibold leading-6 text-gray-900",
-        children: "Copilot Chat"
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: "ml-3 flex h-7 items-center",
-        children: /* @__PURE__ */ jsxs("button", {
-          type: "button",
-          className: "rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
-          onClick: () => props.setSidebarOpen(false),
-          children: [
-            /* @__PURE__ */ jsx("span", {
-              className: "sr-only",
-              children: "Close panel"
-            }),
-            /* @__PURE__ */ jsx(XMarkIcon, {
-              className: "h-6 w-6",
-              "aria-hidden": "true"
-            })
-          ]
-        })
-      })
-    ]
-  });
-}
-
-export { CopilotSidebar };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-7KPMJBGH.mjs.map

package/dist/chunk-7KPMJBGH.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/sidebar/copilot-sidebar.tsx"],"names":[],"mappings":";;;;;;;;AAmBA,SAAS,iBAAiB;AAVtB,SAIE,KAJF;AAFG,SAAS,eAAe,OAAkC;AAC/D,SACE,qBAAC;AAAA,IACC,WAAU;AAAA,IACV,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,IAEvC;AAAA,0BAAC,2BAAW,MAAO;AAAA,MACnB,oBAAC,eAAY;AAAA;AAAA,GACf;AAEJ;AAIA,SAAS,OAAO,OAAkC;AAChD,SACE,qBAAC;AAAA,IAAI,WAAU;AAAA,IACb;AAAA,0BAAC;AAAA,QAAG,WAAU;AAAA,QAAkD;AAAA,OAEhE;AAAA,MACA,oBAAC;AAAA,QAAI,WAAU;AAAA,QACb,+BAAC;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,MAAM,eAAe,KAAK;AAAA,UAEzC;AAAA,gCAAC;AAAA,cAAK,WAAU;AAAA,cAAU;AAAA,aAAW;AAAA,YACrC,oBAAC;AAAA,cAAU,WAAU;AAAA,cAAU,eAAY;AAAA,aAAO;AAAA;AAAA,SACpD;AAAA,OACF;AAAA;AAAA,GACF;AAEJ","sourcesContent":["import React from \"react\";\nimport { CopilotChat } from \"../chat-components/copilot-chat\";\n\nexport interface SidebarProps {\n  setSidebarOpen: (open: boolean) => void;\n}\n\nexport function CopilotSidebar(props: SidebarProps): JSX.Element {\n  return (\n    <div\n      className=\"shadow-lg bg-gray-50 flex flex-col border-l-2\"\n      style={{ width: \"100%\", height: \"100%\" }}\n    >\n      <TopBar {...props} />\n      <CopilotChat />\n    </div>\n  );\n}\n\nimport { XMarkIcon } from \"@heroicons/react/24/outline\";\n\nfunction TopBar(props: SidebarProps): JSX.Element {\n  return (\n    <div className=\"py-6 flex bg-gray-50 items-center justify-between px-4\">\n      <h1 className=\"text-base font-semibold leading-6 text-gray-900\">\n        Copilot Chat\n      </h1>\n      <div className=\"ml-3 flex h-7 items-center\">\n        <button\n          type=\"button\"\n          className=\"rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\"\n          onClick={() => props.setSidebarOpen(false)}\n        >\n          <span className=\"sr-only\">Close panel</span>\n          <XMarkIcon className=\"h-6 w-6\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-7NSRDJ5C.mjs

@@ -1,3 +0,0 @@
-
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-7NSRDJ5C.mjs.map

package/dist/chunk-7NSRDJ5C.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/chunk-APH6ZQHG.mjs

@@ -1,69 +0,0 @@
-import { PromptForm } from './chunk-UKKJ6H2K.mjs';
-import { Button } from './chunk-V6QYUEJR.mjs';
-import { IconStop, IconRefresh } from './chunk-KR7MH7XO.mjs';
-import { __async } from './chunk-MRXNTQOX.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function ChatPanel({
-  id,
-  isLoading,
-  stop,
-  append,
-  reload,
-  input,
-  setInput,
-  messages
-}) {
-  return /* @__PURE__ */ jsx("div", {
-    className: "inset-x-0 bottom-0 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50% mt-4 mb-8",
-    style: { width: "100%", overflow: "hidden", boxSizing: "border-box" },
-    children: /* @__PURE__ */ jsxs("div", {
-      className: "mx-auto sm:max-w-2xl sm:px-4",
-      children: [
-        /* @__PURE__ */ jsx("div", {
-          className: "flex h-10 items-center justify-center mb-4",
-          children: isLoading ? /* @__PURE__ */ jsxs(Button, {
-            variant: "outline",
-            onClick: () => stop(),
-            className: "bg-background",
-            children: [
-              /* @__PURE__ */ jsx(IconStop, {
-                className: "mr-2"
-              }),
-              "Stop generating"
-            ]
-          }) : (messages == null ? void 0 : messages.length) > 0 && /* @__PURE__ */ jsxs(Button, {
-            variant: "outline",
-            onClick: () => reload(),
-            className: "bg-background",
-            children: [
-              /* @__PURE__ */ jsx(IconRefresh, {
-                className: "mr-2"
-              }),
-              "Regenerate response"
-            ]
-          })
-        }),
-        /* @__PURE__ */ jsx("div", {
-          className: "space-y-4 border-2 bg-background px-4 py-2 shadow-lg sm:rounded-xl md:py-4",
-          children: /* @__PURE__ */ jsx(PromptForm, {
-            onSubmit: (value) => __async(this, null, function* () {
-              yield append({
-                id,
-                content: value,
-                role: "user"
-              });
-            }),
-            input,
-            setInput,
-            isLoading
-          })
-        })
-      ]
-    })
-  });
-}
-
-export { ChatPanel };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-APH6ZQHG.mjs.map

package/dist/chunk-APH6ZQHG.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat-components/chat-panel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsCY,SAKE,KALF;AAlBL,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,SACE,oBAAC;AAAA,IACC,WAAU;AAAA,IACV,OAAO,EAAE,OAAO,QAAQ,UAAU,UAAU,WAAW,aAAa;AAAA,IAEpE,+BAAC;AAAA,MAAI,WAAU;AAAA,MACb;AAAA,4BAAC;AAAA,UAAI,WAAU;AAAA,UACZ,sBACC,qBAAC;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM,KAAK;AAAA,YACpB,WAAU;AAAA,YAEV;AAAA,kCAAC;AAAA,gBAAS,WAAU;AAAA,eAAO;AAAA,cAAE;AAAA;AAAA,WAE/B,KAEA,qCAAU,UAAS,KACjB,qBAAC;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM,OAAO;AAAA,YACtB,WAAU;AAAA,YAEV;AAAA,kCAAC;AAAA,gBAAY,WAAU;AAAA,eAAO;AAAA,cAAE;AAAA;AAAA,WAElC;AAAA,SAGN;AAAA,QACA,oBAAC;AAAA,UAAI,WAAU;AAAA,UACb,8BAAC;AAAA,YACC,UAAU,CAAO,UAAU;AACzB,oBAAM,OAAO;AAAA,gBACX;AAAA,gBACA,SAAS;AAAA,gBACT,MAAM;AAAA,cACR,CAAC;AAAA,YACH;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,WACF;AAAA,SACF;AAAA;AAAA,KACF;AAAA,GACF;AAEJ","sourcesContent":["import { type UseChatHelpers } from \"ai/react\";\n\nimport { Button } from \"./ui/button\";\nimport { PromptForm } from \"./prompt-form\";\nimport { IconRefresh, IconStop } from \"./ui/icons\";\n\nexport interface ChatPanelProps\n  extends Pick<\n    UseChatHelpers,\n    | \"append\"\n    | \"isLoading\"\n    | \"reload\"\n    | \"messages\"\n    | \"stop\"\n    | \"input\"\n    | \"setInput\"\n  > {\n  id?: string;\n}\n\nexport function ChatPanel({\n  id,\n  isLoading,\n  stop,\n  append,\n  reload,\n  input,\n  setInput,\n  messages,\n}: ChatPanelProps) {\n  return (\n    <div\n      className=\"inset-x-0 bottom-0 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50% mt-4 mb-8\"\n      style={{ width: \"100%\", overflow: \"hidden\", boxSizing: \"border-box\" }}\n    >\n      <div className=\"mx-auto sm:max-w-2xl sm:px-4\">\n        <div className=\"flex h-10 items-center justify-center mb-4\">\n          {isLoading ? (\n            <Button\n              variant=\"outline\"\n              onClick={() => stop()}\n              className=\"bg-background\"\n            >\n              <IconStop className=\"mr-2\" />\n              Stop generating\n            </Button>\n          ) : (\n            messages?.length > 0 && (\n              <Button\n                variant=\"outline\"\n                onClick={() => reload()}\n                className=\"bg-background\"\n              >\n                <IconRefresh className=\"mr-2\" />\n                Regenerate response\n              </Button>\n            )\n          )}\n        </div>\n        <div className=\"space-y-4 border-2 bg-background px-4 py-2 shadow-lg sm:rounded-xl md:py-4\">\n          <PromptForm\n            onSubmit={async (value) => {\n              await append({\n                id,\n                content: value,\n                role: \"user\",\n              });\n            }}\n            input={input}\n            setInput={setInput}\n            isLoading={isLoading}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-BIPCPNHG.mjs

@@ -1,18 +0,0 @@
-import { useRef } from 'react';
-
-// src/hooks/use-enter-submit.tsx
-function useEnterSubmit() {
-  const formRef = useRef(null);
-  const handleKeyDown = (event) => {
-    var _a;
-    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
-      (_a = formRef.current) == null ? void 0 : _a.requestSubmit();
-      event.preventDefault();
-    }
-  };
-  return { formRef, onKeyDown: handleKeyDown };
-}
-
-export { useEnterSubmit };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-BIPCPNHG.mjs.map

package/dist/chunk-BIPCPNHG.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-enter-submit.tsx"],"names":[],"mappings":";AAAA,SAAS,cAA8B;AAEhC,SAAS,iBAGd;AACA,QAAM,UAAU,OAAwB,IAAI;AAE5C,QAAM,gBAAgB,CACpB,UACS;AAVb;AAWI,QACE,MAAM,QAAQ,WACd,CAAC,MAAM,YACP,CAAC,MAAM,YAAY,aACnB;AACA,oBAAQ,YAAR,mBAAiB;AACjB,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAEA,SAAO,EAAE,SAAS,WAAW,cAAc;AAC7C","sourcesContent":["import { useRef, type RefObject } from \"react\";\n\nexport function useEnterSubmit(): {\n  formRef: RefObject<HTMLFormElement>;\n  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n} {\n  const formRef = useRef<HTMLFormElement>(null);\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTextAreaElement>\n  ): void => {\n    if (\n      event.key === \"Enter\" &&\n      !event.shiftKey &&\n      !event.nativeEvent.isComposing\n    ) {\n      formRef.current?.requestSubmit();\n      event.preventDefault();\n    }\n  };\n\n  return { formRef, onKeyDown: handleKeyDown };\n}\n"]}

package/dist/chunk-BS6RR2DJ.mjs

@@ -1,25 +0,0 @@
-import { cn } from './chunk-TVTG3V4F.mjs';
-import { __objRest, __spreadValues } from './chunk-MRXNTQOX.mjs';
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { jsx } from 'react/jsx-runtime';
-
-var TooltipProvider = TooltipPrimitive.Provider;
-var Tooltip = TooltipPrimitive.Root;
-var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React.forwardRef((_a, ref) => {
-  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Content, __spreadValues({
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className
-    )
-  }, props));
-});
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-BS6RR2DJ.mjs.map

package/dist/chunk-BS6RR2DJ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat-components/ui/tooltip.tsx"],"names":[],"mappings":";;;;;;;;;AAEA,YAAY,WAAW;AACvB,YAAY,sBAAsB;AAchC;AAjBF;AAOA,IAAM,kBAAmC;AAEzC,IAAM,UAA2B;AAEjC,IAAM,iBAAkC;AAExC,IAAM,iBAAuB,iBAG3B,CAAC,IAAyC,QAAK;AAA9C,eAAE,aAAW,aAAa,EAhB7B,IAgBG,IAAgC,kBAAhC,IAAgC,CAA9B,aAAW;AACd,6BAAkB,0BAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,KACI,MACN;AAAA,CACD;AACD,eAAe,cAA+B,yBAAQ","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"../../../lib/utils\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1\",\n      className\n    )}\n    {...props}\n  />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"]}

package/dist/chunk-DOMJCSI6.mjs

@@ -1,26 +0,0 @@
-import { cn } from './chunk-TVTG3V4F.mjs';
-import { __objRest, __spreadValues } from './chunk-MRXNTQOX.mjs';
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import { jsx } from 'react/jsx-runtime';
-
-var Separator = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
-    return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, __spreadValues({
-      ref,
-      decorative,
-      orientation,
-      className: cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )
-    }, props));
-  }
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-DOMJCSI6.mjs.map

package/dist/chunk-DOMJCSI6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat-components/ui/separator.tsx"],"names":[],"mappings":";;;;;;;;;AAEA,YAAY,WAAW;AACvB,YAAY,wBAAwB;AAYhC;AAfJ;AAOA,IAAM,YAAkB;AAAA,EAItB,CACE,IACA,QACA;AAFA,iBAAE,aAAW,cAAc,cAAc,aAAa,KAZ1D,IAYI,IAA+D,kBAA/D,IAA+D,CAA7D,aAAW,eAA4B;AAGzC,+BAAoB,yBAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,eAAe,mBAAmB;AAAA,QAClD;AAAA,MACF;AAAA,OACI,MACN;AAAA;AAEJ;AACA,UAAU,cAAiC,wBAAK","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\";\n\nimport { cn } from \"../../../lib/utils\";\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n);\nSeparator.displayName = SeparatorPrimitive.Root.displayName;\n\nexport { Separator };\n"]}

package/dist/chunk-H4VKQGVU.mjs

@@ -1,3 +0,0 @@
-
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-H4VKQGVU.mjs.map

package/dist/chunk-H4VKQGVU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/chunk-HKSY5T7Y.mjs

@@ -1,140 +0,0 @@
-import { Button } from './chunk-V6QYUEJR.mjs';
-import { IconDownload, IconCheck, IconCopy } from './chunk-KR7MH7XO.mjs';
-import { useCopyToClipboard } from './chunk-6LAC5RA2.mjs';
-import { memo } from 'react';
-import { Prism } from 'react-syntax-highlighter';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var programmingLanguages = {
-  javascript: ".js",
-  python: ".py",
-  java: ".java",
-  c: ".c",
-  cpp: ".cpp",
-  "c++": ".cpp",
-  "c#": ".cs",
-  ruby: ".rb",
-  php: ".php",
-  swift: ".swift",
-  "objective-c": ".m",
-  kotlin: ".kt",
-  typescript: ".ts",
-  go: ".go",
-  perl: ".pl",
-  rust: ".rs",
-  scala: ".scala",
-  haskell: ".hs",
-  lua: ".lua",
-  shell: ".sh",
-  sql: ".sql",
-  html: ".html",
-  css: ".css"
-};
-var generateRandomString = (length, lowercase = false) => {
-  const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789";
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return lowercase ? result.toLowerCase() : result;
-};
-var CodeBlock = memo(({ language, value }) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
-  const downloadAsFile = () => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const fileExtension = programmingLanguages[language] || ".file";
-    const suggestedFileName = `file-${generateRandomString(
-      3,
-      true
-    )}${fileExtension}`;
-    const fileName = window.prompt("Enter file name", suggestedFileName);
-    if (!fileName) {
-      return;
-    }
-    const blob = new Blob([value], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.download = fileName;
-    link.href = url;
-    link.style.display = "none";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-  const onCopy = () => {
-    if (isCopied)
-      return;
-    copyToClipboard(value);
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    className: "codeblock relative w-full bg-zinc-950 font-sans",
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: "flex w-full items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100",
-        children: [
-          /* @__PURE__ */ jsx("span", {
-            className: "text-xs lowercase",
-            children: language
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "flex items-center space-x-1",
-            children: [
-              /* @__PURE__ */ jsxs(Button, {
-                variant: "ghost",
-                className: "hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0",
-                onClick: downloadAsFile,
-                size: "icon",
-                children: [
-                  /* @__PURE__ */ jsx(IconDownload, {}),
-                  /* @__PURE__ */ jsx("span", {
-                    className: "sr-only",
-                    children: "Download"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs(Button, {
-                variant: "ghost",
-                size: "icon",
-                className: "text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0",
-                onClick: onCopy,
-                children: [
-                  isCopied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, {}),
-                  /* @__PURE__ */ jsx("span", {
-                    className: "sr-only",
-                    children: "Copy code"
-                  })
-                ]
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx(Prism, {
-        language,
-        PreTag: "div",
-        showLineNumbers: true,
-        customStyle: {
-          margin: 0,
-          width: "100%",
-          background: "transparent",
-          padding: "1.5rem 1rem"
-        },
-        codeTagProps: {
-          style: {
-            fontSize: "0.9rem",
-            fontFamily: "var(--font-mono)"
-          }
-        },
-        children: value
-      })
-    ]
-  });
-});
-CodeBlock.displayName = "CodeBlock";
-
-export { CodeBlock, generateRandomString, programmingLanguages };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-HKSY5T7Y.mjs.map

package/dist/chunk-HKSY5T7Y.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat-components/ui/codeblock.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { FC, memo } from \"react\";\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\n\nimport { useCopyToClipboard } from \"../../../hooks/use-copy-to-clipboard\";\nimport { IconCheck, IconCopy, IconDownload } from \"./icons\";\nimport { Button } from \"./button\";\n\ninterface Props {\n  language: string;\n  value: string;\n}\n\ninterface languageMap {\n  [key: string]: string | undefined;\n}\n\nexport const programmingLanguages: languageMap = {\n  javascript: \".js\",\n  python: \".py\",\n  java: \".java\",\n  c: \".c\",\n  cpp: \".cpp\",\n  \"c++\": \".cpp\",\n  \"c#\": \".cs\",\n  ruby: \".rb\",\n  php: \".php\",\n  swift: \".swift\",\n  \"objective-c\": \".m\",\n  kotlin: \".kt\",\n  typescript: \".ts\",\n  go: \".go\",\n  perl: \".pl\",\n  rust: \".rs\",\n  scala: \".scala\",\n  haskell: \".hs\",\n  lua: \".lua\",\n  shell: \".sh\",\n  sql: \".sql\",\n  html: \".html\",\n  css: \".css\",\n  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component\n};\n\nexport const generateRandomString = (length: number, lowercase = false) => {\n  const chars = \"ABCDEFGHJKLMNPQRSTUVWXY3456789\"; // excluding similar looking characters like Z, 2, I, 1, O, 0\n  let result = \"\";\n  for (let i = 0; i < length; i++) {\n    result += chars.charAt(Math.floor(Math.random() * chars.length));\n  }\n  return lowercase ? result.toLowerCase() : result;\n};\n\nconst CodeBlock: FC<Props> = memo(({ language, value }) => {\n  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });\n\n  const downloadAsFile = () => {\n    if (typeof window === \"undefined\") {\n      return;\n    }\n    const fileExtension = programmingLanguages[language] || \".file\";\n    const suggestedFileName = `file-${generateRandomString(\n      3,\n      true\n    )}${fileExtension}`;\n    const fileName = window.prompt(\"Enter file name\" || \"\", suggestedFileName);\n\n    if (!fileName) {\n      // User pressed cancel on prompt.\n      return;\n    }\n\n    const blob = new Blob([value], { type: \"text/plain\" });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.download = fileName;\n    link.href = url;\n    link.style.display = \"none\";\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    URL.revokeObjectURL(url);\n  };\n\n  const onCopy = () => {\n    if (isCopied) return;\n    copyToClipboard(value);\n  };\n\n  return (\n    <div className=\"codeblock relative w-full bg-zinc-950 font-sans\">\n      <div className=\"flex w-full items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100\">\n        <span className=\"text-xs lowercase\">{language}</span>\n        <div className=\"flex items-center space-x-1\">\n          <Button\n            variant=\"ghost\"\n            className=\"hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0\"\n            onClick={downloadAsFile}\n            size=\"icon\"\n          >\n            <IconDownload />\n            <span className=\"sr-only\">Download</span>\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0\"\n            onClick={onCopy}\n          >\n            {isCopied ? <IconCheck /> : <IconCopy />}\n            <span className=\"sr-only\">Copy code</span>\n          </Button>\n        </div>\n      </div>\n      <SyntaxHighlighter\n        language={language}\n        PreTag=\"div\"\n        showLineNumbers\n        customStyle={{\n          margin: 0,\n          width: \"100%\",\n          background: \"transparent\",\n          padding: \"1.5rem 1rem\",\n        }}\n        codeTagProps={{\n          style: {\n            fontSize: \"0.9rem\",\n            fontFamily: \"var(--font-mono)\",\n          },\n        }}\n      >\n        {value}\n      </SyntaxHighlighter>\n    </div>\n  );\n});\nCodeBlock.displayName = \"CodeBlock\";\n\nexport { CodeBlock };\n"]}