GUI: Scroll fixes #115

src/index.tsx

@@ -9,13 +9,13 @@ import QueryBrowser from "./routes/QueryBrowser";
 import { SettingsWrapper, SettingsRoutes } from "./routes/Settings";
 import UserAccount from "./routes/UserAccount";
 import { ChatRoutes, ChatWrapper } from "./routes/Chat";
-import FolderBrowser from "./routes/FolderBrowser";
+import DirectoryBrowser from "./routes/DirectoryBrowser";
 
 render(
   () => (
     <Router root={App}>
       <Route path={"/browse"} component={QueryBrowser} />
-      <Route path="/directory/:directoryId/" component={FolderBrowser} />
+      <Route path="/directory/:directoryId/" component={DirectoryBrowser} />
       <Route path={"/settings"} component={SettingsWrapper}>
         <SettingsRoutes />
       </Route>
@@ -26,5 +26,5 @@ render(
       </Route>
     </Router>
   ),
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );

src/routes/Chat.tsx

@@ -27,16 +27,15 @@ const ChatThreadIndex: Component = () => {
 
   return (
     <>
-      <div class="flex h-full">
-        <div class="w-2/5 mr-4">
-          <div class="mb-4" />
+      <div class="flex gap-4 h-full">
+        <div class="w-2/5 overflow-y-auto pr-4">
           <Heading size="3xl">Recent chats with AI</Heading>
           <For each={chatThread.threadList}>
             {(thread) => <Thread {...thread} />}
           </For>
         </div>
 
-        <div class="w-3/5 overflow-y-auto h-full">
+        <div class="w-3/5 overflow-y-auto">
           {!!params.threadId && (
             <For each={chatThread.replyListForThread}>
               {(reply) => <ReplyItem {...reply} />}

src/routes/FolderBrowser.tsx → src/routes/DirectoryBrowser.tsx

@@ -3,23 +3,25 @@ import Loader from "../widgets/directory/Loader";
 import { DirectoryProvider } from "../stores/directory";
 import FileList from "../widgets/directory/FileList";
 import FileContents from "../widgets/directory/FileContents";
+import Heading from "../widgets/typography/Heading";
 
-const FolderBrowser: Component = () => {
+const DirectoryBrowser: Component = () => {
   return (
     <DirectoryProvider>
       <Loader />
 
-      <div class="flex flex-row w-full overflow-hidden">
-        <div class="flex flex-col w-96 border-r-2 border-gray-500">
+      <div class="flex gap-4 h-full">
+        <div class="w-1/5 pr-3 border-r border-gray-500 overflow-y-auto">
+          <Heading size="xl">Files</Heading>
           <FileList />
         </div>
 
-        <div class="flex flex-col w-full px-6">
+        <div class="w-4/5 px-2 overflow-y-auto">
           <FileContents />
         </div>
       </div>
     </DirectoryProvider>
   );
 };
 
-export default FolderBrowser;
+export default DirectoryBrowser;

src/stores/directory.tsx

@@ -38,6 +38,16 @@ const makeStore = () => {
           contents: result as Array<[number, APIFileContent]>,
         });
       },
+
+      generateEmbeddings: async (
+        directoryId: string,
+        relativeFilePath: string
+      ) => {
+        let result = await invoke("generate_text_embedding", {
+          directoryId,
+          relativeFilePath,
+        });
+      },
     },
   ] as const; // `as const` forces tuple type inference
 };

src/widgets/directory/FileContents.tsx

@@ -1,6 +1,8 @@
 import { Component, For, createMemo } from "solid-js";
 import { useDirectory } from "../../stores/directory";
 import Heading from "../typography/Heading";
+import Button from "../interactable/Button";
+import { useParams, useSearchParams } from "@solidjs/router";
 
 interface IParagraphPropTypes {
   text: string;
@@ -16,22 +18,41 @@ const Paragraph: Component<IParagraphPropTypes> = (props) => {
 
 const FileContents: Component = () => {
   // We return a list of all the components that are headings or paragraphs
-  const [store] = useDirectory();
+  const [store, { generateEmbeddings }] = useDirectory();
+  const params = useParams();
+  const [searchParams] = useSearchParams();
 
   const getContents = createMemo(() => {
     return store.contents;
   });
 
+  const handleGenerateEmdeddings = () => {
+    generateEmbeddings(
+      params.directoryId as string,
+      searchParams.relativeFilePath as string,
+    );
+  };
+
   return (
-    <For each={getContents()}>
-      {([index, content]) => {
-        if ("Paragraph" in content) {
-          return <Paragraph text={content.Paragraph}></Paragraph>;
-        } else if ("Heading" in content) {
-          return <Heading size="xl">{content.Heading}</Heading>;
-        }
-      }}
-    </For>
+    <>
+      <div class="m-2">
+        <Button
+          onClick={handleGenerateEmdeddings}
+          label="Generate emdeddings"
+          size="sm"
+        />
+      </div>
+
+      <For each={getContents()}>
+        {([index, content]) => {
+          if ("Paragraph" in content) {
+            return <Paragraph text={content.Paragraph}></Paragraph>;
+          } else if ("Heading" in content) {
+            return <Heading size="xl">{content.Heading}</Heading>;
+          }
+        }}
+      </For>
+    </>
   );
 };
 

src/widgets/directory/FileItem.tsx

@@ -7,7 +7,7 @@ const FileItem: Component<APIFileNode> = (props) => {
 
   return (
     <a
-      class="ml-4 mr-2 block rounded-md px-2 py-0.5 text-gray-200 hover:bg-zinc-700 cursor-pointer"
+      class="px-2 block rounded-md py-0.5 text-sm whitespace-nowrap overflow-hidden text-gray-200 hover:bg-zinc-700 cursor-pointer"
       href={`/directory/${params.directoryId}/?relativeFilePath=${props.relativePath}`}
     >
       <i

src/widgets/directory/FileList.tsx

@@ -7,7 +7,11 @@ const FileList: Component = () => {
 
   const getFileList = createMemo(() => store.fileList);
 
-  return <For each={getFileList()}>{(file) => <FileItem {...file} />}</For>;
+  return (
+    <div class="overflow-y-auto">
+      <For each={getFileList()}>{(file) => <FileItem {...file} />}</For>
+    </div>
+  );
 };
 
 export default FileList;