Merge pull request #60 from dezoito/dev

Merge from dev in 0.9.0
dezoito · Dec 20, 2024 · 7c8581f · 7c8581f
2 parents 0bddb60 + b6cfa6b
commit 7c8581f
Show file tree

Hide file tree

Showing 17 changed files with 276 additions and 269 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -18,7 +18,7 @@ jobs:
         include:
           - platform: "macos-latest" # for Arm based macs (M1 and above).
             args: "--target aarch64-apple-darwin"
-          - platform: "macos-12" # for Intel based macs.
+          - platform: "macos-13" # for Intel based macs.
             args: "--target x86_64-apple-darwin"
           - platform: "ubuntu-22.04" # for Linux
             args: ""

diff --git a/.github/workflows/rust-ci.yml → .github/workflows/rust-ci.yml.back b/.github/workflows/rust-ci.yml → .github/workflows/rust-ci.yml.back
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file.
 
+## [Version 0.9.0] - 2024-12-20
+
+### Added
+
+- Support for navigating over [variable] placeholders in prompts, to paste input.
+- Tooltips in upper menu corners.
+
+### Changed
+
+- Renamed components that had stupid names.
+- Removed MacOS 12 from the supported OSes when building releases (blame GH Actions).
+- Experimentally added support for MacOS 13.
+
+## [Version 0.8.0] - 2024-12-08
+
+### Changed
+
+- Experiments are stored in a database. File system is not used anymore.
+- Minor UI improvements in the Experiment selecion UI.
+
 ## [Version 0.7.0] - 2024-11-24
 
 ### Added
@@ -12,8 +32,7 @@ All notable changes to this project will be documented in this file.
 
 ### Changed
 
-- Several small UI improvements (mostly using ScrollAreas instead of overflows
-- Improved validation rules on experiment form
+- Several small UI improvements (mostly using ScrollAreas instead of overflows - Improved validation rules on experiment form
 
 ## [Version 0.6.2] - 2024-10-29
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ollama-grid-search",
   "private": true,
-  "version": "0.7.0",
+  "version": "0.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "grid-search-desktop"
-version = "0.7.0"
+version = "0.9.0"
 description = "A Tauri App to perform Grid Search and A/B testing experiments on LLMs"
 authors = ["dezoito"]
 license = "Whatever is in the repo"
@@ -34,6 +34,6 @@ eff-wordlist = "1.0.3"
 # DO NOT REMOVE!!
 custom-protocol = ["tauri/custom-protocol"]
 
-[profile.release]
-lto = true
+# [profile.release]
+# lto = true
 
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "ollama-grid-search",
-    "version": "0.7.0"
+    "version": "0.9.0"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -1,5 +1,5 @@
 import { PromptArchiveDialog } from "@/components/Prompt/prompt-archive-dialog";
-import { LogsSelector } from "@/components/Selectors/LogSelector";
+import { ExperimentSelector } from "@/components/Selectors/ExperimentSelector";
 import FormGridParams from "@/components/form-grid-params";
 import { ModeToggle } from "@/components/mode-toggle";
 import GridResultsPane from "@/components/results/grid-results-pane";
@@ -18,7 +18,7 @@ function Layout() {
         <nav className="hidden gap-4 md:flex">
           <PromptArchiveDialog />
           <ModeToggle />
-          <LogsSelector />
+          <ExperimentSelector />
           <SettingsDialog />
         </nav>
       </header>

diff --git a/src/components/Prompt/promp-archive-form.tsx b/src/components/Prompt/promp-archive-form.tsx
@@ -299,7 +299,8 @@ export function PromptArchiveForm(props: IProps) {
                   <Textarea {...field} rows={7} />
                 </FormControl>
                 <FormDescription>
-                  (Variable support will be added in the future.)
+                  You can define variables by enclosing them in square brackets,
+                  like <b>[input]</b> or <b>[var]</b>.
                 </FormDescription>
                 <FormMessage />
               </FormItem>

diff --git a/src/components/Prompt/prompt-archive-dialog.tsx b/src/components/Prompt/prompt-archive-dialog.tsx
@@ -12,6 +12,7 @@ import {
 import { ArchiveIcon, PlusIcon } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { PromptArchiveForm } from "./promp-archive-form";
 import { PromptList } from "./prompt-list";
 
@@ -30,11 +31,17 @@ export function PromptArchiveDialog() {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="transparentDark" size="icon">
-          <ArchiveIcon className="h-5 w-5" />
-        </Button>
-      </DialogTrigger>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button variant="transparentDark" size="icon">
+              <ArchiveIcon className="h-5 w-5" />
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent>Manage Prompts</TooltipContent>
+      </Tooltip>
+
       <DialogContent className="fixed left-2.5 right-2.5 top-5 h-[calc(100vh-30px)] w-[calc(100vw-20px)] max-w-none translate-x-0 translate-y-0">
         <div className="flex h-full flex-col">
           {/* Header */}

diff --git a/src/components/Selectors/LogSelector.tsx → ...mponents/Selectors/ExperimentSelector.tsx b/src/components/Selectors/LogSelector.tsx → ...mponents/Selectors/ExperimentSelector.tsx
@@ -29,6 +29,7 @@ import { invoke } from "@tauri-apps/api/tauri";
 import { saveAs } from "file-saver";
 import { useAtom } from "jotai";
 import { useState } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 function processExperimentData(logContent: string): TFormValues {
   const logData = JSON.parse(logContent);
@@ -144,7 +145,7 @@ const handleDownload = async (
   }
 };
 
-export function LogsSelector() {
+export function ExperimentSelector() {
   const queryClient = useQueryClient();
   const [_, setFormValues] = useAtom(formValuesAtom);
   const [sheetOpen, setSheetOpen] = useState(false);
@@ -197,19 +198,25 @@ export function LogsSelector() {
 
   return (
     <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-      <SheetTrigger asChild>
-        <Button
-          variant="transparentDark"
-          size="icon"
-          onClick={() =>
-            queryClient.refetchQueries({
-              queryKey: ["get_experiments"],
-            })
-          }
-        >
-          <FileTextIcon className="h-5 w-5" />
-        </Button>
-      </SheetTrigger>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <SheetTrigger asChild>
+            <Button
+              variant="transparentDark"
+              size="icon"
+              onClick={() =>
+                queryClient.refetchQueries({
+                  queryKey: ["get_experiments"],
+                })
+              }
+            >
+              <FileTextIcon className="h-5 w-5" />
+            </Button>
+          </SheetTrigger>
+        </TooltipTrigger>
+        <TooltipContent sideOffset={5}>Saved experiments</TooltipContent>
+      </Tooltip>
+
       <SheetContent className="w-[510px] sm:max-w-none">
         <SheetHeader>
           <SheetTitle className="text-2xl">Experiments</SheetTitle>

diff --git a/src/components/Selectors/PromptSelector.tsx b/src/components/Selectors/PromptSelector.tsx
@@ -7,16 +7,14 @@ import {
   FormItem,
   FormLabel,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { PlusIcon, TrashIcon } from "@radix-ui/react-icons";
-import * as React from "react";
 import { useFieldArray, useFormState } from "react-hook-form";
-import { Autocomplete } from "./autocomplete";
+import { PromptTextArea } from "../prompt-textarea";
 
 interface IProps {
   form: any;
@@ -28,39 +26,18 @@ function PromptSelector({ form }: IProps) {
     name: "prompts",
   });
 
-  // Get the form state to access errors
   const { errors } = useFormState({
     control: form.control,
   });
 
   const handleAppendPrompt = () => {
-    append(""); // Ensure an empty string is passed
-    form.setValue(`prompts.${fields.length}`, ""); // Explicitly set the new field's value
+    append("");
+    form.setValue(`prompts.${fields.length}`, "");
   };
 
-  // Debug logging for errors
-  React.useEffect(() => {
-    console.log("Prompt Selector Errors:", JSON.stringify(errors, null, 2));
-  }, [errors]);
-
-  const [showAutocomplete, setShowAutocomplete] = React.useState(false);
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-
-  const handlePromptChange = (
-    e: React.ChangeEvent<HTMLTextAreaElement>,
-    index: number,
-  ) => {
-    const value = e.target.value;
-
-    // Update form value
+  const handlePromptChange = (value: string, index: number) => {
     form.setValue(`prompts.${index}`, value);
-    // Updates validation check to clear errors
     form.trigger();
-
-    // Check for autocomplete trigger
-    const shouldShowAutocomplete = value.startsWith("/");
-    setShowAutocomplete(shouldShowAutocomplete);
-    setCurrentIndex(index);
   };
 
   return (
@@ -72,7 +49,6 @@ function PromptSelector({ form }: IProps) {
           <FormLabel className="flex flex-row items-center justify-between text-base font-bold">
             Prompts
           </FormLabel>
-          {/* Global error message */}
           {errors.prompts && typeof errors.prompts === "object" && (
             <div className="text-red-500 dark:text-red-900">
               {errors.prompts.root?.message?.toString()}
@@ -90,7 +66,9 @@ function PromptSelector({ form }: IProps) {
                     <div>
                       <PromptDialog
                         content={fieldProps.value}
-                        handleChange={(e) => handlePromptChange(e, index)}
+                        handleChange={(e) =>
+                          handlePromptChange(e.target.value, index)
+                        }
                         idx={index}
                         fieldName={`prompts.${index}`}
                         fieldLabel="prompt"
@@ -113,28 +91,14 @@ function PromptSelector({ form }: IProps) {
                     </div>
                   </FormLabel>
                   <FormControl>
-                    <>
-                      <Textarea
-                        {...fieldProps}
-                        className="flex-1"
-                        rows={4}
-                        onChange={(e) => {
-                          fieldProps.onChange(e);
-                          handlePromptChange(e, index);
-                        }}
-                        placeholder="Type '/' to search prompts..."
-                      />
-                      <Autocomplete
-                        trigger={showAutocomplete && currentIndex === index}
-                        index={index}
-                        inputText={fieldProps.value}
-                        onSelect={(value) => {
-                          fieldProps.onChange(value);
-                          form.setValue(`prompts.${index}`, value);
-                          setShowAutocomplete(false);
-                        }}
-                      />
-                    </>
+                    <PromptTextArea
+                      value={fieldProps.value}
+                      onChange={(value) => {
+                        fieldProps.onChange(value);
+                        handlePromptChange(value, index);
+                      }}
+                      className="flex-1"
+                    />
                   </FormControl>
                 </FormItem>
               )}

diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
@@ -2,21 +2,29 @@ import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 
 import { useTheme } from "@/components/theme-provider";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 export function ModeToggle() {
   const { setTheme, theme } = useTheme();
 
   return (
-    <Button
-      variant="transparentDark"
-      size="icon"
-      onClick={() => setTheme(theme == "dark" ? "light" : "dark")}
-    >
-      {theme == "dark" ? (
-        <SunIcon className="h-5 w-5" />
-      ) : (
-        <MoonIcon className="h-5 w-5" />
-      )}
-    </Button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="transparentDark"
+          size="icon"
+          onClick={() => setTheme(theme == "dark" ? "light" : "dark")}
+        >
+          {theme == "dark" ? (
+            <SunIcon className="h-5 w-5" />
+          ) : (
+            <MoonIcon className="h-5 w-5" />
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        {theme == "dark" ? "Switch to light mode" : "Switch to dark mode"}
+      </TooltipContent>
+    </Tooltip>
   );
 }