feat: prompt selector to side bar

Author: tfhuhtal

src/client/components/ChatV2/ChatV2.tsx

@@ -1,6 +1,7 @@
-import { ArrowDownward, ChevronLeft, MenuBookTwoTone, Tune } from '@mui/icons-material'
+import { ArrowDownward, ChevronLeft, MenuBookTwoTone, Tune, WidthFull } from '@mui/icons-material'
 import HelpIcon from '@mui/icons-material/Help'
 import RestartAltIcon from '@mui/icons-material/RestartAlt'
+
 import { Alert, Box, Drawer, Fab, FormControlLabel, Paper, Switch, Typography, useMediaQuery, useTheme } from '@mui/material'
 import type { TFunction } from 'i18next'
 import { enqueueSnackbar } from 'notistack'
@@ -32,9 +33,13 @@ import ToolResult from './ToolResult'
 import { OutlineButtonBlack } from './general/Buttons'
 import { ChatInfo } from './general/ChatInfo'
 import RagSelector from './RagSelector'
-import { SettingsModal } from './SettingsModal'
+import { SettingsModal, useUrlPromptId } from './SettingsModal'
 import { useChatStream } from './useChatStream'
 import { getCompletionStreamV3 } from './util'
+import PromptSelector from './PromptSelector'
+import { useQuery } from '@tanstack/react-query'
+import { useMutation } from '@tanstack/react-query'
+import apiClient from '../../util/apiClient'
 
 function useLocalStorageStateWithURLDefault(key: string, defaultValue: string, urlKey: string) {
   const [value, setValue] = useLocalStorageState(key, defaultValue)
@@ -384,6 +389,8 @@ export const ChatV2 = () => {
               setRagIndexId={setRagIndexId}
               ragIndices={ragIndices}
               messages={messages}
+              activePrompt={activePrompt}
+              setActivePrompt={setActivePrompt}
             />
           </Drawer>
         ) : (
@@ -403,6 +410,8 @@ export const ChatV2 = () => {
             setRagIndexId={setRagIndexId}
             ragIndices={ragIndices}
             messages={messages}
+            activePrompt={activePrompt}
+            setActivePrompt={setActivePrompt}
           />
         ))}
 
@@ -594,6 +603,8 @@ const LeftMenu = ({
   setRagIndexId,
   ragIndices,
   messages,
+  activePrompt,
+  setActivePrompt,
 }: {
   sx?: object
   course?: Course
@@ -607,7 +618,15 @@ const LeftMenu = ({
   setRagIndexId: React.Dispatch<React.SetStateAction<number | undefined>>
   ragIndices?: RagIndexAttributes[]
   messages: Message[]
+  activePrompt: Prompt | undefined
+  setActivePrompt: (prompt: Prompt | undefined) => void
 }) => {
+  const urlPromptId = useUrlPromptId()
+  const { data: myPrompts, refetch } = useQuery<Prompt[]>({
+    queryKey: ['/prompts/my-prompts'],
+    initialData: [],
+  })
+
   return (
     <Box
       sx={[
@@ -637,6 +656,15 @@ const LeftMenu = ({
           <OutlineButtonBlack startIcon={<HelpIcon />} onClick={() => setDisclaimerStatus(true)} data-testid="help-button">
             {t('info:title')}
           </OutlineButtonBlack>
+          <PromptSelector
+            sx={{ width: '100%' }}
+            coursePrompts={course?.prompts ?? []}
+            myPrompts={myPrompts}
+            activePrompt={activePrompt}
+            setActivePrompt={setActivePrompt}
+            mandatoryPrompt={course?.prompts.find((p) => p.mandatory)}
+            urlPrompt={course?.prompts.find((p) => p.id === urlPromptId)}
+          />
           {course && showRagSelector && (
             <>
               <Typography variant="h6" sx={{ mb: 1, display: 'flex', gap: 1, alignItems: 'center' }} fontWeight="bold">

src/client/components/ChatV2/PromptSelector.tsx

@@ -1,23 +1,25 @@
-import { DeleteOutline, KeyboardArrowDown, Lock } from '@mui/icons-material'
-import { Box, Button, Divider, IconButton, ListSubheader, Menu, MenuItem } from '@mui/material'
+import { DeleteOutline, KeyboardArrowDown, Lock, AutoAwesome } from '@mui/icons-material'
+import { Box, Divider, IconButton, ListSubheader, Menu, MenuItem } from '@mui/material'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Prompt } from '../../types'
 import { OutlineButtonBlack } from './general/Buttons'
 
 const PromptSelector = ({
+  sx = {},
   coursePrompts,
   myPrompts,
   activePrompt,
   setActivePrompt,
   handleDeletePrompt,
   mandatoryPrompt,
 }: {
+  sx?: object
   coursePrompts: Prompt[]
   myPrompts: Prompt[]
   activePrompt?: Prompt
   setActivePrompt: (prompt: Prompt | undefined) => void
-  handleDeletePrompt: (prompt: Prompt) => void
+  handleDeletePrompt?: ((prompt: Prompt) => void)
   mandatoryPrompt?: Prompt
   urlPrompt?: Prompt
 }) => {
@@ -32,12 +34,15 @@ const PromptSelector = ({
 
   const handleDelete = (event: React.MouseEvent<HTMLButtonElement>, prompt: Prompt) => {
     event.stopPropagation()
-    if (confirm(t('settings:confirmDeletePrompt', { name: prompt.name }))) handleDeletePrompt(prompt)
+    if (handleDeletePrompt)
+      if (confirm(t('settings:confirmDeletePrompt', { name: prompt.name }))) handleDeletePrompt(prompt)
   }
 
   return (
-    <Box mb={'0.5rem'}>
+    <Box sx={{ marginBottom: '0.5rem' }}>
       <OutlineButtonBlack
+        sx={sx}
+        startIcon={<AutoAwesome />}
         data-testid="prompt-selector-button"
         disabled={!!mandatoryPrompt}
         onClick={(event) => {
@@ -48,8 +53,17 @@ const PromptSelector = ({
         {activePrompt?.name ?? t('settings:choosePrompt')}
         {!!mandatoryPrompt && ` - ${t('settings:promptLocked')}`}
       </OutlineButtonBlack>
-
-      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+        slotProps={{
+          paper: {
+            style: {
+              minWidth: anchorEl?.offsetWidth || 200,
+            },
+          },
+        }}>
         <MenuItem onClick={() => handleSelect(undefined)}>{t('settings:default')}</MenuItem>
         {coursePrompts.length > 0 && (
           <>
@@ -70,9 +84,11 @@ const PromptSelector = ({
               <MenuItem key={prompt.id} selected={prompt.id === activePrompt?.id} onClick={() => handleSelect(prompt)}>
                 <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
                   {prompt.name}
-                  <IconButton onClick={(event) => handleDelete(event, prompt)} size="small" sx={{ ml: 'auto' }}>
-                    <DeleteOutline fontSize="small" />
-                  </IconButton>
+                  {handleDeletePrompt &&
+                    <IconButton onClick={(event) => handleDelete(event, prompt)} size="small" sx={{ ml: 'auto' }}>
+                      <DeleteOutline fontSize="small" />
+                    </IconButton>
+                  }
                 </Box>
               </MenuItem>
             ))}

src/client/components/ChatV2/SettingsModal.tsx

@@ -1,6 +1,6 @@
-import { Add, Close, Settings } from '@mui/icons-material'
+import { Add, Close } from '@mui/icons-material'
 import { Box, IconButton, Modal, Slider, Typography } from '@mui/material'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DEFAULT_ASSISTANT_INSTRUCTIONS, DEFAULT_MODEL_TEMPERATURE } from '../../../config'
 import type { Course, Prompt } from '../../types'
@@ -12,11 +12,10 @@ import apiClient from '../../util/apiClient'
 import { useSearchParams } from 'react-router-dom'
 import { BlueButton, OutlineButtonBlack } from './general/Buttons'
 import { useAnalyticsDispatch } from '../../stores/analytics'
-import useLocalStorageState from '../../hooks/useLocalStorageState'
 import { isAxiosError } from 'axios'
 import { SendPreferenceConfiguratorButton } from './SendPreferenceConfigurator'
 
-const useUrlPromptId = () => {
+export const useUrlPromptId = () => {
   const [searchParams] = useSearchParams()
   const promptId = searchParams.get('promptId')
   return promptId