feat(misc): added history in the UI

nrwl · Aug 3, 2023 · 1823824 · 1823824
1 parent d23d92d
commit 1823824
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 31 deletions.
diff --git a/nx-dev/data-access-ai/src/lib/data-access-ai.ts b/nx-dev/data-access-ai/src/lib/data-access-ai.ts
@@ -126,20 +126,19 @@ export async function nxDevDataAccessAi(
     const prompt = `
       ${`
       You are a knowledgeable Nx representative. 
-      Your knowledge is based entirely on the official Nx documentation. 
-      You should answer queries using ONLY that information.
+      Your knowledge is based entirely on the official Nx Documentation. 
+      You can answer queries using ONLY that information.
+      You cannot answer queries using your own knowledge or experience.
       Answer in markdown format. Always give an example, answer as thoroughly as you can, and
       always provide a link to relevant documentation
       on the https://nx.dev website. All the links you find or post 
       that look like local or relative links, always prepend with "https://nx.dev".
-      Your answer should be in the form of a Markdown article, much like the
-      existing Nx documentation. Include a title, and subsections, if it makes sense.
-      Mark the titles and the subsections with the appropriate markdown syntax.
-      If you are unsure and the answer is not explicitly written in the Nx documentation, say
-      "Sorry, I don't know how to help with that. 
-      You can visit the [Nx documentation](https://nx.dev/getting-started/intro) for more info."
-      Remember, answer the question using ONLY the information provided in the Nx documentation.
-      Answer as markdown (including related code snippets if available).
+      Your answer should be in the form of a Markdown article 
+      (including related code snippets if available), much like the
+      existing Nx documentation. Mark the titles and the subsections with the appropriate markdown syntax.
+      If you are unsure and cannot find an answer in the Nx Documentation, say
+      "Sorry, I don't know how to help with that. You can visit the [Nx documentation](https://nx.dev/getting-started/intro) for more info."
+      Remember, answer the question using ONLY the information provided in the Nx Documentation.
       `
         .replace(/\s+/g, ' ')
         .trim()}
@@ -202,3 +201,7 @@ export function resetHistory() {
   chatFullHistory = [];
   totalTokensSoFar = 0;
 }
+
+export function getHistory(): ChatItem[] {
+  return chatFullHistory;
+}
diff --git a/nx-dev/data-access-ai/src/lib/utils.ts b/nx-dev/data-access-ai/src/lib/utils.ts
@@ -2,6 +2,7 @@ import {
   ChatCompletionRequestMessageRoleEnum,
   CreateChatCompletionResponse,
 } from 'openai';
+import { getHistory } from './data-access-ai';
 export interface PageSection {
   id: number;
   page_id: number;
@@ -124,7 +125,7 @@ export function initializeChat(
   let messages: ChatItem[] = [];
 
   if (chatFullHistory.length > 0) {
-    finalQuery = `Here is the question you should answer: ${query}`;
+    finalQuery = `---- My message: ${query}`;
     messages = [
       {
         role: ChatCompletionRequestMessageRoleEnum.Assistant,
@@ -135,8 +136,19 @@ export function initializeChat(
     chatGptMessages = [...chatFullHistory, ...messages];
   } else {
     finalQuery = `
-    Here is the Nx documentation you should use: ${contextText}.
-    Here is the question you should answer: ${query}
+    You will be provided the Nx Documentation. 
+    Answer my message provided by following the approach below:
+    
+    - Step 1: Identify CLUES (keywords, phrases, contextual information, references) in the input that you could use to generate an answer.
+    - Step 2: Deduce the diagnostic REASONING process from the premises (clues, question), relying only on the information provided in the Nx Documentation. If you recognize vulgar language, answer the question if possible, and educate the user to stay polite.
+    - Step 3: EVALUATE the reasoning. If the reasoning aligns with the Nx Documentation, accept it. If the reasoning doesn't strictly align with the Nx Documentation or relies on external knowledge or inference, reject it and answer with the exact string: 
+    "Sorry, I don't know how to help with that. You can visit the [Nx documentation](https://nx.dev/getting-started/intro) for more info."
+    - Final Step: Begin your answer with "ANSWER:".
+   
+    Nx Documentation: 
+    ${contextText}
+
+    ---- My message: ${query}
     `;
     messages = [
       { role: ChatCompletionRequestMessageRoleEnum.System, content: prompt },
@@ -150,6 +162,29 @@ export function initializeChat(
   return { chatMessages: chatGptMessages, chatHistory: chatFullHistory };
 }
 
+export function extractQuery(text: string) {
+  const regex = /---- My message: (.+)/;
+  const match = text.match(regex);
+  return match ? match[1].trim() : text;
+}
+
+export function getProcessedHistory(): ChatItem[] {
+  let history = getHistory();
+  history = history
+    .map((item) => {
+      if (item.role === ChatCompletionRequestMessageRoleEnum.User) {
+        item.content = extractQuery(item.content);
+      }
+      if (item.role !== ChatCompletionRequestMessageRoleEnum.System) {
+        return item;
+      } else {
+        return undefined;
+      }
+    })
+    .filter((item) => !!item) as ChatItem[];
+  return history;
+}
+
 export interface ChatItem {
   role: ChatCompletionRequestMessageRoleEnum;
   content: string;

diff --git a/nx-dev/feature-ai/src/lib/feature-ai.tsx b/nx-dev/feature-ai/src/lib/feature-ai.tsx
@@ -1,11 +1,16 @@
 import { ReactNode, useState } from 'react';
 import { Button } from '@nx/nx-dev/ui-common';
 import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
-
 import { renderMarkdown } from '@nx/nx-dev/ui-markdoc';
-import { nxDevDataAccessAi, resetHistory } from '@nx/nx-dev/data-access-ai';
+import {
+  nxDevDataAccessAi,
+  resetHistory,
+  getProcessedHistory,
+  ChatItem,
+} from '@nx/nx-dev/data-access-ai';
 
 export function FeatureAi(): JSX.Element {
+  const [chatHistory, setChatHistory] = useState<ChatItem[] | null>([]);
   const [finalResult, setFinalResult] = useState<null | ReactNode>(null);
   const [textResponse, setTextResponse] = useState<undefined | string>('');
   const [error, setError] = useState(null);
@@ -14,12 +19,15 @@ export function FeatureAi(): JSX.Element {
   const [feedbackSent, setFeedbackSent] = useState<boolean>(false);
   const [sources, setSources] = useState('');
 
-  const warning = `
+  const warning = renderMarkdown(
+    `
   {% callout type="warning" title="Always double check!" %}
   This feature is still in Alpha.
   The results may not be accurate, so please always double check with our documentation.
 {% /callout %}
-  `;
+  `,
+    { filePath: '' }
+  ).node;
 
   const infoBox = renderMarkdown(
     `
@@ -32,6 +40,12 @@ export function FeatureAi(): JSX.Element {
   ).node;
 
   const handleSubmit = async () => {
+    if (textResponse) {
+      setChatHistory([
+        ...(chatHistory ?? []),
+        { role: 'assistant', content: textResponse },
+      ]);
+    }
     setLoading(true);
     setError(null);
     let completeText = '';
@@ -51,6 +65,7 @@ export function FeatureAi(): JSX.Element {
       setError(error as any);
       setLoading(false);
     }
+    setChatHistory(getProcessedHistory());
     sendCustomEvent('ai_query', 'ai', 'query', undefined, {
       query,
       ...usage,
@@ -63,7 +78,7 @@ export function FeatureAi(): JSX.Element {
   {% /callout %}`;
 
     setFinalResult(
-      renderMarkdown(warning + completeText + sourcesMd, { filePath: '' }).node
+      renderMarkdown(completeText + sourcesMd, { filePath: '' }).node
     );
   };
 
@@ -74,6 +89,7 @@ export function FeatureAi(): JSX.Element {
     setTextResponse('');
     setSources('');
     setFeedbackSent(false);
+    setChatHistory(null);
   };
 
   const handleFeedback = (type: 'good' | 'bad') => {
@@ -119,26 +135,39 @@ export function FeatureAi(): JSX.Element {
           Ask
         </Button>
       </div>
+      <div>
+        {infoBox}
+        <Button variant="primary" size="small" onClick={() => handleReset()}>
+          Ask new question{' '}
+          <span role="img" aria-label="thumbs-down">
+            🔄
+          </span>
+        </Button>
+        {warning}
+      </div>
       {loading ? (
         <div className="p-4 max-w-none">
           <h1>Thinking...</h1>
         </div>
       ) : null}
+
+      {chatHistory ? (
+        <div className="p-4 bg-gray-100">
+          <div className="mx-auto bg-white p-6 rounded shadow">
+            <p>HISTORY</p>
+            {chatHistory.map((chatItem, index) => (
+              <div key={index} className="mb-4 border-b pb-2">
+                <strong className="text-gray-700 capitalize">
+                  {chatItem.role}:
+                </strong>
+                <p className="text-gray-600 mt-1">{chatItem.content}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
       {finalResult && !loading && !error ? (
         <>
-          <div>
-            {infoBox}
-            <Button
-              variant="primary"
-              size="small"
-              onClick={() => handleReset()}
-            >
-              Ask new question{' '}
-              <span role="img" aria-label="thumbs-down">
-                🔄
-              </span>
-            </Button>
-          </div>
           <div className="p-4 max-w-none prose prose-slate dark:prose-invert">
             {finalResult}
           </div>