Add Settings and Update system Prompt option (#746)

* Added settings and system prompt option

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

Author: jaswanth8888

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,21 +21,22 @@ 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)
 
   const scrollViewport = useRef<HTMLDivElement>(null)
 
   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>

ProductivitySuite/docker/ui/react/src/components/Conversation/ConversationSideBar.tsx

@@ -1,14 +1,15 @@
 // 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"
 import { conversationSelector, deleteConversation, getConversationHistory, setSelectedConversationId } from "../../redux/Conversation/ConversationSlice"
 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>
     )
 }

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));
       }
     }

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

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;
 }