From 2f6184b99d6fe69991c400a73bb0c56915aa8afa Mon Sep 17 00:00:00 2001
From: L <6723574+louisgv@users.noreply.github.com>
Date: Sun, 11 Jun 2023 23:14:48 -0400
Subject: [PATCH] chore: cleanup ux, prepare for prompt params tweak (#28)

---
 apps/desktop/package.json                     |  2 +-
 apps/desktop/src-tauri/src/inference/mod.rs   |  2 ++
 .../stop_handler.rs                           |  0
 .../mod.rs => inference/thread.rs}            |  5 ++--
 .../desktop/src-tauri/src/inference_server.rs |  2 +-
 apps/desktop/src-tauri/src/main.rs            |  2 +-
 apps/desktop/src-tauri/src/model_pool.rs      |  2 +-
 .../src-tauri/src/threads_directory.rs        |  1 +
 .../inference-server/model-list-item.tsx      |  4 +--
 .../model-downloader/model-selector.tsx       |  4 +--
 .../src/features/thread/new-thread.tsx        |  2 +-
 .../src/features/thread/prompt-textarea.tsx   |  2 +-
 apps/desktop/src/features/thread/side-bar.tsx | 13 ++++-----
 .../src/features/thread/use-active-thread.ts  |  2 +-
 .../src/features/thread/use-thread-config.ts  | 11 +++++++
 apps/desktop/src/views/chat.tsx               | 10 ++++---
 apps/desktop/src/views/model-manager.tsx      | 29 ++++++++++---------
 17 files changed, 53 insertions(+), 40 deletions(-)
 create mode 100644 apps/desktop/src-tauri/src/inference/mod.rs
 rename apps/desktop/src-tauri/src/{inference_thread => inference}/stop_handler.rs (100%)
 rename apps/desktop/src-tauri/src/{inference_thread/mod.rs => inference/thread.rs} (98%)
 create mode 100644 apps/desktop/src/features/thread/use-thread-config.ts

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 5e5a59e..6ffeb0f 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@localai/desktop",
   "private": true,
-  "version": "0.2.7",
+  "version": "0.2.8",
   "scripts": {
     "dev:next": "next dev -p 1470",
     "build:next": "next build",
diff --git a/apps/desktop/src-tauri/src/inference/mod.rs b/apps/desktop/src-tauri/src/inference/mod.rs
new file mode 100644
index 0000000..145e50d
--- /dev/null
+++ b/apps/desktop/src-tauri/src/inference/mod.rs
@@ -0,0 +1,2 @@
+mod stop_handler;
+pub mod thread;
diff --git a/apps/desktop/src-tauri/src/inference_thread/stop_handler.rs b/apps/desktop/src-tauri/src/inference/stop_handler.rs
similarity index 100%
rename from apps/desktop/src-tauri/src/inference_thread/stop_handler.rs
rename to apps/desktop/src-tauri/src/inference/stop_handler.rs
diff --git a/apps/desktop/src-tauri/src/inference_thread/mod.rs b/apps/desktop/src-tauri/src/inference/thread.rs
similarity index 98%
rename from apps/desktop/src-tauri/src/inference_thread/mod.rs
rename to apps/desktop/src-tauri/src/inference/thread.rs
index eb26566..23554d2 100644
--- a/apps/desktop/src-tauri/src/inference_thread/mod.rs
+++ b/apps/desktop/src-tauri/src/inference/thread.rs
@@ -1,3 +1,4 @@
+/// Inference thread as in Machine Physical Thread
 use std::{convert::Infallible, sync::Arc};
 
 use actix_web::web::Bytes;
@@ -15,12 +16,10 @@ use serde::{Deserialize, Serialize};
 use tokio::task::JoinHandle;
 
 use crate::{
-  inference_thread::stop_handler::StopHandler,
+  inference::stop_handler::StopHandler,
   model_pool::{self, get_n_threads},
 };
 
-mod stop_handler;
-
 #[derive(Serialize, Deserialize, Debug)]
 pub struct CompletionRequest {
   prompt: String,
diff --git a/apps/desktop/src-tauri/src/inference_server.rs b/apps/desktop/src-tauri/src/inference_server.rs
index 994ffc9..8530852 100644
--- a/apps/desktop/src-tauri/src/inference_server.rs
+++ b/apps/desktop/src-tauri/src/inference_server.rs
@@ -15,7 +15,7 @@ use std::sync::{
 
 use crate::abort_stream::AbortStream;
 use crate::config::ConfigKey;
-use crate::inference_thread::{
+use crate::inference::thread::{
   start_inference, CompletionRequest, InferenceThreadRequest,
 };
 use crate::model_pool::{self, spawn_pool};
diff --git a/apps/desktop/src-tauri/src/main.rs b/apps/desktop/src-tauri/src/main.rs
index 4376a09..9d827dc 100644
--- a/apps/desktop/src-tauri/src/main.rs
+++ b/apps/desktop/src-tauri/src/main.rs
@@ -7,8 +7,8 @@ mod abort_stream;
 mod config;
 mod db;
 mod downloader;
+mod inference;
 mod inference_server;
-mod inference_thread;
 mod kv_bucket;
 mod macros;
 mod model_integrity;
diff --git a/apps/desktop/src-tauri/src/model_pool.rs b/apps/desktop/src-tauri/src/model_pool.rs
index 6473cd8..ab81963 100644
--- a/apps/desktop/src-tauri/src/model_pool.rs
+++ b/apps/desktop/src-tauri/src/model_pool.rs
@@ -7,7 +7,7 @@ use llm::{load_progress_callback_stdout, ModelArchitecture, VocabularySource};
 
 use std::path::Path;
 
-use crate::inference_thread::ModelGuard;
+use crate::inference::thread::ModelGuard;
 use std::collections::VecDeque;
 
 pub static LOADED_MODEL_POOL: Lazy<Mutex<VecDeque<Option<ModelGuard>>>> =
diff --git a/apps/desktop/src-tauri/src/threads_directory.rs b/apps/desktop/src-tauri/src/threads_directory.rs
index 24606e7..22cda09 100644
--- a/apps/desktop/src-tauri/src/threads_directory.rs
+++ b/apps/desktop/src-tauri/src/threads_directory.rs
@@ -1,3 +1,4 @@
+/// Thread as in chat/conversation thread
 use chrono::Utc;
 use rand::Rng;
 use serde::{Deserialize, Serialize};
diff --git a/apps/desktop/src/features/inference-server/model-list-item.tsx b/apps/desktop/src/features/inference-server/model-list-item.tsx
index 2e0e69a..474261a 100644
--- a/apps/desktop/src/features/inference-server/model-list-item.tsx
+++ b/apps/desktop/src/features/inference-server/model-list-item.tsx
@@ -32,8 +32,8 @@ export const ModelListItem = ({ model }: { model: ModelMetadata }) => {
           "text-gray-11 hover:text-gray-12",
           "transition-colors group",
           activeModel?.path === model.path
-            ? "ring ring-green-7 hover:ring-green-8"
-            : "ring ring-gray-7 hover:ring-gray-8"
+            ? "border border-green-7 hover:border-green-8"
+            : "border border-gray-7 hover:border-gray-8"
         )}>
         <div className="flex items-center justify-between w-full">
           <ModelLabel />
diff --git a/apps/desktop/src/features/model-downloader/model-selector.tsx b/apps/desktop/src/features/model-downloader/model-selector.tsx
index 274cf4d..3602492 100644
--- a/apps/desktop/src/features/model-downloader/model-selector.tsx
+++ b/apps/desktop/src/features/model-downloader/model-selector.tsx
@@ -17,7 +17,7 @@ import { toGB } from "~features/model-downloader/model-file"
 import { useModelsApi } from "~features/model-downloader/use-models-api"
 import { useGlobal } from "~providers/global"
 
-export const ModelSelector = () => {
+export const ModelSelector = ({ className = "" }) => {
   const {
     modelsDirectoryState: { updateModelsDirectory, modelsMap }
   } = useGlobal()
@@ -34,7 +34,7 @@ export const ModelSelector = () => {
   )
 
   return (
-    <div className="flex gap-2 w-full">
+    <div className={cn("flex gap-2 w-full", className)}>
       <Select value={selectedModelHash} onValueChange={setSelectedModelHash}>
         <SelectTrigger
           className={cn(
diff --git a/apps/desktop/src/features/thread/new-thread.tsx b/apps/desktop/src/features/thread/new-thread.tsx
index ccdffa2..5883731 100644
--- a/apps/desktop/src/features/thread/new-thread.tsx
+++ b/apps/desktop/src/features/thread/new-thread.tsx
@@ -19,7 +19,7 @@ export const NewThreadButton = ({ className = "" }) => {
         setActiveThread(newThread)
         setCurrentRoute(Route.Chat)
       }}>
-      <FilePlusIcon /> New Thread
+      <FilePlusIcon className="w-4 h-4 shrink-0" /> New Thread
     </Button>
   )
 }
diff --git a/apps/desktop/src/features/thread/prompt-textarea.tsx b/apps/desktop/src/features/thread/prompt-textarea.tsx
index 6276114..ace0809 100644
--- a/apps/desktop/src/features/thread/prompt-textarea.tsx
+++ b/apps/desktop/src/features/thread/prompt-textarea.tsx
@@ -76,7 +76,7 @@ export const PromptTextarea = ({
           className={cn(
             "w-12 h-12 justify-center p-0",
             "disabled:cursor-not-allowed",
-            "bg-blue-9 hover:bg-blue-10 text-blue-12 disabled:bg-gray-9 disabled:text-gray-11"
+            "bg-blue-9 hover:bg-blue-10 text-blue-12 disabled:bg-gray-3 disabled:text-gray-9"
           )}
           disabled={!isResponding && !prompt}
           onClick={isResponding ? onStop : submit}>
diff --git a/apps/desktop/src/features/thread/side-bar.tsx b/apps/desktop/src/features/thread/side-bar.tsx
index f589715..be71a0d 100644
--- a/apps/desktop/src/features/thread/side-bar.tsx
+++ b/apps/desktop/src/features/thread/side-bar.tsx
@@ -1,17 +1,14 @@
 import { Button } from "@localai/ui/button"
 import { Input } from "@localai/ui/input"
 import {
+  ChatBubbleIcon,
   CheckIcon,
   Cross2Icon,
+  FileTextIcon,
   Pencil1Icon,
   TrashIcon
 } from "@radix-ui/react-icons"
-import {
-  MessageText,
-  PeopleTag,
-  SidebarCollapse,
-  SidebarExpand
-} from "iconoir-react"
+import { PeopleTag, SidebarCollapse, SidebarExpand } from "iconoir-react"
 import { useMemo, useRef } from "react"
 
 import { NavButton } from "~features/layout/nav-button"
@@ -21,7 +18,7 @@ import type { FileInfo } from "~features/model-downloader/model-file"
 import { Route, useGlobal } from "~providers/global"
 
 const iconMap = {
-  chat: MessageText,
+  chat: FileTextIcon,
   agent: PeopleTag
 } as const
 
@@ -30,7 +27,7 @@ export type ChatType = keyof typeof iconMap
 function ChatIcon({ type = undefined as ChatType }) {
   const Icon = useMemo(() => iconMap[type], [type])
 
-  return <Icon className="h-6 w-6 shrink-0" aria-hidden="true" />
+  return <Icon className="h-4 w-4 shrink-0" aria-hidden="true" />
 }
 
 function ThreadItem({ item = null as FileInfo, index = 0 }) {
diff --git a/apps/desktop/src/features/thread/use-active-thread.ts b/apps/desktop/src/features/thread/use-active-thread.ts
index 3de3a7f..c13509d 100644
--- a/apps/desktop/src/features/thread/use-active-thread.ts
+++ b/apps/desktop/src/features/thread/use-active-thread.ts
@@ -84,7 +84,7 @@ export const useActiveThread = () => {
           },
           body: JSON.stringify({
             prompt: getQAPrompt(text, systemPrompt),
-            max_tokens: 4200,
+            max_tokens: undefined,
             temperature: 0.9,
             stream: true
           })
diff --git a/apps/desktop/src/features/thread/use-thread-config.ts b/apps/desktop/src/features/thread/use-thread-config.ts
new file mode 100644
index 0000000..9366e8f
--- /dev/null
+++ b/apps/desktop/src/features/thread/use-thread-config.ts
@@ -0,0 +1,11 @@
+import { useState } from "react"
+
+import { useInit } from "~features/inference-server/use-init"
+
+export const useThreadConfig = () => {
+  const [maxTokens, _setMaxTokens] = useState(-1)
+
+  useInit(async () => {
+    _setMaxTokens(100)
+  }, [])
+}
diff --git a/apps/desktop/src/views/chat.tsx b/apps/desktop/src/views/chat.tsx
index efc9c53..dcbd703 100644
--- a/apps/desktop/src/views/chat.tsx
+++ b/apps/desktop/src/views/chat.tsx
@@ -20,6 +20,7 @@ import {
   Pokeball
 } from "iconoir-react"
 import { useMemo } from "react"
+import dedent from "ts-dedent"
 
 import { useToggle } from "~features/layout/use-toggle"
 import { ViewBody, ViewContainer, ViewHeader } from "~features/layout/view"
@@ -120,10 +121,11 @@ export const ChatView = () => {
           <Textarea
             rows={8}
             title="Prompt template (WIP)"
-            defaultValue={`
-<BOT>: {SYSTEM}
-<HUMAN>: {PROMPT}
-<BOT>:`}
+            defaultValue={dedent`
+                      <BOT>: {SYSTEM}
+                      <HUMAN>: {PROMPT}
+                      <BOT>:
+                    `}
           />
           <Input placeholder="Temperature (WIP)" defaultValue={0.47} />
           <Input placeholder="Max Tokens (WIP)" defaultValue={0.47} />
diff --git a/apps/desktop/src/views/model-manager.tsx b/apps/desktop/src/views/model-manager.tsx
index a6766dc..0b15ec2 100644
--- a/apps/desktop/src/views/model-manager.tsx
+++ b/apps/desktop/src/views/model-manager.tsx
@@ -90,26 +90,27 @@ export function ModelManagerView() {
 
         <ServerConfig />
       </ViewHeader>
-      <ViewBody className="flex flex-col p-8 gap-6">
-        <ModelSelector />
+      <ViewBody className="flex flex-col p-4 gap-2">
+        <ModelSelector className="sticky top-0 z-10 shadow-sm p-1 rounded-lg bg-gray-1 shadow-gray-6" />
         {models.length === 0 && (
           <p className="text-gray-9 italic pointer-events-none text-center">
             {`To start, download a model or change the models directory by
             clicking the "..." button.`}
           </p>
         )}
-
-        {models
-          .sort((a, b) =>
-            activeModel?.path === a.path
-              ? -1
-              : activeModel?.path === b.path
-              ? 1
-              : 0
-          )
-          .map((model) => (
-            <ModelListItem key={model.name} model={model} />
-          ))}
+        <div className="flex flex-col p-2 gap-6">
+          {models
+            .sort((a, b) =>
+              activeModel?.path === a.path
+                ? -1
+                : activeModel?.path === b.path
+                ? 1
+                : 0
+            )
+            .map((model) => (
+              <ModelListItem key={model.name} model={model} />
+            ))}
+        </div>
       </ViewBody>
     </ViewContainer>
   )