settings, prompts options exposed

gurveervirk · Aug 27, 2024 · 8c6d39e · 8c6d39e
1 parent 0b6864f
commit 8c6d39e
Show file tree

Hide file tree

Showing 9 changed files with 962 additions and 129 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,4 +9,7 @@ sub_optimal.txt
 /tok/venv
 /tok/web/build
 /tok/build
-/tok/prev_msgs
+/tok/prev_msgs
+/tok/prompts.json
+/tok/tiktoken_cache
+/other_prev_msgs
diff --git a/app/src/components/ChatArea.js b/app/src/components/ChatArea.js
@@ -3,50 +3,11 @@ import { Tooltip } from 'bootstrap';
 import Markdown from 'markdown-to-jsx';
 import Code from './Code';
 import UploadModal from './UploadModal';
+import SettingsModal from './SettingsModal';
 import { components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
-import CustomOption from './CustomOption';
-
-const customStyles = {
-  control: (provided) => ({
-    ...provided,
-    borderColor: '#ccc',
-    boxShadow: 'none',
-    '&:hover': {
-      borderColor: '#888',
-    },
-  }),
-  menu: (provided) => ({
-    ...provided,
-    backgroundColor: '#fff',
-    border: '1px solid #ccc',
-    marginTop: 0,
-  }),
-  menuList: (provided) => ({
-    ...provided,
-    padding: 0,
-  }),
-  option: (provided, state) => ({
-    ...provided,
-    backgroundColor: state.isSelected ? '#ddd' : '#fff',
-    color: state.isSelected ? '#000' : '#333',
-    '&:hover': {
-      backgroundColor: '#eee',
-    },
-  }),
-  singleValue: (provided) => ({
-    ...provided,
-    color: '#333',
-  }),
-  placeholder: (provided) => ({
-    ...provided,
-    color: '#aaa',
-  }),
-  input: (provided) => ({
-    ...provided,
-    color: '#333',
-  }),
-};
+import CustomOption from './CustomOptionForModel';
+import customStyles from './customStyles';
 
 function ChatArea({ messages, setMessages }) {
   const [greeting, setGreeting] = useState('');
@@ -269,14 +230,24 @@ function ChatArea({ messages, setMessages }) {
               data-bs-toggle="modal"
               data-bs-target="#uploadModal"
               title="Upload documents"
+              disabled={isUploading}
             >
               {isUploading ? <i className="bi bi-pause-fill"></i> : <i className="bi bi-upload"></i>}
             </button>
+            <button
+              className="btn btn-outline-dark ms-2"
+              data-bs-toggle="modal"
+              data-bs-target="#settingsModal"
+              title="Settings"
+            >
+              <i className="bi bi-gear"></i>
+            </button>
           </div>
         </div>
       </nav>
 
       <UploadModal handleSave={handleUpload} />
+      <SettingsModal />
 
       <div className='d-flex flex-column justify-content-center mx-auto' style={{ width: '50rem', height: '90%' }}>
         <div className="flex-grow-1 overflow-auto d-flex flex-column justify-content-center align-items-center px-4 mx-auto">

diff --git a/app/src/components/CustomOption.js → app/src/components/CustomOptionForModel.js b/app/src/components/CustomOption.js → app/src/components/CustomOptionForModel.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { components } from 'react-select';
 
-const CustomOption = (props) => {
+const CustomOptionForModel = (props) => {
   const { innerRef, innerProps, data } = props;
 
   const handleDelete = async () => {
@@ -47,4 +47,4 @@ const CustomOption = (props) => {
   );
 };
 
-export default CustomOption;
+export default CustomOptionForModel;
diff --git a/app/src/components/CustomOptionForPrompts.js b/app/src/components/CustomOptionForPrompts.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { components } from 'react-select';
+
+const CustomOptionForPrompts = (props) => {
+  const { innerRef, innerProps, data, handleDelete, handleTemplateSelect, isDefault, isSelected } = props;
+
+  return (
+    <components.Option {...props} innerRef={innerRef} innerProps={innerProps}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        {props.children} 
+        {isDefault && <span
+          style={{
+            cursor: 'pointer',
+            marginLeft: 'auto',
+            color: 'black',
+            fontSize: '12px',
+            lineHeight: '1'
+          }}
+          title="Default"
+        >&#9733;
+        </span>} 
+        {isSelected && <span
+          style={{
+            cursor: 'pointer',
+            marginLeft: !isDefault ? 'auto' : '1em',
+            color: 'black',
+            fontSize: '12px',
+            lineHeight: '1'
+          }}
+          title="Selected"
+        >&#128280;
+        </span>}
+        <span
+          onClick={() => handleTemplateSelect(data)}
+          style={{
+            cursor: 'pointer',
+            marginLeft: !isDefault && !isSelected ? 'auto' : '1em',
+            color: 'black',
+            fontSize: '12px',
+            lineHeight: '1'
+          }}
+          title="Select as Template or Update"
+        >
+          &#128393;
+        </span>
+        {!isDefault && !isSelected && <span
+          onClick={() => handleDelete(data)}
+          style={{
+            cursor: 'pointer',
+            marginLeft: '1em', // Push the cross to the right end
+            color: 'black',
+            fontSize: '12px',
+            lineHeight: '1'
+          }}
+          title="Delete"
+        >
+          &#10005;
+        </span>}
+      </div>
+    </components.Option>
+  );
+};
+
+export default CustomOptionForPrompts;
diff --git a/app/src/components/LeftPanel.js b/app/src/components/LeftPanel.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import UseWindowDimensions from './UseWindowDimensions';
 import { Tooltip } from 'bootstrap';
 
-function LeftPanel({isSidebarCollapsed, setMessages}) {
+function LeftPanel({ isSidebarCollapsed, setMessages }) {
   const [sessionTitles, setSessionTitles] = useState([]);
   const [selectedSession, setSelectedSession] = useState('');
   const isSmall = UseWindowDimensions();
@@ -39,19 +39,19 @@ function LeftPanel({isSidebarCollapsed, setMessages}) {
         }
         return response.json();
       })
-      .then(data => {
-        setMessages(() => {
-          let nextId = 1; // Start id from 1
-          const newMessages = [];
-          for (let i = 1; i < data.length; i++) {
-            newMessages.push(
-              { id: nextId++, sender: 'user', text: data[i].query },
-              { id: nextId++, sender: 'bot', text: data[i].response }
-            );
-          }
-          return newMessages;
+        .then(data => {
+          setMessages(() => {
+            let nextId = 1; // Start id from 1
+            const newMessages = [];
+            for (let i = 1; i < data.length; i++) {
+              newMessages.push(
+                { id: nextId++, sender: 'user', text: data[i].query },
+                { id: nextId++, sender: 'bot', text: data[i].response }
+              );
+            }
+            return newMessages;
+          });
         });
-      });
     }
   }, []);
 
@@ -89,14 +89,19 @@ function LeftPanel({isSidebarCollapsed, setMessages}) {
       });
   };
 
-
+  // Divide sessionTitles into different categories
+  const todayTitles = sessionTitles['Today'] || [];
+  const lastWeekTitles = sessionTitles['Last Week'] || [];
+  const lastMonthTitles = sessionTitles['Last Month'] || [];
+  const olderTitles = sessionTitles['Older'] || [];
+
   return (
     <div id='sidebar' className={`${isSmall ? 'offcanvas offcanvas-start' : 'collapse collapse-horizontal'} ${isSidebarCollapsed ? (isSmall ? 'show' : 'hide') : (isSmall ? 'hide' : 'show')} h-100`} tabIndex={isSmall ? '-1' : ''} style={isSmall ? {} : { width: '15rem' }} data-bs-backdrop="false">
       <div className="d-flex flex-column h-100">
-        {isSmall ? 
-        <div className="offcanvas-header">
-          <button type="button" className="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-        </div> : ''}
+        {isSmall ?
+          <div className="offcanvas-header">
+            <button type="button" className="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          </div> : ''}
         <div className="py-3 d-flex justify-content-center align-items-center">
           <button
             className={`btn btn-secondary d-block ${isSmall ? 'w-75' : 'w-100'}`}
@@ -106,34 +111,95 @@ function LeftPanel({isSidebarCollapsed, setMessages}) {
               sessionStorage.removeItem('selectedSession');
               fetch('http://localhost:5000/api/new_chat')
                 .then(response => { console.log('New chat started:', response); })
-              
+
               fetch('http://127.0.0.1:5000/api/history')
-              .then(response => response.json())
-              .then(data => setSessionTitles(data))
-              .catch(error => console.error('Error fetching session titles:', error));
+                .then(response => response.json())
+                .then(data => setSessionTitles(data))
+                .catch(error => console.error('Error fetching session titles:', error));
             }}
           >
             <i className="bi bi-chat-text"></i> New Chat
           </button>
         </div>
         <div className="py-3 flex-grow-1 d-flex flex-column justify-content-center align-items-center">
-            {sessionTitles.length > 0 ? (
-              sessionTitles.map((mapping, index) => (
-                <div className="w-100">
-                  <button
-                    key={index}
-                    className={`btn btn-outline-dark d-block ${selectedSession && selectedSession === mapping[1] ? 'active' : ''} mb-1`}
-                    onClick={() => handleSessionSelect(mapping[1])}
-                    style={{ overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', whiteSpace: 'nowrap'}}
-                    data-bs-toggle="tooltip" title={mapping[0]}
-                  >
-                    {mapping[0]}
-                  </button>
-                </div>
-              ))
-            ) : (
-              "No previous sessions found"
-            )}
+          {todayTitles.length > 0 || lastWeekTitles.length > 0 || lastMonthTitles.length > 0 || olderTitles.length > 0 ? (
+            <>
+              {todayTitles.length > 0 && (
+                <>
+                  <h5>Today</h5>
+                  {todayTitles.map((mapping, index) => (
+                    <div className="w-100">
+                      <button
+                        key={index}
+                        className={`btn btn-outline-dark d-block ${selectedSession && selectedSession === mapping ? 'active' : ''} mb-1`}
+                        onClick={() => handleSessionSelect(mapping)}
+                        style={{ overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', whiteSpace: 'nowrap' }}
+                        data-bs-toggle="tooltip" title={mapping}
+                      >
+                        {mapping}
+                      </button>
+                    </div>
+                  ))}
+                </>
+              )}
+              {lastWeekTitles.length > 0 && (
+                <>
+                  <h5>Last Week</h5>
+                  {lastWeekTitles.map((mapping, index) => (
+                    <div className="w-100">
+                      <button
+                        key={index}
+                        className={`btn btn-outline-dark d-block ${selectedSession && selectedSession === mapping ? 'active' : ''} mb-1`}
+                        onClick={() => handleSessionSelect(mapping)}
+                        style={{ overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', whiteSpace: 'nowrap' }}
+                        data-bs-toggle="tooltip" title={mapping}
+                      >
+                        {mapping}
+                      </button>
+                    </div>
+                  ))}
+                </>
+              )}
+              {lastMonthTitles.length > 0 && (
+                <>
+                  <h5>Last Month</h5>
+                  {lastMonthTitles.map((mapping, index) => (
+                    <div className="w-100">
+                      <button
+                        key={index}
+                        className={`btn btn-outline-dark d-block ${selectedSession && selectedSession === mapping ? 'active' : ''} mb-1`}
+                        onClick={() => handleSessionSelect(mapping)}
+                        style={{ overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', whiteSpace: 'nowrap' }}
+                        data-bs-toggle="tooltip" title={mapping}
+                      >
+                        {mapping}
+                      </button>
+                    </div>
+                  ))}
+                </>
+              )}
+              {olderTitles.length > 0 && (
+                <>
+                  <h5>Older</h5>
+                  {olderTitles.map((mapping, index) => (
+                    <div className="w-100">
+                      <button
+                        key={index}
+                        className={`btn btn-outline-dark d-block ${selectedSession && selectedSession === mapping ? 'active' : ''} mb-1`}
+                        onClick={() => handleSessionSelect(mapping)}
+                        style={{ overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', whiteSpace: 'nowrap' }}
+                        data-bs-toggle="tooltip" title={mapping}
+                      >
+                        {mapping}
+                      </button>
+                    </div>
+                  ))}
+                </>
+              )}
+            </>
+          ) : (
+            "No previous sessions found"
+          )}
         </div>
       </div>
     </div>