feat: add version in menu

fix: size of ai chat in timeline fix: easier to drag in timeline refactor: timeline not too intrusive
mediar-ai · Nov 4, 2024 · 097da66 · 097da66
1 parent 5faa505
commit 097da66
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 53 deletions.
diff --git a/screenpipe-app-tauri/app/timeline/page.tsx b/screenpipe-app-tauri/app/timeline/page.tsx
@@ -533,6 +533,9 @@ export default function Timeline() {
             - Convert timestamps to local time for human-readable responses
             - Never output UTC time unless explicitly asked
             - Focus on ${selectedAgent.description}
+            - Follow the user's instructions carefully & to the letter: ${
+              settings.customPrompt
+            }
             `,
         },
         ...chatMessages,
@@ -613,13 +616,11 @@ export default function Timeline() {
   }, []);
 
   const handlePanelMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      setIsDraggingPanel(true);
-      setDragOffset({
-        x: e.clientX - position.x,
-        y: e.clientY - position.y,
-      });
-    }
+    setIsDraggingPanel(true);
+    setDragOffset({
+      x: e.clientX - position.x,
+      y: e.clientY - position.y,
+    });
   };
 
   const handlePanelMouseMove = (e: React.MouseEvent) => {
@@ -838,62 +839,62 @@ export default function Timeline() {
               left: position.x,
               top: position.y,
               width: chatWindowSize.width,
-              height: isAiPanelExpanded ? chatWindowSize.height : 80,
-              cursor: isDraggingPanel ? "grabbing" : "grab",
+              height: isAiPanelExpanded ? chatWindowSize.height : 120,
+              cursor: isDraggingPanel ? "grabbing" : "default",
             }}
             className={`bg-background border border-muted-foreground rounded-lg shadow-lg transition-all duration-300 ease-in-out z-[100]`}
           >
             <div
-              className="p-2 border-b border-muted-foreground select-none flex justify-between items-center group"
+              className="select-none cursor-grab active:cursor-grabbing"
               onMouseDown={handlePanelMouseDown}
               onMouseMove={handlePanelMouseMove}
               onMouseUp={handlePanelMouseUp}
               onMouseLeave={handlePanelMouseUp}
             >
-              <div className="flex items-center gap-2 flex-1 cursor-grab active:cursor-grabbing">
-                <GripHorizontal className="w-4 h-4 text-muted-foreground group-hover:text-foreground" />
-                <div className="text-muted-foreground text-xs">
-                  {new Date(
-                    selectionRange.start.getTime()
-                  ).toLocaleTimeString()}{" "}
-                  -{" "}
-                  {new Date(selectionRange.end.getTime()).toLocaleTimeString()}
+              <div className="p-4 border-b border-muted-foreground flex justify-between items-center group">
+                <div className="flex items-center gap-2 flex-1">
+                  <GripHorizontal className="w-4 h-4 text-muted-foreground group-hover:text-foreground" />
+                  <div className="text-muted-foreground text-xs">
+                    {new Date(selectionRange.start.getTime()).toLocaleTimeString()} -{" "}
+                    {new Date(selectionRange.end.getTime()).toLocaleTimeString()}
+                  </div>
                 </div>
-              </div>
-              <button
-                onClick={() => {
-                  setSelectionRange(null);
-                  setIsAiPanelExpanded(false);
-                  setChatMessages([]);
-                  setAiInput("");
-                }}
-                className="text-muted-foreground hover:text-foreground transition-colors ml-2"
-              >
-                <X className="h-4 w-4" />
-              </button>
-            </div>
-
-            <div className="p-4">
-              {!isAiPanelExpanded && (
                 <button
-                  className="px-3 py-1 bg-background hover:bg-accent border text-foreground text-xs rounded flex items-center gap-2 transition-colors"
                   onClick={() => {
-                    setIsAiPanelExpanded(true);
-                    setTimeout(() => {
-                      inputRef.current?.focus();
-                    }, 100);
+                    setSelectionRange(null);
+                    setIsAiPanelExpanded(false);
+                    setChatMessages([]);
+                    setAiInput("");
                   }}
+                  className="text-muted-foreground hover:text-foreground transition-colors ml-2"
                 >
-                  <span>ask ai</span>
-                  <span className="text-muted-foreground text-[10px]">
-                    {osType === "macos" ? "⌘K" : "Ctrl+K"}
-                  </span>
+                  <X className="h-4 w-4" />
                 </button>
+              </div>
+
+              {!isAiPanelExpanded && (
+                <div className="p-4">
+                  <button
+                    className="px-3 py-1 bg-background hover:bg-accent border text-foreground text-xs rounded flex items-center gap-2 transition-colors"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsAiPanelExpanded(true);
+                      setTimeout(() => {
+                        inputRef.current?.focus();
+                      }, 100);
+                    }}
+                  >
+                    <span>ask ai</span>
+                    <span className="text-muted-foreground text-[10px]">
+                      {osType === "macos" ? "⌘K" : "Ctrl+K"}
+                    </span>
+                  </button>
+                </div>
               )}
             </div>
 
             {isAiPanelExpanded && (
-              <div className="flex flex-col h-[calc(100%-100px)]">
+              <div className="flex flex-col h-[calc(100%-52px)]">
                 <div
                   className="flex-1 overflow-y-auto p-4 space-y-4 min-h-0 hover:cursor-auto text-foreground font-mono text-sm leading-relaxed"
                   style={{
@@ -916,7 +917,7 @@ export default function Timeline() {
 
                 <form
                   onSubmit={handleAiSubmit}
-                  className="p-4 border-t border-muted-foreground"
+                  className="p-3 border-t border-muted-foreground"
                 >
                   <div className="flex flex-col gap-2">
                     <select

diff --git a/screenpipe-app-tauri/bun.lockb b/screenpipe-app-tauri/bun.lockb
diff --git a/screenpipe-app-tauri/components/ui/resizable.tsx b/screenpipe-app-tauri/components/ui/resizable.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/screenpipe-app-tauri/package.json b/screenpipe-app-tauri/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^0.0.39",
+    "@dnd-kit/core": "^6.1.0",
     "@mlc-ai/web-llm": "^0.2.51",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-zone": "^1.22.0",
@@ -71,6 +72,7 @@
     "react-day-picker": "8.10.1",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^2.1.6",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",

diff --git a/screenpipe-app-tauri/src-tauri/Cargo.lock b/screenpipe-app-tauri/src-tauri/Cargo.lock
diff --git a/screenpipe-app-tauri/src-tauri/Cargo.toml b/screenpipe-app-tauri/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "screenpipe-app"
-version = "0.8.9"
+version = "0.9.0"
 description = ""
 authors = ["you"]
 license = ""

diff --git a/screenpipe-app-tauri/src-tauri/src/commands.rs b/screenpipe-app-tauri/src-tauri/src/commands.rs
@@ -132,8 +132,9 @@ pub fn show_timeline(app_handle: tauri::AppHandle<tauri::Wry>) {
         #[cfg(target_os = "macos")]
         let _ = app_handle.set_activation_policy(tauri::ActivationPolicy::Accessory);
 
-        let _ = window.set_visible_on_all_workspaces(true);
-        let _ = window.set_always_on_top(true);
+        // let _ = window.set_visible_on_all_workspaces(true);
+        // let _ = window.set_always_on_top(true);
+        let _ = window.set_decorations(true);
         let _ = window.show();
         let _ = window.set_focus();
     } else {
@@ -143,10 +144,10 @@ pub fn show_timeline(app_handle: tauri::AppHandle<tauri::Wry>) {
             tauri::WebviewUrl::App("timeline.html".into()),
         )
         .title("timeline")
-        .decorations(false)
+        .decorations(true)
         .transparent(true)
-        .always_on_top(true)
-        .visible_on_all_workspaces(true) // Added this
+        // .always_on_top(true)
+        // .visible_on_all_workspaces(true) // Added this
         .center()
         .build()
         .unwrap();
@@ -210,6 +211,5 @@ pub fn update_show_screenpipe_shortcut(
         return Err("failed to set shortcut, reverted to default".to_string());
     }
 
-
     Ok(())
 }
diff --git a/screenpipe-app-tauri/src-tauri/src/main.rs b/screenpipe-app-tauri/src-tauri/src/main.rs
@@ -184,10 +184,17 @@ async fn main() {
             // Tray setup
             if let Some(main_tray) = app.tray_by_id("screenpipe_main") {
                 let show = MenuItemBuilder::with_id("show", "show screenpipe").build(app)?;
+                let version = MenuItemBuilder::with_id(
+                    "version",
+                    format!("version {}", app.package_info().version),
+                )
+                .enabled(false)
+                .build(app)?;
                 let menu_divider = PredefinedMenuItem::separator(app)?;
                 let quit = MenuItemBuilder::with_id("quit", "quit screenpipe").build(app)?;
                 let menu = MenuBuilder::new(app)
                     .items(&[
+                        &version,
                         &show,
                         update_manager.update_now_menu_item_ref(),
                         &menu_divider,