feat(misc): added history in the UI

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

Hide file tree

Showing 3 changed files with 78 additions and 21 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
@@ -135,7 +135,7 @@ export async function nxDevDataAccessAi(
       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
+      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.
@@ -202,3 +202,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 = `---- Here is the question you should answer: ${query}`;
     messages = [
       {
         role: ChatCompletionRequestMessageRoleEnum.Assistant,
@@ -136,7 +137,7 @@ export function initializeChat(
   } else {
     finalQuery = `
     Here is the Nx documentation you should use: ${contextText}.
-    Here is the question you should answer: ${query}
+    ---- Here is the question you should answer: ${query}
     `;
     messages = [
       { role: ChatCompletionRequestMessageRoleEnum.System, content: prompt },
@@ -150,6 +151,29 @@ export function initializeChat(
   return { chatMessages: chatGptMessages, chatHistory: chatFullHistory };
 }
 
+export function extractQuery(text: string) {
+  const regex = /---- Here is the question you should answer: (.+)/;
+  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>