@copilotz/chat-ui 0.1.1 → 0.1.4

package/dist/index.js

@@ -237,9 +237,10 @@ var configUtils = {
 };
 
 // src/components/chat/Message.tsx
-import { useState, useRef, memo } from "react";
+import { useState, useRef, memo, Component } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import remarkBreaks from "remark-breaks";
 import rehypeHighlight from "rehype-highlight";
 
 // src/components/ui/button.tsx
@@ -530,6 +531,24 @@ import {
   ChevronDown
 } from "lucide-react";
 import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var MarkdownErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(_error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.warn("[Markdown] Falling back to simple rendering due to:", error.message);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+};
 var ThinkingIndicator = memo(function ThinkingIndicator2({ label = "Thinking..." }) {
   return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 py-2", children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex gap-1", children: [
@@ -565,9 +584,38 @@ var markdownComponents = {
     return !inline && match ? /* @__PURE__ */ jsx7("pre", { className: "relative", children: /* @__PURE__ */ jsx7("code", { className, ...props, children }) }) : /* @__PURE__ */ jsx7("code", { className: "bg-muted px-1 py-0.5 rounded text-sm", ...props, children });
   }
 };
-var remarkPluginsDefault = [remarkGfm];
+var remarkPluginsWithGfm = [remarkGfm, remarkBreaks];
+var remarkPluginsSimple = [remarkBreaks];
 var rehypePluginsDefault = [rehypeHighlight];
 var rehypePluginsEmpty = [];
+var SimpleMarkdown = memo(function SimpleMarkdown2({
+  content,
+  isStreaming = false
+}) {
+  return /* @__PURE__ */ jsx7(
+    ReactMarkdown,
+    {
+      remarkPlugins: remarkPluginsSimple,
+      rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
+      components: markdownComponents,
+      children: content
+    }
+  );
+});
+var FullMarkdown = memo(function FullMarkdown2({
+  content,
+  isStreaming = false
+}) {
+  return /* @__PURE__ */ jsx7(
+    ReactMarkdown,
+    {
+      remarkPlugins: remarkPluginsWithGfm,
+      rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
+      components: markdownComponents,
+      children: content
+    }
+  );
+});
 var StreamingText = memo(function StreamingText2({
   content,
   isStreaming = false,
@@ -575,15 +623,7 @@ var StreamingText = memo(function StreamingText2({
 }) {
   const hasContent = content.trim().length > 0;
   return /* @__PURE__ */ jsxs2("div", { className: "prose prose-sm max-w-none dark:prose-invert", children: [
-    hasContent ? /* @__PURE__ */ jsx7(
-      ReactMarkdown,
-      {
-        remarkPlugins: remarkPluginsDefault,
-        rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
-        components: markdownComponents,
-        children: content
-      }
-    ) : isStreaming ? (
+    hasContent ? /* @__PURE__ */ jsx7(MarkdownErrorBoundary, { fallback: /* @__PURE__ */ jsx7(SimpleMarkdown, { content, isStreaming }), children: /* @__PURE__ */ jsx7(FullMarkdown, { content, isStreaming }) }) : isStreaming ? (
       // Show thinking indicator while waiting for first token
       /* @__PURE__ */ jsx7(ThinkingIndicator, { label: thinkingLabel })
     ) : null,
@@ -965,18 +1005,26 @@ import { PanelLeftIcon } from "lucide-react";
 // src/hooks/use-mobile.ts
 import * as React2 from "react";
 var MOBILE_BREAKPOINT = 768;
+function getInitialIsMobile() {
+  if (typeof window === "undefined") return false;
+  return window.innerWidth < MOBILE_BREAKPOINT;
+}
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React2.useState(void 0);
+  const [isMobile, setIsMobile] = React2.useState(getInitialIsMobile);
   React2.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
     mql.addEventListener("change", onChange);
+    window.addEventListener("resize", onChange);
     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    return () => {
+      mql.removeEventListener("change", onChange);
+      window.removeEventListener("resize", onChange);
+    };
   }, []);
-  return !!isMobile;
+  return isMobile;
 }
 
 // src/components/ui/separator.tsx
@@ -1253,12 +1301,29 @@ function Sidebar({
       }
     ) });
   }
+  const isCollapsed = state === "collapsed";
+  const currentCollapsible = isCollapsed ? collapsible : "";
+  const getGapWidth = () => {
+    if (currentCollapsible === "offcanvas") return "0px";
+    if (currentCollapsible === "icon") return SIDEBAR_WIDTH_ICON;
+    return SIDEBAR_WIDTH;
+  };
+  const getContainerWidth = () => {
+    if (currentCollapsible === "icon") return SIDEBAR_WIDTH_ICON;
+    return SIDEBAR_WIDTH;
+  };
+  const getContainerOffset = () => {
+    if (currentCollapsible === "offcanvas") {
+      return side === "left" ? `calc(${SIDEBAR_WIDTH} * -1)` : `calc(${SIDEBAR_WIDTH} * -1)`;
+    }
+    return "0";
+  };
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: "group peer text-sidebar-foreground hidden md:block",
+      className: "group peer text-sidebar-foreground",
       "data-state": state,
-      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-collapsible": currentCollapsible,
       "data-variant": variant,
       "data-side": side,
       "data-slot": "sidebar",
@@ -1268,11 +1333,10 @@ function Sidebar({
           {
             "data-slot": "sidebar-gap",
             className: cn(
-              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-              "group-data-[collapsible=offcanvas]:w-0",
-              "group-data-[side=right]:rotate-180",
-              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-            )
+              "relative bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[side=right]:rotate-180"
+            ),
+            style: { width: getGapWidth() }
           }
         ),
         /* @__PURE__ */ jsx11(
@@ -1280,12 +1344,16 @@ function Sidebar({
           {
             "data-slot": "sidebar-container",
             className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-              side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              "fixed inset-y-0 z-10 h-screen transition-[left,right,width] duration-200 ease-linear",
               // Adjust the padding for floating and inset variants.
-              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              variant === "floating" || variant === "inset" ? "p-2" : side === "left" ? "border-r" : "border-l",
               className
             ),
+            style: {
+              display: "flex",
+              width: getContainerWidth(),
+              [side === "left" ? "left" : "right"]: getContainerOffset()
+            },
             ...props,
             children: /* @__PURE__ */ jsx11(
               "div",
@@ -1308,6 +1376,15 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
+  const handleActivation = React4.useCallback((event) => {
+    if (event.type === "touchend") {
+      event.preventDefault();
+    }
+    if ("onClick" in event && onClick) {
+      onClick(event);
+    }
+    toggleSidebar();
+  }, [onClick, toggleSidebar]);
   return /* @__PURE__ */ jsxs4(
     Button,
     {
@@ -1316,10 +1393,8 @@ function SidebarTrigger({
       variant: "ghost",
       size: "icon",
       className: cn("size-7", className),
-      onClick: (event) => {
-        onClick?.(event);
-        toggleSidebar();
-      },
+      onClick: handleActivation,
+      onTouchEnd: handleActivation,
       ...props,
       children: [
         /* @__PURE__ */ jsx11(PanelLeftIcon, {}),