Merge pull request JHM69#1 from fms-byte/master

ui updated
fms-byte · Jul 13, 2023 · 55c06cc · 55c06cc
2 parents e2239d5 + e5f7d2d
commit 55c06cc
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 17 deletions.
diff --git a/components/ApplicationBar.tsx b/components/ApplicationBar.tsx
@@ -166,7 +166,7 @@ export function ApplicationBar(props: {
       </Sheet>
 
       {/* Left menu */}
-      {<PagesMenu conversationId={props.conversationId} pagesMenuAnchor={pagesMenuAnchor} onClose={closePagesMenu} />}
+      {/* {<PagesMenu conversationId={props.conversationId} pagesMenuAnchor={pagesMenuAnchor} onClose={closePagesMenu} />} */}
 
       {/* Confirmations */}
       <ConfirmationModal

diff --git a/components/Chat.tsx b/components/Chat.tsx
@@ -74,15 +74,15 @@ const runAssistantUpdatingState = async (conversationId: string, history: DMessa
 
   // clear to send, again
   startTyping(conversationId, null);
- 
+
 };
 
 export function Chat(props: { onShowSettings: () => void; sx?: SxProps }) {
   // state
   const [publishConversationId, setPublishConversationId] = React.useState<string | null>(null);
   const [publishResponse, setPublishResponse] = React.useState<ApiPublishResponse | null>(null);
 
-  
+
 
   // external state
   const theme = useTheme();
@@ -141,6 +141,8 @@ export function Chat(props: { onShowSettings: () => void; sx?: SxProps }) {
           position: 'sticky',
           top: 0,
           zIndex: 20,
+          background: 'linear-gradient(to right, #fecd00, #ad1af1)',
+          color: '#333', // Example text color
           // ...(process.env.NODE_ENV === 'development' ? { background: theme.vars.palette.danger.solidBg } : {}),
         }}
       />
@@ -166,6 +168,7 @@ export function Chat(props: { onShowSettings: () => void; sx?: SxProps }) {
           bottom: 0,
           zIndex: 21,
           background: theme.vars.palette.background.surface,
+          backgroundColor: '#EFE1D1',
           borderTop: `1px solid ${theme.vars.palette.divider}`,
           p: { xs: 1, md: 2 },
         }}

diff --git a/components/Composer.tsx b/components/Composer.tsx
@@ -36,18 +36,18 @@ const hideOnDesktop = { display: { xs: 'flex', md: 'none' } };
 /// Text template helpers
 
 const PromptTemplates = {
-  Concatenate: '{{input}}\n\n{{text}}', 
-  PasteFile: '{{input}}\n\n```{{fileName}}\n{{fileText}}\n```\n',  
+  Concatenate: '{{input}}\n\n{{text}}',
+  PasteFile: '{{input}}\n\n```{{fileName}}\n{{fileText}}\n```\n',
   PasteMarkdown: '{{input}}\n\n```\n{{clipboard}}\n```\n',
 };
 
 const expandPromptTemplate =
   (template: string, dict: object) =>
-  (inputValue: string): string => {
-    let expanded = template.replaceAll('{{input}}', (inputValue || '').trim()).trim();
-    for (const [key, value] of Object.entries(dict)) expanded = expanded.replaceAll(`{{${key}}}`, value.trim());
-    return expanded;
-  };
+    (inputValue: string): string => {
+      let expanded = template.replaceAll('{{input}}', (inputValue || '').trim()).trim();
+      for (const [key, value] of Object.entries(dict)) expanded = expanded.replaceAll(`{{${key}}}`, value.trim());
+      return expanded;
+    };
 
 vision.init({ auth: process.env.VISION_API_KEY });
 
@@ -212,14 +212,14 @@ export function Composer(props: {
 
           const { data: getData } = await axios.get('https://hook.eu1.make.com/36n1b3tlrfzbiicubweup3rkfjtdq8n7?img=' + data.data.url);
 
-          newText = `A image containing information of: \n`+getData`\n <img src="`+  data.data.url + `"/>`
+          newText = `A image containing information of: \n` + getData`\n <img src="` + data.data.url + `"/>`
         } else if (file.type === 'application/pdf') fileText = await extractPdfText(file);
         else fileText = await file.text();
-        if(fileText) newText = expandPromptTemplate(PromptTemplates.PasteFile, { fileName: "", fileText })(newText);
+        if (fileText) newText = expandPromptTemplate(PromptTemplates.PasteFile, { fileName: "", fileText })(newText);
       } catch (error) {
         // show errors in the prompt box itself - FUTURE: show in a toast
         console.error(error);
-       
+
       }
     }
 
@@ -345,8 +345,12 @@ export function Composer(props: {
   const textPlaceholder: string = `Type ${props.isDeveloperMode ? 'your message and drop source files' : 'a message, or drop text files'}...`;
 
   return (
-    <Box sx={props.sx}>
-      <Grid container spacing={{ xs: 1, md: 2 }}>
+    <Box sx={props.sx}
+    >
+      <Grid container
+        spacing=
+        {{ xs: 1, md: 2 }}>
+
         {/* Left pane (buttons and Textarea) */}
         <Grid xs={12} md={9}>
           <Stack direction="row" spacing={{ xs: 1, md: 2 }}>
@@ -464,7 +468,7 @@ export function Composer(props: {
         {/* Send pane */}
         <Grid xs={12} md={3}>
           <Stack spacing={2}>
-            <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+            <Box sx={{ display: 'flex', justifyContent: 'center', flexDirection: 'row' }}>
               {/* [mobile-only] Sent messages arrow */}
               {sentMessages.length > 0 && (
                 <IconButton variant="plain" color="neutral" onClick={showSentMessages} sx={{ ...hideOnDesktop, mr: { xs: 1, md: 2 } }}>
@@ -485,7 +489,25 @@ export function Composer(props: {
                   Stop
                 </Button>
               ) : (
-                <Button fullWidth variant="solid" color="primary" disabled={!props.conversationId} onClick={handleSendClicked} endDecorator={<TelegramIcon />}>
+                <Button
+                  fullWidth
+                  variant="outlined"
+                  sx={{
+                    backgroundColor: "#4E4FEB",
+                    color: "#000",
+                    marginTop: "15px",
+                    padding: "10px 20px",
+                    border: "2px solid #4E4FEB",
+                    fontWeight: "semibold",
+                    display: "flex",
+                    alignItems: "center",
+                    width: "100px",
+                    justifyContent: "center",
+                  }}
+                  disabled={!props.conversationId}
+                  onClick={handleSendClicked}
+                  endDecorator={<TelegramIcon />}
+                >
                   Send
                 </Button>
               )}