Fixing UI bugs (#2)

* Fixing UI bugs * Fixing tests
clarkmcc · Jul 22, 2023 · b71f214 · b71f214
1 parent e449a41
commit b71f214
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 61 deletions.
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -7,6 +7,7 @@ mod models;
 
 #[cfg(target_os = "macos")]
 mod titlebar;
+
 #[cfg(target_os = "macos")]
 use crate::titlebar::WindowExt;
 
@@ -15,8 +16,7 @@ use crate::events::Event;
 use crate::models::{get_local_model, Architecture, Model, ModelManager};
 use bytesize::ByteSize;
 use llm::{InferenceResponse, LoadProgress};
-use serde::{Deserialize, Serialize};
-use serde_json::json;
+use serde::Serialize;
 use std::convert::Infallible;
 use std::fs;
 use std::fs::create_dir_all;
@@ -181,8 +181,11 @@ async fn prompt(
 ) -> Result<PromptResponse, String> {
     info!("received prompt");
 
-    let mut binding = state.0.lock().unwrap();
-    let manager: &mut ModelManager = (*binding).as_mut().unwrap();
+    let mut binding = state
+        .0
+        .lock()
+        .map_err(|e| format!("Unable to lock the backend: {e}"))?;
+    let manager: &mut ModelManager = (*binding).as_mut().ok_or("Model not started".to_string())?;
     let message = format!("USER: {}\nSYSTEM: ", message);
     let mut response = String::new();
 

diff --git a/src/App.jsx b/src/App.jsx
@@ -27,9 +27,10 @@ function App() {
   }
 
   return (
-    <Box>
+    <>
       {error && (
         <Alert
+          className="top-0 sticky"
           color="danger"
           endDecorator={
             <Button
@@ -45,22 +46,21 @@ function App() {
           <Box className="pt-5">Error: {JSON.stringify(error)}</Box>
         </Alert>
       )}
-
-      <Grid container>
-        <Grid xs={6} className="overflow-hidden">
+      <Box className="h-screen flex overflow-hidden">
+        <div className="w-1/2 flex flex-col h-full overflow-hidden">
           {modelsLoaded && architecturesLoaded && (
             <Sidebar
               models={models}
               architectures={architectures}
               refreshModels={loadModels}
             />
           )}
-        </Grid>
-        <Grid xs={6}>
+        </div>
+        <div className="w-1/2 flex flex-col h-full overflow-hidden">
           <Chat />
-        </Grid>
-      </Grid>
-    </Box>
+        </div>
+      </Box>
+    </>
   );
 }
 

diff --git a/src/Chat.jsx b/src/Chat.jsx
@@ -28,7 +28,7 @@ export default function Chat({}) {
 
   const handleSend = useCallback(async () => {
     dispatch(setWorldFreeze(true));
-    endOfMessagesRef?.current?.scrollIntoView({ behavior: "smooth" });
+    scrollToBottom();
 
     createUserMessage(message);
     try {
@@ -48,6 +48,10 @@ export default function Chat({}) {
     dispatch(addMessage({ isUser: true, finished: true, message }));
   }
 
+  function scrollToBottom() {
+    endOfMessagesRef?.current?.scrollIntoView({ behavior: "smooth" });
+  }
+
   const handleSendKeyDown = async (event) => {
     if (event.keyCode === 13 && (event.metaKey || event.ctrlKey)) {
       await handleSend();
@@ -59,23 +63,32 @@ export default function Chat({}) {
     : "⌘ + Enter to send";
 
   return (
-    <Box className="relative" sx={{ width: "100%" }}>
+    <>
       <Box
-        className={`p-4 space-y-4 pb-16 ${
-          messages.length === 0 ? "flex" : ""
-        } `}
-        sx={{ height: "100vh", "-webkit-scrollbar": { display: "none" } }}
+        className={`overflow-auto flex-grow ${
+          messages.length === 0 ? "flex items-center justify-center" : ""
+        }`}
       >
-        {messages.length === 0 && <ModelLoadingSplash />}
-        {messages.map((m, i) => (
-          <ChatBubble key={i} isUser={m.isUser} message={m.message} />
-        ))}
-        {messageInProgress && (
-          <ChatBubble isUser={false} message={pendingMessage} loading={true} />
-        )}
-        <div ref={endOfMessagesRef} />
+        <Box
+          className={`p-4 space-y-4 flex-grow ${
+            messages.length === 0 ? "flex" : ""
+          } `}
+        >
+          {messages.length === 0 && <ModelLoadingSplash />}
+          {messages.map((m, i) => (
+            <ChatBubble key={i} isUser={m.isUser} message={m.message} />
+          ))}
+          {messageInProgress && (
+            <ChatBubble
+              isUser={false}
+              message={pendingMessage}
+              loading={true}
+            />
+          )}
+          <div ref={endOfMessagesRef} />
+        </Box>
       </Box>
-      <Box className="absolute bottom-0" sx={{ width: "100%" }} p={2}>
+      <Box className="sticky bottom-0" p={2}>
         <Input
           value={message}
           disabled={worldFreeze}
@@ -95,7 +108,7 @@ export default function Chat({}) {
           }
         />
       </Box>
-    </Box>
+    </>
   );
 }
 

diff --git a/src/ChatBubble.jsx b/src/ChatBubble.jsx
@@ -76,7 +76,13 @@ export default function ChatBubble({ isUser, message, loading, ...props }) {
 function Message({ message, loading, backgroundColor, color, ...props }) {
   return (
     <Box
-      sx={{ backgroundColor, outline: 0, border: 0, color }}
+      sx={{
+        backgroundColor,
+        outline: 0,
+        border: 0,
+        color,
+        whiteSpace: "pre-wrap",
+      }}
       className="break-words"
     >
       {message}

diff --git a/src/Sidebar.jsx b/src/Sidebar.jsx
@@ -82,18 +82,16 @@ export default function Sidebar({ models, architectures, refreshModels }) {
 
   function handleErrors(error) {
     console.error(error);
+    setErrorMessage(JSON.stringify(error));
   }
 
   return (
-    <Box className="h-full relative overflow-hidden" sx={{ width: "100%" }}>
+    <>
       <Sheet
-        className="pt-8 p-4 overflow-y-hidden"
+        className="pt-8 p-4 overflow-auto flex-grow"
         sx={{
-          width: "100%",
-          height: "100%",
           borderRight: "1px solid",
           borderColor: "divider",
-          "-webkit-scrollbar": { display: "none" },
         }}
       >
         <Grid container rowSpacing={3} columnSpacing={2}>
@@ -242,32 +240,39 @@ export default function Sidebar({ models, architectures, refreshModels }) {
           </Grid>
         </Grid>
       </Sheet>
-      <Box className="absolute bottom-0" sx={{ width: "100%" }} p={2}>
-        {progress && progress.progress < 1 && (
-          <FormControl className="mb-2">
-            <LinearProgress
-              value={progress.progress * 100}
-              determinate={true}
-            />
-            <FormHelperText>{progress.message}</FormHelperText>
-          </FormControl>
-        )}
-        {errorMessage && (
-          <Box className="mb-2">
-            <Alert color="danger">{errorMessage}</Alert>
-          </Box>
-        )}
+      <Sheet
+        sx={{
+          borderRight: "1px solid",
+          borderColor: "divider",
+        }}
+      >
+        <Box className="sticky bottom-0" p={2}>
+          {progress && progress.progress < 1 && (
+            <FormControl className="mb-2">
+              <LinearProgress
+                value={progress.progress * 100}
+                determinate={true}
+              />
+              <FormHelperText>{progress.message}</FormHelperText>
+            </FormControl>
+          )}
+          {errorMessage && (
+            <Box className="mb-2">
+              <Alert color="danger">{errorMessage}</Alert>
+            </Box>
+          )}
 
-        <Button
-          loading={worldFreeze}
-          fullWidth={true}
-          variant="solid"
-          size="lg"
-          onClick={handleSubmit(handleStart, handleErrors)}
-        >
-          Start
-        </Button>
-      </Box>
-    </Box>
+          <Button
+            loading={worldFreeze}
+            fullWidth={true}
+            variant="solid"
+            size="lg"
+            onClick={handleSubmit(handleStart, handleErrors)}
+          >
+            Start
+          </Button>
+        </Box>
+      </Sheet>
+    </>
   );
 }