Improve Citations via System prompt, add new /prompt settings page (#103

) * 1. Separated the creation of system prompt and stuffed prompt for role: system and role:user respectively 2. Remove contexts from assistant messages to avoid local storage issues 3. Added the index back to final list of sources that was incorrectly removed 4. Removed system prompt and accordion component from /chat, moving account usage link to the bottom 5. Changed the default temperature to 0.1 * add settings page and verfiy useremail for rendering magibell * add system prompt in the getSystemPrompt and add styling on settings page * add system prompt * add styling on settings page * Fix default state of system prompt (pull from DB) * Rename to 'Prompting', add full Navbar support * Add reset button to prompt, add link to OpenAI docs, fix navbar to say Prompting * Fix typo in title * Fix build error in title change * Fix ANOTHER typo in the title * Enhance description of system prompt * Further fix the responsive layout of the text boxes * increase max rows of text input * Modify default promt --------- Co-authored-by: hanlily666 <[email protected]> Co-authored-by: Kastan Day <[email protected]>
KastanDay · Jan 31, 2024 · 23fba6a · 23fba6a
1 parent 9f9df9b
commit 23fba6a
Show file tree

Hide file tree

Showing 16 changed files with 458 additions and 411 deletions.
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -57,7 +57,6 @@ import { MemoizedChatMessage } from './MemoizedChatMessage'
 import { fetchPresignedUrl } from '~/utils/apiUtils'
 
 import { type CourseMetadata } from '~/types/courseMetadata'
-import { replaceCitationLinks } from '~/utils/citations'
 
 interface Props {
   stopConversationRef: MutableRefObject<boolean>
@@ -278,7 +277,9 @@ export const Chat = memo(({ stopConversationRef, courseMetadata }: Props) => {
               courseMetadata?.openai_api_key != ''
               ? courseMetadata.openai_api_key
               : apiKey,
-          prompt: updatedConversation.prompt,
+          // prompt property is intentionally left undefined to avoid TypeScript errors
+          // and to meet the requirement of not passing any prompt.
+          prompt: '',
           temperature: updatedConversation.temperature,
           course_name: getCurrentPageName(),
           stream: true,
@@ -394,7 +395,6 @@ export const Chat = memo(({ stopConversationRef, courseMetadata }: Props) => {
                   {
                     role: 'assistant',
                     content: chunkValue,
-                    contexts: message.contexts,
                   },
                 ]
                 finalAssistantRespose += chunkValue
@@ -409,13 +409,15 @@ export const Chat = memo(({ stopConversationRef, courseMetadata }: Props) => {
               } else {
 
                 if (updatedConversation.messages.length > 0) {
-                  const lastMessageIndex = updatedConversation.messages.length - 1;
+
+                  const lastMessageIndex = updatedConversation.messages.length - 1; 
                   const lastMessage = updatedConversation.messages[lastMessageIndex];
+                  const lastUserMessage = updatedConversation.messages[lastMessageIndex - 1];
 
-                  if (lastMessage && lastMessage.contexts) {
+                  if (lastMessage && lastUserMessage && lastUserMessage.contexts) {
                     // Call the replaceCitationLinks method and await its result
                     // const updatedContent = await replaceCitationLinks(text, lastMessage, citationLinkCache);
-                    const updatedContent = await processChunkWithStateMachine(chunkValue, lastMessage, stateMachineContext, citationLinkCache);
+                    const updatedContent = await processChunkWithStateMachine(chunkValue, lastUserMessage, stateMachineContext, citationLinkCache);
 
                     finalAssistantRespose += updatedContent;
 

diff --git a/src/components/Chat/ModelParams.tsx b/src/components/Chat/ModelParams.tsx
@@ -1,11 +1,7 @@
 import { useState } from 'react'
 // import { ModelSelect } from './ModelSelect'
-import { SystemPrompt } from './SystemPrompt'
 import { TemperatureSlider } from './Temperature'
-import Link from 'next/link'
-import { IconExternalLink } from '@tabler/icons-react'
-import { Accordion, Input, Title, Text, createStyles } from '@mantine/core'
-import { montserrat_heading, montserrat_paragraph } from 'fonts'
+import { createStyles } from '@mantine/core'
 
 const useStyles = createStyles((theme) => ({
   // For Accordion
@@ -68,75 +64,19 @@ export const ModelParams = ({
 
   return (
     <div className="backdrop-filter-[blur(10px)] w-full rounded-lg ">
-      <Accordion
-        // pl={27}
-        // pr={10}
-        pt={10}
-        // pb={40}
-        // m={-40}
-        style={{ borderRadius: 'theme.radius.xl' }}
-        classNames={classes}
-        className={classes.root}
-      >
-        {/* ... Accordion items */}
-        <Accordion.Item value="openai-key-details">
-          <Accordion.Control>
-            <Text
-              className={`label ${montserrat_heading.variable} inline-block p-0 font-montserratHeading text-neutral-200`}
-              size={'md'}
-            >
-              Advanced
-            </Text>
-          </Accordion.Control>
+      <div className="flex h-full flex-col space-y-4 rounded-lg p-2">
+
 
-          {/* HIDDEN TEXT */}
-          <Accordion.Panel>
-            <div className="flex h-full flex-col space-y-4 rounded-lg p-2">
-              <div className="flex w-full items-center space-y-0 pt-0 text-left">
-                <Input.Description
-                  className={`text-left text-sm ${montserrat_paragraph.variable} font-montserratParagraph`}
-                >
-                  <Link
-                    href="https://platform.openai.com/account/usage"
-                    target="_blank"
-                    className="hover:underline"
-                  >
-                    View account usage on OpenAI{' '}
-                    <IconExternalLink
-                      size={15}
-                      style={{ position: 'relative', top: '2px' }}
-                      className={'mb-2 inline'}
-                    />
-                  </Link>
-                </Input.Description>
-              </div>
-
-              <div style={{ minHeight: '3em' }}>
-                <SystemPrompt
-                  conversation={selectedConversation}
-                  prompts={prompts}
-                  onChangePrompt={(prompt) =>
-                    handleUpdateConversation(selectedConversation, {
-                      key: 'prompt',
-                      value: prompt,
-                    })
-                  }
-                />
-              </div>
-
-              <TemperatureSlider
-                label={t('Temperature')}
-                onChangeTemperature={(temperature) =>
-                  handleUpdateConversation(selectedConversation, {
-                    key: 'temperature',
-                    value: temperature,
-                  })
-                }
-              />
-            </div>
-          </Accordion.Panel>
-        </Accordion.Item>
-      </Accordion>
+        <TemperatureSlider
+          label={t('Temperature')}
+          onChangeTemperature={(temperature) =>
+            handleUpdateConversation(selectedConversation, {
+              key: 'temperature',
+              value: temperature,
+            })
+          }
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/components/Chat/ModelSelect.tsx b/src/components/Chat/ModelSelect.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next'
 import { OpenAIModels, type OpenAIModel, OpenAIModelID } from '@/types/openai'
 import HomeContext from '~/pages/api/home/home.context'
 import { ModelParams } from './ModelParams'
-import { montserrat_heading } from 'fonts'
+import { montserrat_heading, montserrat_paragraph } from 'fonts'
 import { Input, NativeSelect, Switch, Title, Tooltip } from '@mantine/core'
 import Link from 'next/link'
 import React from 'react'
@@ -80,6 +80,7 @@ export const ModelSelect = React.forwardRef<HTMLDivElement, any>(
                   />
                 </Link>
               </Input.Description>
+
               <div tabIndex={0} className="relative w-full">
                 <NativeSelect
                   className="menu absolute z-[1]"
@@ -115,6 +116,24 @@ export const ModelSelect = React.forwardRef<HTMLDivElement, any>(
                 t={t}
               />
             </div>
+            <div className="flex h-full flex-col space-y-4 rounded-lg p-2">
+                <Input.Description
+                  className={`text-left text-sm ${montserrat_paragraph.variable} font-montserratParagraph`}
+                >
+                  <Link
+                    href="https://platform.openai.com/account/usage"
+                    target="_blank"
+                    className="hover:underline"
+                  >
+                    View account usage on OpenAI{' '}
+                    <IconExternalLink
+                      size={15}
+                      style={{ position: 'relative', top: '2px' }}
+                      className={'mb-2 inline'}
+                    />
+                  </Link>
+                </Input.Description>
+              </div>
           </div>
         </div>
       </div>