From 1d1e1f90b60f0116c0219923e0c1dcbea7f4f86d Mon Sep 17 00:00:00 2001
From: Jaswanth Karani <karani.jaswanth@gmail.com>
Date: Fri, 6 Sep 2024 11:07:45 +0530
Subject: [PATCH] Add Settings and Update system Prompt option (#746)

* Added settings and system prompt option

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>
---
 .../components/Conversation/Conversation.tsx  | 89 +++++++++++++------
 .../Conversation/ConversationSideBar.tsx      | 12 +--
 .../Conversation/conversation.module.scss     | 17 ++--
 .../src/components/Conversation/settings.tsx  | 48 ++++++++++
 .../src/redux/Conversation/Conversation.ts    | 10 +++
 .../redux/Conversation/ConversationSlice.ts   | 33 ++++++-
 .../src/styles/components/context.module.scss | 30 +++++--
 7 files changed, 190 insertions(+), 49 deletions(-)
 create mode 100644 ProductivitySuite/docker/ui/react/src/components/Conversation/settings.tsx

diff --git a/ProductivitySuite/docker/ui/react/src/components/Conversation/Conversation.tsx b/ProductivitySuite/docker/ui/react/src/components/Conversation/Conversation.tsx
index d4a65bbfd..e772248f3 100644
--- a/ProductivitySuite/docker/ui/react/src/components/Conversation/Conversation.tsx
+++ b/ProductivitySuite/docker/ui/react/src/components/Conversation/Conversation.tsx
@@ -3,14 +3,13 @@
 
 import { KeyboardEventHandler, SyntheticEvent, useEffect, useRef, useState } from 'react'
 import styleClasses from "./conversation.module.scss"
-import { ActionIcon, Group, Textarea, Title, rem } from '@mantine/core'
-import { IconArrowRight, IconMessagePlus } from '@tabler/icons-react'
-import { conversationSelector, doConversation, getAllConversations, newConversation } from '../../redux/Conversation/ConversationSlice'
+import { ActionIcon, Group, Textarea, Title, Tooltip, rem } from '@mantine/core'
+import { IconArrowDown, IconArrowRight, IconArrowUp, IconMessagePlus } from '@tabler/icons-react'
+import { conversationSelector, doConversation, getAllConversations, newConversation, setSystemPrompt } from '../../redux/Conversation/ConversationSlice'
 import { ConversationMessage } from '../Message/conversationMessage'
 import { useAppDispatch, useAppSelector } from '../../redux/store'
 import { Message, MessageRole } from '../../redux/Conversation/Conversation'
 import { getCurrentTimeStamp } from '../../common/util'
-
 import { ConversationSideBar } from './ConversationSideBar'
 import { getPrompts } from '../../redux/Prompt/PromptSlice'
 import { userSelector } from '../../redux/User/userSlice'
@@ -22,11 +21,12 @@ type ConversationProps = {
 
 const Conversation = ({ title }: ConversationProps) => {
   const [prompt, setPrompt] = useState<string>("")
+  const [updateSystemPrompt, setUpdateSystemPrompt] = useState(false)
 
   const dispatch = useAppDispatch();
   const promptInputRef = useRef<HTMLTextAreaElement>(null)
 
-  const { conversations, onGoingResult, selectedConversationId,selectedConversationHistory } = useAppSelector(conversationSelector)
+  const { conversations, onGoingResult, selectedConversationId, selectedConversationHistory, temperature, token, model, systemPrompt } = useAppSelector(conversationSelector)
   const { name } = useAppSelector(userSelector)
   const selectedConversation = conversations.find(x => x.id === selectedConversationId)
 
@@ -34,9 +34,9 @@ const Conversation = ({ title }: ConversationProps) => {
 
   const toSend = "Enter"
 
-  const systemPrompt: Message = {
+  const systemPromptObject: Message = {
     role: MessageRole.System,
-    content: "You are helpful assistant",
+    content: systemPrompt,
   };
 
 
@@ -54,13 +54,15 @@ const Conversation = ({ title }: ConversationProps) => {
     //   })
     // }
 
-    messages = [systemPrompt, ...(selectedConversationHistory) ]
+    messages = [systemPromptObject, ...(selectedConversationHistory)]
 
     doConversation({
       conversationId: selectedConversationId,
       userPrompt,
       messages,
-      model: "Intel/neural-chat-7b-v3-3",
+      model,
+      temperature,
+      token
     })
     setPrompt("")
   }
@@ -70,7 +72,7 @@ const Conversation = ({ title }: ConversationProps) => {
   }
 
   useEffect(() => {
-    if(name && name!=""){
+    if (name && name != "") {
       dispatch(getPrompts({ promptText: "" }))
       dispatch(getAllConversations({ user: name }))
     }
@@ -81,6 +83,7 @@ const Conversation = ({ title }: ConversationProps) => {
   }, [onGoingResult, selectedConversationHistory])
 
   const handleKeyDown: KeyboardEventHandler = (event) => {
+    setUpdateSystemPrompt(false)
     if (!event.shiftKey && event.key === toSend) {
       handleSubmit()
       setTimeout(() => {
@@ -99,18 +102,23 @@ const Conversation = ({ title }: ConversationProps) => {
     event.preventDefault()
     setPrompt((event.target as HTMLTextAreaElement).value)
   }
+
+  const handleSystemPromptChange = (event: SyntheticEvent) => {
+    event.preventDefault()
+    dispatch(setSystemPrompt((event.target as HTMLTextAreaElement).value))
+  }
   return (
     <div className={styleClasses.conversationWrapper}>
       <ConversationSideBar title={title} />
       <div className={styleClasses.conversationContent}>
-        <div className={styleClasses.conversationContentMessages}>
+        <div className={styleClasses.conversationContentMessages} style={updateSystemPrompt ? { gridTemplateRows: `60px 1fr 160px` } : {} }>
           <div className={styleClasses.conversationTitle}>
-            <Title order={3}>{selectedConversation?.first_query || ""} </Title>
+            <Title order={3} className={styleClasses.title}>{selectedConversation?.first_query || ""} </Title>
             <span className={styleClasses.spacer}></span>
             <Group>
               {(selectedConversation || selectedConversationHistory.length > 0) && (
                 <ActionIcon onClick={handleNewConversation} disabled={onGoingResult != ""} size={32} variant="default">
-                  <IconMessagePlus  />
+                  <IconMessagePlus />
                 </ActionIcon>
               )}
               
@@ -123,15 +131,16 @@ const Conversation = ({ title }: ConversationProps) => {
               <div className={styleClasses.newConversation}>
                 <div className={styleClasses.infoMessages}>
                   <div className="infoMessage">Start by asking a question</div>
-                  <div className="infoMessage">You can also upload your Document by clicking on Document icon on top right corner</div>
+                  <div className="infoMessage">You can update the system prompt by clicking on up arrow beside prompt field</div>
+                  <div className="infoMessage">You can also upload your Documents in the Data Management Tab</div>
                 </div>
                 <PromptTemplate setPrompt={setPrompt} />
 
               </div>
             )}
 
-            {selectedConversationHistory.map((message,index) => {
-              return (message.role!== MessageRole.System && (<ConversationMessage key={`${index}_ai`} date={message.time ? +message.time * 1000 : getCurrentTimeStamp()} human={message.role == MessageRole.User} message={message.content} />))
+            {selectedConversationHistory.map((message, index) => {
+              return (message.role !== MessageRole.System && (<ConversationMessage key={`${index}_ai`} date={message.time ? +message.time * 1000 : getCurrentTimeStamp()} human={message.role == MessageRole.User} message={message.content} />))
             })
             }
 
@@ -142,21 +151,43 @@ const Conversation = ({ title }: ConversationProps) => {
 
           <div className={styleClasses.conversationActions}>
             <Textarea
-              radius="xl"
+              style={{
+                display: updateSystemPrompt ? 'block' : 'none',
+                marginBottom: '10px',
+                marginLeft:'35px'
+              }}
+              radius="lg"
               size="md"
-              placeholder="Ask a question"
-              ref={promptInputRef}
-              onKeyDown={handleKeyDown}
-              onChange={handleChange}
-              value={prompt}
-              rightSectionWidth={42}
-              rightSection={
-                <ActionIcon onClick={handleSubmit} size={32} radius="xl" variant="filled">
-                  <IconArrowRight style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
-                </ActionIcon>
-              }
-            // {...props}
+              placeholder="system prompt"
+              onChange={handleSystemPromptChange}
+              value={systemPrompt}
             />
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Tooltip label="update system prompt">
+                <ActionIcon onClick={() => setUpdateSystemPrompt((prev) => !prev)} size={32} radius="xl" variant="filled">
+                  {updateSystemPrompt ? (<IconArrowDown style={{ width: rem(18), height: rem(18) }} stroke={1.5} />) :
+                    (<IconArrowUp style={{ width: rem(18), height: rem(18) }} stroke={1.5} />)}
+                </ActionIcon>
+              </Tooltip>
+              
+              <Textarea
+                radius="lg"
+                size="md"
+                style={{ flex: 90, marginLeft: '3px' }}
+                placeholder="Ask a question"
+                ref={promptInputRef}
+                onKeyDown={handleKeyDown}
+                onChange={handleChange}
+                value={prompt}
+                rightSectionWidth={42}
+                rightSection={
+                  <ActionIcon onClick={handleSubmit} size={32} radius="xl" variant="filled">
+                    <IconArrowRight style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+                  </ActionIcon>
+                }
+              // {...props}
+              />
+            </div>
           </div>
         </div>
       </div>
diff --git a/ProductivitySuite/docker/ui/react/src/components/Conversation/ConversationSideBar.tsx b/ProductivitySuite/docker/ui/react/src/components/Conversation/ConversationSideBar.tsx
index 2ab80d820..f495394c8 100644
--- a/ProductivitySuite/docker/ui/react/src/components/Conversation/ConversationSideBar.tsx
+++ b/ProductivitySuite/docker/ui/react/src/components/Conversation/ConversationSideBar.tsx
@@ -1,7 +1,7 @@
 // Copyright (C) 2024 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { ActionIcon, ScrollAreaAutosize, Title } from "@mantine/core"
+import { ActionIcon, Title } from "@mantine/core"
 
 import contextStyles from "../../styles/components/context.module.scss"
 import { useAppDispatch, useAppSelector } from "../../redux/store"
@@ -9,6 +9,7 @@ import { conversationSelector, deleteConversation, getConversationHistory, setSe
 import { useEffect } from "react"
 import { userSelector } from "../../redux/User/userSlice"
 import { IconTrash } from "@tabler/icons-react"
+import Settings from "./settings"
 // import { userSelector } from "../../redux/User/userSlice"
 
 export interface ConversationContextProps {
@@ -27,7 +28,7 @@ export function ConversationSideBar({ title }: ConversationContextProps) {
         }
     }, [selectedConversationId])
 
-    const handleDeleteConversation = (id : string) => {
+    const handleDeleteConversation = (id: string) => {
         dispatch(deleteConversation({ user: name, conversationId: id }))
     }
 
@@ -56,9 +57,10 @@ export function ConversationSideBar({ title }: ConversationContextProps) {
             <Title order={3} className={contextStyles.contextTitle}>
                 {title}
             </Title>
-            <ScrollAreaAutosize type="hover" scrollHideDelay={0}>
-                <div className={contextStyles.contextList}>{conversationList}</div>
-            </ScrollAreaAutosize>
+            <div className={contextStyles.contextList}>{conversationList}</div>
+            <div className={contextStyles.settings}>
+                <Settings />
+            </div>
         </div>
     )
 }
diff --git a/ProductivitySuite/docker/ui/react/src/components/Conversation/conversation.module.scss b/ProductivitySuite/docker/ui/react/src/components/Conversation/conversation.module.scss
index 802eee2ec..e38290d10 100644
--- a/ProductivitySuite/docker/ui/react/src/components/Conversation/conversation.module.scss
+++ b/ProductivitySuite/docker/ui/react/src/components/Conversation/conversation.module.scss
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @import "../../styles/styles";
+@import "../../styles/components/content.scss";
 
 .spacer {
   flex: 1 1 auto;
@@ -19,35 +20,39 @@
     position: relative;
     .conversationContentMessages {
       @include absolutes;
-      // @include flex(column, nowrap, flex-start, flex-start);
 
       display: grid;
+      height: 100vh;
       grid-template-areas:
         "header"
         "messages"
         "inputs";
 
       grid-template-columns: auto;
-      grid-template-rows: 60px 655px 100px;
+      grid-template-rows: 60px 1fr 80px;
 
       .conversationTitle {
         grid-area: header;
+        width: 100%;
+        flex: 1;
         @include flex(row, nowrap, center, flex-start);
         height: 60px;
         padding: 8px 24px;
         border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+        .title {
+          @include textWrapEllipsis;
+          width: 70vw;
+        }
       }
 
       .historyContainer {
         grid-area: messages;
         overflow: auto;
         width: 100%;
-        // padding: 16px 32px;
         .newConversation {
           @include flex(row, nowrap, flex-start, flex-start);
           .infoMessages {
             padding: 16px 32px;
-
             flex: 80;
           }
         }
@@ -57,9 +62,9 @@
       }
 
       .conversationActions {
-        // padding: --var()
         grid-area: inputs;
-        padding: 18px;
+        width: 100%;
+        padding: 10px;
         border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
       }
     }
diff --git a/ProductivitySuite/docker/ui/react/src/components/Conversation/settings.tsx b/ProductivitySuite/docker/ui/react/src/components/Conversation/settings.tsx
new file mode 100644
index 000000000..61fd87e9b
--- /dev/null
+++ b/ProductivitySuite/docker/ui/react/src/components/Conversation/settings.tsx
@@ -0,0 +1,48 @@
+import { NumberInput, Slider, Text, Title } from "@mantine/core"
+import { useAppDispatch, useAppSelector } from "../../redux/store"
+import { conversationSelector, setTemperature, setToken } from "../../redux/Conversation/ConversationSlice"
+
+
+
+function Settings() {
+    const { token,maxTemperature, minTemperature, maxToken, minToken, temperature} = useAppSelector(conversationSelector)
+    const dispatch = useAppDispatch();
+    
+    const onTemperatureChange = (value: number) => {
+        dispatch(setTemperature(value))
+    }
+    const onTokenChange = (value: number | string) => {
+        dispatch(setToken(Number(value)))
+    }
+
+    return (
+        <>
+            <div>
+                <Title order={4}>Settings</Title>
+            </div>
+            <div>
+                <Text>Temperature</Text>
+                <Slider
+                    value={temperature}
+                    min={minTemperature}
+                    max={maxTemperature}
+                    step={0.1}
+                    onChange={onTemperatureChange}
+                />
+            </div>
+            <div>
+                <Text>Token ({`${minToken} - ${maxToken}`})</Text>
+                <NumberInput
+                    value={token}
+                    min={minToken}
+                    max={maxToken}
+                    step={100}
+                    onChange={onTokenChange}
+                />
+            </div>
+        </>
+
+    )
+}
+
+export default Settings
\ No newline at end of file
diff --git a/ProductivitySuite/docker/ui/react/src/redux/Conversation/Conversation.ts b/ProductivitySuite/docker/ui/react/src/redux/Conversation/Conversation.ts
index ce311cbc1..57ebb5ece 100644
--- a/ProductivitySuite/docker/ui/react/src/redux/Conversation/Conversation.ts
+++ b/ProductivitySuite/docker/ui/react/src/redux/Conversation/Conversation.ts
@@ -6,6 +6,8 @@ export type ConversationRequest = {
   userPrompt: Message;
   messages: Message[];
   model: string;
+  temperature: number;
+  token: number;
 };
 export enum MessageRole {
   Assistant = "assistant",
@@ -34,4 +36,12 @@ export interface ConversationReducer {
   selectedConversationHistory: Message[];
   onGoingResult: string;
   filesInDataSource: file[];
+  systemPrompt: string;
+  model: string;
+  minToken: number;
+  maxToken: number;
+  token: number;
+  minTemperature: number;
+  maxTemperature: number;
+  temperature: number;
 }
diff --git a/ProductivitySuite/docker/ui/react/src/redux/Conversation/ConversationSlice.ts b/ProductivitySuite/docker/ui/react/src/redux/Conversation/ConversationSlice.ts
index 2076ad1d7..ea7617d82 100644
--- a/ProductivitySuite/docker/ui/react/src/redux/Conversation/ConversationSlice.ts
+++ b/ProductivitySuite/docker/ui/react/src/redux/Conversation/ConversationSlice.ts
@@ -25,6 +25,14 @@ const initialState: ConversationReducer = {
   selectedConversationHistory: [],
   onGoingResult: "",
   filesInDataSource: [],
+  model: "Intel/neural-chat-7b-v3-3",
+  systemPrompt: "You are helpful assistant",
+  minToken: 100,
+  maxToken: 1000,
+  token: 100,
+  minTemperature: 0,
+  maxTemperature: 1,
+  temperature: 0.4,
 };
 
 export const ConversationSlice = createSlice({
@@ -51,6 +59,15 @@ export const ConversationSlice = createSlice({
     setSelectedConversationId: (state, action: PayloadAction<string>) => {
       state.selectedConversationId = action.payload;
     },
+    setTemperature: (state, action: PayloadAction<number>) => {
+      state.temperature = action.payload;
+    },
+    setToken: (state, action: PayloadAction<number>) => {
+      state.token = action.payload;
+    },
+    setSystemPrompt: (state, action: PayloadAction<string>) => {
+      state.systemPrompt = action.payload;
+    },
   },
   extraReducers(builder) {
     builder.addCase(uploadFile.fulfilled, () => {
@@ -213,7 +230,7 @@ export const deleteConversation = createAsyncThunkWrapper(
 );
 
 export const doConversation = (conversationRequest: ConversationRequest) => {
-  const { conversationId, userPrompt, messages, model } = conversationRequest;
+  const { conversationId, userPrompt, messages, model, token, temperature } = conversationRequest;
   store.dispatch(addMessageToMessages(messages[0]));
   store.dispatch(addMessageToMessages(userPrompt));
   const userPromptWithoutTime = {
@@ -223,6 +240,8 @@ export const doConversation = (conversationRequest: ConversationRequest) => {
   const body = {
     messages: [...messages, userPromptWithoutTime],
     model,
+    max_new_tokens: token,
+    temperature: temperature,
   };
 
   //   let conversation: Conversation;
@@ -293,7 +312,15 @@ export const doConversation = (conversationRequest: ConversationRequest) => {
   }
 };
 
-export const { logout, setOnGoingResult, newConversation, addMessageToMessages, setSelectedConversationId } =
-  ConversationSlice.actions;
+export const {
+  logout,
+  setOnGoingResult,
+  newConversation,
+  addMessageToMessages,
+  setSelectedConversationId,
+  setTemperature,
+  setToken,
+  setSystemPrompt,
+} = ConversationSlice.actions;
 export const conversationSelector = (state: RootState) => state.conversationReducer;
 export default ConversationSlice.reducer;
diff --git a/ProductivitySuite/docker/ui/react/src/styles/components/context.module.scss b/ProductivitySuite/docker/ui/react/src/styles/components/context.module.scss
index 9577838ef..e2d3caafa 100644
--- a/ProductivitySuite/docker/ui/react/src/styles/components/context.module.scss
+++ b/ProductivitySuite/docker/ui/react/src/styles/components/context.module.scss
@@ -4,18 +4,26 @@
 .contextWrapper {
   background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
   border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  width: 180px;
+  width: 13vw;
   overflow-y: hidden;
   overflow-x: hidden;
-  // overflow-y: auto;
+  display: grid;
+  height: 100vh;
+  grid-template-areas:
+    "title"
+    "history"
+    "settings";
+
+  grid-template-columns: auto;
+  grid-template-rows: 70px 1fr 175px;
 
   .contextTitle {
-    position: sticky;
+    grid-area: title;
     top: 0;
     font-family:
       Greycliff CF,
       var(--mantine-font-family);
-    margin-bottom: var(--mantine-spacing-xl);
+    margin-bottom: var(--mantine-spacing-sm);
     background-color: var(--mantine-color-body);
     padding: var(--mantine-spacing-md);
     padding-top: 18px;
@@ -25,8 +33,9 @@
   }
 
   .contextList {
-    height: 90vh;
-    // display: flex();
+    grid-area: history;
+    // overflow-x: none;
+    // overflow-y: auto;
 
     .contextListItem {
       display: flex;
@@ -67,4 +76,13 @@
       }
     }
   }
+
+  .settings {
+    grid-area: settings;
+    border: black;
+    padding: var(--mantine-spacing-sm);
+    > * {
+      padding: 5px 0;
+    }
+  }
 }