fixed:bug of stream mesage

Author: wangenius

package-lock.json

@@ -58,7 +58,8 @@
     "react-syntax-highlighter": "^15.6.1",
     "reactflow": "^11.11.4",
     "sonner": "^2.0.1",
-    "tailwind-merge": "^2.6.0"
+    "tailwind-merge": "^2.6.0",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2.0.0",

package.json

@@ -42,7 +42,7 @@
     --danger: 120 50% 50%;
     --info: 25 100% 50%;
   }
-  [data-theme=dark] {
+  [data-theme="dark"] {
     --background: 224 71% 4%;
     --foreground: 213 33% 80%;
     --muted: 223 47% 11%;
@@ -126,7 +126,7 @@ textarea,
 select,
 option {
   -moz-user-select: none !important;
-       user-select: none !important;
+  user-select: none !important;
   -webkit-user-select: none !important;
 }
 
@@ -145,4 +145,4 @@ option {
 
 .react-flow__attribution {
   display: none !important;
-}/*# sourceMappingURL=globals.css.map */
+} /*# sourceMappingURL=globals.css.map */

src/assets/globals.css

@@ -1,21 +1,30 @@
-import { cmd } from "@/utils/shell"
-import { TbX } from "react-icons/tb"
-import { Button } from "../ui/button"
+import { cmd } from "@/utils/shell";
+import { TbX } from "react-icons/tb";
+import { Button } from "../ui/button";
 
-export const Header = ({ title, close = () => cmd.close() }: { title: string, close?: () => void }) => {
-	return (
-		<div className="flex select-none draggable justify-between items-center p-3" >
-			<span className="text-xs pl-2 text-muted-foreground">
-				<img src="/icon.png" className="w-6 h-6" />
-			</span>
-			<div className="text-sm pl-3 flex-1 font-medium text-foreground">
-				{title}
-			</div>
-			<Button size="icon" onClick={close} >
-				<TbX className="w-4 h-4" />
-			</Button>
-
-		</div>
-
-	)
-}
+export const Header = ({
+  title,
+  close = () => cmd.close(),
+  extra,
+}: {
+  title: string;
+  close?: () => void;
+  extra?: React.ReactNode;
+}) => {
+  return (
+    <div className="flex select-none draggable justify-between items-center p-3">
+      <span className="text-xs pl-2 text-muted-foreground">
+        <img src="/icon.png" className="w-6 h-6" />
+      </span>
+      <div className="text-sm pl-3 flex-1 font-medium text-foreground">
+        {title}
+      </div>
+      <div className="flex items-center gap-2">
+        {extra}
+        <Button size="icon" onClick={close}>
+          <TbX className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+};

src/components/custom/Header.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+export function Drawer({
+  direction = "right",
+  open,
+  onOpenChange,
+  children,
+  className,
+}: {
+  direction?: "right" | "left";
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <DrawerPrimitive.Root
+      direction={direction}
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <DrawerPrimitive.Portal>
+        <DrawerPrimitive.Overlay className="fixed inset-0 bg-black/40" />
+        <DrawerPrimitive.Content
+          className={cn(
+            "right-2 top-2 bottom-2 fixed z-10 outline-none flex w-[320px]",
+            className,
+          )}
+          // The gap between the edge of the screen and the drawer is 8px in this case.
+          style={
+            { "--initial-transform": "calc(100% + 8px)" } as React.CSSProperties
+          }
+        >
+          <div className="bg-zinc-50 h-full w-full grow p-5 flex flex-col rounded-lg">
+            {children}
+          </div>
+        </DrawerPrimitive.Content>
+      </DrawerPrimitive.Portal>
+    </DrawerPrimitive.Root>
+  );
+}