From de558a47c68ba1d6c5217b3e7a701a01789bc2d3 Mon Sep 17 00:00:00 2001
From: Louis Beaumont <louis.beaumont@gmail.com>
Date: Mon, 16 Sep 2024 14:05:15 -0700
Subject: [PATCH] feat: add open data folder button, tooltip + fix include
 frame +

---
 .../components/screenpipe-status.tsx          | 44 ++++++++++++++---
 .../components/search-chat.tsx                | 49 ++++++++++++-------
 screenpipe-app-tauri/lib/screenpipe.ts        |  1 +
 3 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/screenpipe-app-tauri/components/screenpipe-status.tsx b/screenpipe-app-tauri/components/screenpipe-status.tsx
index a2a81ac7..2a9d304e 100644
--- a/screenpipe-app-tauri/components/screenpipe-status.tsx
+++ b/screenpipe-app-tauri/components/screenpipe-status.tsx
@@ -26,7 +26,9 @@ import { Separator } from "./ui/separator";
 import { Card, CardContent, CardFooter } from "./ui/card";
 import { useHealthCheck } from "@/lib/hooks/use-health-check";
 import { DevSettings } from "./dev-dialog";
-import { Lock } from "lucide-react";
+import { Lock, Folder } from "lucide-react";
+import { open } from "@tauri-apps/plugin-shell";
+import { homeDir } from "@tauri-apps/api/path";
 
 const getDebuggingCommands = (os: string | null) => {
   let cliInstructions = "";
@@ -50,7 +52,7 @@ ${cliInstructions}
 # 3. Run: screenpipe -h
 # 4. Choose your preferred setup and start Screenpipe:
 #    (Replace [YOUR_ARGS] with your chosen arguments)
-#    Example: screenpipe --data-dir `;
+#    Example: screenpipe --fps 1 `;
 
   const dataDir =
     os === "windows" ? "%USERPROFILE%\\.screenpipe" : "$HOME/.screenpipe";
@@ -208,8 +210,8 @@ const DevModeSettings = () => {
                 <p className="text-sm text-muted-foreground mb-4">
                   on = use CLI for more control
                   <br />
-                  in dev mode, backend won&apos;t <br />auto start when starting the
-                  app
+                  in dev mode, backend won&apos;t <br />
+                  auto start when starting the app
                 </p>
               </div>
             </CardContent>
@@ -357,6 +359,26 @@ const HealthStatus = ({ className }: { className?: string }) => {
     }
   };
 
+  const handleOpenDataDir = async () => {
+    try {
+      const homeDirPath = await homeDir();
+
+      const dataDir =
+        platform() === "macos" || platform() === "linux"
+          ? `${homeDirPath}/.screenpipe`
+          : `${homeDirPath}\\.screenpipe`;
+      await open(dataDir as string);
+    } catch (error) {
+      console.error("failed to open data directory:", error);
+      toast({
+        title: "error",
+        description: "failed to open data directory.",
+        variant: "destructive",
+        duration: 3000,
+      });
+    }
+  };
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case "Healthy":
@@ -397,11 +419,21 @@ const HealthStatus = ({ className }: { className?: string }) => {
       </Badge>
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogContent
-          className="max-w-3xl max-h-[80vh] flex flex-col"
+          className="max-w-3xl max-h-[80vh] flex flex-col p-8"
           aria-describedby="status-dialog-description"
         >
-          <DialogHeader>
+          <DialogHeader className="flex flex-row items-center justify-between">
             <DialogTitle>{health.status.toLowerCase()} status</DialogTitle>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleOpenDataDir}
+              className="flex-shrink-0"
+            >
+              <Folder className="h-4 w-4 mr-2" />
+              open data dir
+            </Button>
           </DialogHeader>
           <div className="flex-grow overflow-auto">
             <p className="text-sm mb-2">
diff --git a/screenpipe-app-tauri/components/search-chat.tsx b/screenpipe-app-tauri/components/search-chat.tsx
index 4c2536f8..a7e7dfa3 100644
--- a/screenpipe-app-tauri/components/search-chat.tsx
+++ b/screenpipe-app-tauri/components/search-chat.tsx
@@ -360,22 +360,34 @@ export function SearchChat() {
                       <VideoComponent filePath={item.content.file_path} />
                     </div>
                     {includeFrames && item.content.frame && (
-                      <Dialog>
-                        <DialogTrigger asChild>
-                          <img
-                            src={`data:image/jpeg;base64,${item.content.frame}`}
-                            alt="Frame"
-                            className="mt-2 w-24 h-auto cursor-pointer"
-                          />
-                        </DialogTrigger>
-                        <DialogContent className="sm:max-w-[80vw]">
-                          <img
-                            src={`data:image/jpeg;base64,${item.content.frame}`}
-                            alt="Frame"
-                            className="w-full h-auto"
-                          />
-                        </DialogContent>
-                      </Dialog>
+                      <div className="mt-2 flex items-center">
+                        <Dialog>
+                          <DialogTrigger asChild>
+                            <img
+                              src={`data:image/jpeg;base64,${item.content.frame}`}
+                              alt="Frame"
+                              className="w-24 h-auto cursor-pointer"
+                            />
+                          </DialogTrigger>
+                          <DialogContent className="sm:max-w-[80vw]">
+                            <img
+                              src={`data:image/jpeg;base64,${item.content.frame}`}
+                              alt="Frame"
+                              className="w-full h-auto"
+                            />
+                          </DialogContent>
+                        </Dialog>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <HelpCircle className="h-4 w-4 text-gray-400 ml-2 cursor-help" />
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>this is the frame where the text appeared</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
                     )}
                   </>
                 )}
@@ -626,8 +638,9 @@ export function SearchChat() {
               </TooltipTrigger>
               <TooltipContent>
                 <p>
-                  include frames in the search results. this will only show
-                  frames for ocr. this slows down the search.
+                  include frames in the search results. this shows the frame
+                  where the text appeared. only works for ocr. this may slow
+                  down the search.
                 </p>
               </TooltipContent>
             </Tooltip>
diff --git a/screenpipe-app-tauri/lib/screenpipe.ts b/screenpipe-app-tauri/lib/screenpipe.ts
index cce2a19b..2525d7dc 100644
--- a/screenpipe-app-tauri/lib/screenpipe.ts
+++ b/screenpipe-app-tauri/lib/screenpipe.ts
@@ -153,6 +153,7 @@ export async function queryScreenpipe(
         content_type: params.content_type,
         app_name: params.app_name,
         window_name: params.window_name, // Add window_name to query parameters
+        include_frames: params.include_frames.toString(),
         min_length: params.min_length.toString(),
         max_length: params.max_length.toString(),
       }).filter(([_, v]) => v != null) as [string, string][]