@copilotz/chat-ui 0.1.1 → 0.1.4

package/dist/index.cjs

@@ -295,6 +295,7 @@ var configUtils = {
 var import_react = require("react");
 var import_react_markdown = __toESM(require("react-markdown"), 1);
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+var import_remark_breaks = __toESM(require("remark-breaks"), 1);
 var import_rehype_highlight = __toESM(require("rehype-highlight"), 1);
 
 // src/components/ui/button.tsx
@@ -575,6 +576,24 @@ function TooltipContent({
 // src/components/chat/Message.tsx
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var MarkdownErrorBoundary = class extends import_react.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 = (0, import_react.memo)(function ThinkingIndicator2({ label = "Thinking..." }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 py-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1", children: [
@@ -610,9 +629,38 @@ var markdownComponents = {
     return !inline && match ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className, ...props, children }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "bg-muted px-1 py-0.5 rounded text-sm", ...props, children });
   }
 };
-var remarkPluginsDefault = [import_remark_gfm.default];
+var remarkPluginsWithGfm = [import_remark_gfm.default, import_remark_breaks.default];
+var remarkPluginsSimple = [import_remark_breaks.default];
 var rehypePluginsDefault = [import_rehype_highlight.default];
 var rehypePluginsEmpty = [];
+var SimpleMarkdown = (0, import_react.memo)(function SimpleMarkdown2({
+  content,
+  isStreaming = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_markdown.default,
+    {
+      remarkPlugins: remarkPluginsSimple,
+      rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
+      components: markdownComponents,
+      children: content
+    }
+  );
+});
+var FullMarkdown = (0, import_react.memo)(function FullMarkdown2({
+  content,
+  isStreaming = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_markdown.default,
+    {
+      remarkPlugins: remarkPluginsWithGfm,
+      rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
+      components: markdownComponents,
+      children: content
+    }
+  );
+});
 var StreamingText = (0, import_react.memo)(function StreamingText2({
   content,
   isStreaming = false,
@@ -620,15 +668,7 @@ var StreamingText = (0, import_react.memo)(function StreamingText2({
 }) {
   const hasContent = content.trim().length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "prose prose-sm max-w-none dark:prose-invert", children: [
-    hasContent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_markdown.default,
-      {
-        remarkPlugins: remarkPluginsDefault,
-        rehypePlugins: isStreaming ? rehypePluginsEmpty : rehypePluginsDefault,
-        components: markdownComponents,
-        children: content
-      }
-    ) : isStreaming ? (
+    hasContent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MarkdownErrorBoundary, { fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SimpleMarkdown, { content, isStreaming }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FullMarkdown, { content, isStreaming }) }) : isStreaming ? (
       // Show thinking indicator while waiting for first token
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThinkingIndicator, { label: thinkingLabel })
     ) : null,
@@ -1010,18 +1050,26 @@ var import_lucide_react3 = require("lucide-react");
 // src/hooks/use-mobile.ts
 var React2 = __toESM(require("react"), 1);
 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
@@ -1298,12 +1346,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__ */ (0, import_jsx_runtime11.jsxs)(
     "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",
@@ -1313,11 +1378,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__ */ (0, import_jsx_runtime11.jsx)(
@@ -1325,12 +1389,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__ */ (0, import_jsx_runtime11.jsx)(
               "div",
@@ -1353,6 +1421,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__ */ (0, import_jsx_runtime11.jsxs)(
     Button,
     {
@@ -1361,10 +1438,8 @@ function SidebarTrigger({
       variant: "ghost",
       size: "icon",
       className: cn("size-7", className),
-      onClick: (event) => {
-        onClick?.(event);
-        toggleSidebar();
-      },
+      onClick: handleActivation,
+      onTouchEnd: handleActivation,
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.PanelLeftIcon, {}),