Merge branch 'tauri-example-postgres' of tb-github:electric-sql/elect…

…ric into tauri-example-postgres
electric-sql · Feb 1, 2024 · 31ed7d3 · 31ed7d3
2 parents 2e591e5 + 046289b
commit 31ed7d3
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 17 deletions.
diff --git a/examples/tauri-postgres/src-tauri/Cargo.lock b/examples/tauri-postgres/src-tauri/Cargo.lock
diff --git a/examples/tauri-postgres/src-tauri/Cargo.toml b/examples/tauri-postgres/src-tauri/Cargo.toml
@@ -17,7 +17,7 @@ tauri-build = { version = "1.4.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.4.0", features = [ "shell-sidecar", "devtools"] }
+tauri = { version = "1.4.0", features = [ "shell-open", "shell-sidecar", "devtools"] }
 sqlx = { version = "0.7.0", features = ["runtime-tokio", "postgres"] }
 tokio = { version = "1.29.1", features = ["full"] }
 log = "0.4.19"

diff --git a/examples/tauri-postgres/src-tauri/tauri.conf.json b/examples/tauri-postgres/src-tauri/tauri.conf.json
@@ -17,7 +17,8 @@
         "scope": [
           { "name": "ollama", "sidecar": true }
         ],
-        "sidecar": true
+        "sidecar": true,
+        "open": true
       }
     },
     "bundle": {

diff --git a/examples/tauri-postgres/src/components/LeftMenu.tsx b/examples/tauri-postgres/src/components/LeftMenu.tsx
@@ -149,7 +149,11 @@ function LeftMenu() {
 
           {/* bottom group */}
           <div className="flex flex-col px-2 pb-2 text-gray-500 mt-7">
-            <a className="inline-flex" href="https://electric-sql.com/">
+            <a
+              className="inline-flex"
+              href="https://electric-sql.com/"
+              target="_blank"
+            >
               <ElectricIcon className="w-3 h-3 mr-2 mt-1 scale-150" />{' '}
               ElectricSQL
             </a>

diff --git a/examples/tauri-postgres/src/components/ProfileMenu.tsx b/examples/tauri-postgres/src/components/ProfileMenu.tsx
@@ -60,18 +60,21 @@ export default function ProfileMenu({
         <a
           href="https://www.electric-sql.com"
           className="flex items-center h-8 px-3 hover:bg-gray-100"
+          target="_blank"
         >
           Visit ElectricSQL
         </a>
         <a
           href="https://www.electric-sql.com/docs"
           className="flex items-center h-8 px-3 hover:bg-gray-100"
+          target="_blank"
         >
           Documentation
         </a>
         <a
-          href="https://github.com/electric-sql/electric/tree/main/examples/linearlite"
+          href="https://github.com/electric-sql/electric/tree/tauri-example-postgres/examples/tauri-postgres"
           className="flex items-center h-8 px-3 hover:bg-gray-100"
+          target="_blank"
         >
           GitHub
         </a>

diff --git a/examples/tauri-postgres/src/pages/Chat/index.tsx b/examples/tauri-postgres/src/pages/Chat/index.tsx
@@ -13,6 +13,7 @@ function Chat() {
   const [question, setQuestion] = useState<string>("");
   const [answer, setAnswer] = useState<string[]>([]);
   const [working, setWorking] = useState<boolean>(false);
+  const [issues, setIssues] = useState<Issue[]>([]);
   const scrollRef = useRef<HTMLDivElement>(null);
   const { db } = useElectric()!;
   const navigate = useNavigate();
@@ -29,6 +30,7 @@ function Chat() {
         LIMIT 50;
       `,
     });
+    setIssues(issues as Issue[]);
     const context = issues
       .map(
         (issue: any) =>
@@ -115,19 +117,49 @@ function Chat() {
           </div>
         </div>
       </div>
-      <div
-        className="flex flex-col flex-grow items-center h-full w-full overflow-y-auto"
-        ref={scrollRef}
-      >
-        <div className="h-full p-5 max-w-prose min-w-prose prose w-full">
-          {working && answer.length === 0 ? (
-            <div className="opacity-50">
-              <Spinner />
-            </div>
-          ) : (
-            <ReactMarkdown>{answerText}</ReactMarkdown>
-          )}
+      <div className="flex flex-row flex-grow items-center h-full w-full overflow-y-auto">
+        <div
+          className="flex flex-col flex-grow items-center h-full w-full overflow-y-auto"
+          ref={scrollRef}
+        >
+          <div className="h-full p-5 max-w-prose min-w-prose prose w-full">
+            {working && answer.length === 0 ? (
+              <div className="opacity-50">
+                <Spinner />
+              </div>
+            ) : (
+              <ReactMarkdown>{answerText}</ReactMarkdown>
+            )}
+          </div>
         </div>
+        {issues?.length && (
+          <div
+            className="flex flex-col flex-shrink-0 py-5 px-2 h-full border-l border-gray-200  overflow-y-auto  opacity-70"
+            style={{
+              minWidth: 200,
+              maxWidth: 200,
+            }}
+          >
+            <h4
+              className="text-gray-500 text-sm font-semibold mb-2"
+              style={{ lineHeight: 1.2 }}
+            >
+              Referenced Issues
+            </h4>
+            <div className="flex flex-col flex-grow">
+              {issues.map((issue, i) => (
+                <div className="flex flex-col mb-2 text-sm">
+                  <span
+                    onClick={() => navigate(`/issue/${issue.id}`)}
+                    className="cursor-pointer no-wrap overflow-hidden font-medium line-clamp-1 overflow-ellipsis"
+                  >
+                    {i + 1}. {issue.title}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
       </div>
       <div className="w-full flex items-center justify-between flex-shrink-0 pl-6 pr-6 border-t border-gray-200 py-2">
         <input

diff --git a/examples/tauri-postgres/src/pages/List/index.tsx b/examples/tauri-postgres/src/pages/List/index.tsx
@@ -24,7 +24,7 @@ function List({ showSearch = false }) {
       kanbanorder: true,
       username: true,
     },
-    ...(filterState.searchType !== "vector"
+    ...(!useVectorSearch
       ? {
           orderBy: { [filterState.orderBy]: filterState.orderDirection },
         }