From e4755cb3879364696a4b40a147d66006bef0e54b Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Fri, 25 Aug 2023 10:01:21 -0400
Subject: [PATCH] feat(nx-dev): use textarea for prompts and show a better "no
 results"error (#18798)

---
 nx-dev/feature-ai/src/lib/error-message.tsx  | 59 +++++++++++----
 nx-dev/feature-ai/src/lib/feed-container.tsx | 16 ++---
 nx-dev/feature-ai/src/lib/prompt.tsx         | 75 ++++++++++++++------
 package.json                                 |  1 +
 pnpm-lock.yaml                               | 39 ++++++++++
 5 files changed, 143 insertions(+), 47 deletions(-)

diff --git a/nx-dev/feature-ai/src/lib/error-message.tsx b/nx-dev/feature-ai/src/lib/error-message.tsx
index c4406b1b6b0a6..233c3610aaaf6 100644
--- a/nx-dev/feature-ai/src/lib/error-message.tsx
+++ b/nx-dev/feature-ai/src/lib/error-message.tsx
@@ -1,19 +1,52 @@
-import { XCircleIcon } from '@heroicons/react/24/outline';
+import {
+  XCircleIcon,
+  ExclamationTriangleIcon,
+} from '@heroicons/react/24/outline';
 
 export function ErrorMessage({ error }: { error: any }): JSX.Element {
-  return (
-    <div className="rounded-md bg-red-50 p-4">
-      <div className="flex">
-        <div className="flex-shrink-0">
-          <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+  if (error.data.no_results) {
+    return (
+      <div className="rounded-md bg-yellow-50 p-4">
+        <div className="flex">
+          <div className="flex-shrink-0">
+            <ExclamationTriangleIcon
+              className="h-5 w-5 text-yellow-500"
+              aria-hidden="true"
+            />
+          </div>
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-yellow-800">
+              No results found
+            </h3>
+            <div className="mt-2 text-sm text-yellow-700">
+              Sorry, I don't know how to help with that. You can visit the{' '}
+              <a
+                href="https://nx.dev/getting-started/intro"
+                className="underline"
+              >
+                Nx documentation
+              </a>{' '}
+              for more info.
+            </div>
+          </div>
         </div>
-        <div className="ml-3">
-          <h3 className="text-sm font-medium text-red-800">
-            Oopsies! I encountered an error
-          </h3>
-          <div className="mt-2 text-sm text-red-700">{error['message']}</div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="rounded-md bg-red-50 p-4">
+        <div className="flex">
+          <div className="flex-shrink-0">
+            <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+          </div>
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-red-800">
+              Oopsies! I encountered an error
+            </h3>
+            <div className="mt-2 text-sm text-red-700">{error['message']}</div>
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
diff --git a/nx-dev/feature-ai/src/lib/feed-container.tsx b/nx-dev/feature-ai/src/lib/feed-container.tsx
index 531cf75821ff4..ee96f6517c5e4 100644
--- a/nx-dev/feature-ai/src/lib/feed-container.tsx
+++ b/nx-dev/feature-ai/src/lib/feed-container.tsx
@@ -2,7 +2,6 @@ import {
   ChatItem,
   getProcessedHistory,
   queryAi,
-  resetHistory,
   sendFeedbackAnalytics,
   sendQueryAnalytics,
 } from '@nx/nx-dev/data-access-ai';
@@ -12,7 +11,6 @@ import { ErrorMessage } from './error-message';
 import { Feed } from './feed/feed';
 import { LoadingState } from './loading-state';
 import { Prompt } from './prompt';
-import { WarningMessage } from './sidebar/warning-message';
 import { formatMarkdownSources } from './utils';
 
 interface LastQueryMetadata {
@@ -33,7 +31,7 @@ const assistantWelcome: ChatItem = {
 
 export function FeedContainer(): JSX.Element {
   const [chatHistory, setChatHistory] = useState<ChatItem[]>([]);
-  const [hasError, setHasError] = useState<any | null>(null);
+  const [queryError, setQueryError] = useState<any | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [lastQueryMetadata, setLastQueryMetadata] =
     useState<LastQueryMetadata | null>(null);
@@ -54,7 +52,7 @@ export function FeedContainer(): JSX.Element {
     currentHistory.push({ role: 'user', content: query });
 
     setIsLoading(true);
-    setHasError(null);
+    setQueryError(null);
 
     try {
       const lastAnswerChatItem =
@@ -94,7 +92,7 @@ export function FeedContainer(): JSX.Element {
         ...aiResponse.usage,
       });
     } catch (error: any) {
-      setHasError(error);
+      setQueryError(error);
     }
 
     setIsLoading(false);
@@ -122,12 +120,6 @@ export function FeedContainer(): JSX.Element {
     });
   };
 
-  const handleReset = () => {
-    resetHistory();
-    setChatHistory([]);
-    setHasError(null);
-  };
-
   return (
     <>
       {/*WRAPPER*/}
@@ -158,7 +150,7 @@ export function FeedContainer(): JSX.Element {
                 />
 
                 {isLoading && <LoadingState />}
-                {hasError && <ErrorMessage error={hasError} />}
+                {queryError && <ErrorMessage error={queryError} />}
 
                 <div className="sticky bottom-0 left-0 right-0 w-full pt-6 pb-4 bg-gradient-to-t from-white via-white dark:from-slate-900 dark:via-slate-900">
                   <Prompt
diff --git a/nx-dev/feature-ai/src/lib/prompt.tsx b/nx-dev/feature-ai/src/lib/prompt.tsx
index 4c16df3bf7e20..762931a45b21e 100644
--- a/nx-dev/feature-ai/src/lib/prompt.tsx
+++ b/nx-dev/feature-ai/src/lib/prompt.tsx
@@ -1,5 +1,7 @@
+import { useEffect, useRef, useState } from 'react';
 import { PaperAirplaneIcon } from '@heroicons/react/24/outline';
 import { Button } from '@nx/nx-dev/ui-common';
+import Textarea from 'react-textarea-autosize';
 
 export function Prompt({
   isDisabled,
@@ -8,35 +10,64 @@ export function Prompt({
   isDisabled: boolean;
   handleSubmit: (query: string) => void;
 }) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [inputValue, setInputValue] = useState<string>('');
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
   return (
     <form
+      ref={formRef}
       onSubmit={(event) => {
         event.preventDefault();
-        handleSubmit((event.target as any).query.value);
+        if (!inputValue?.trim()) return;
+        handleSubmit(inputValue);
+        setInputValue('');
         event.currentTarget.reset();
       }}
-      className="relative flex gap-4 max-w-xl mx-auto py-2 px-4 shadow-lg rounded-md border border-slate-300 bg-white dark:border-slate-900 dark:bg-slate-700"
+      className="relative flex gap-2 max-w-2xl mx-auto py-0 px-2 shadow-lg rounded-md border border-slate-300 bg-white dark:border-slate-900 dark:bg-slate-700"
     >
-      <input
-        id="query-prompt"
-        name="query"
-        disabled={isDisabled}
-        className="p-0 flex flex-grow text-sm placeholder-slate-500 transition bg-transparent focus:placeholder-slate-400 dark:focus:placeholder-slate-300 dark:text-white focus:outline-none focus:ring-0 border-none disabled:cursor-not-allowed"
-        placeholder="How does caching work?"
-        type="text"
-      />
-      <Button
-        variant="primary"
-        size="small"
-        type="submit"
-        disabled={isDisabled}
-        className="disabled:cursor-not-allowed"
-      >
-        <div hidden className="sr-only">
-          Ask
-        </div>
-        <PaperAirplaneIcon aria-hidden="true" className="h-5 w-5" />
-      </Button>
+      <div className="overflow-y-auto w-full h-full max-h-[300px]">
+        <Textarea
+          onKeyDown={(event) => {
+            if (
+              event.key === 'Enter' &&
+              !event.shiftKey &&
+              !event.nativeEvent.isComposing
+            ) {
+              formRef.current?.requestSubmit();
+              event.preventDefault();
+            }
+          }}
+          ref={inputRef}
+          onChange={(event) => setInputValue(event.target.value)}
+          id="query-prompt"
+          name="query"
+          disabled={isDisabled}
+          className="block w-full p-0 resize-none bg-transparent text-sm placeholder-slate-500 pl-2 py-[1.3rem] focus-within:outline-none focus:placeholder-slate-400 dark:focus:placeholder-slate-300 dark:text-white focus:outline-none focus:ring-0 border-none disabled:cursor-not-allowed"
+          placeholder="How does caching work?"
+          rows={1}
+        />
+      </div>
+      <div className="flex pb-2">
+        <Button
+          variant="primary"
+          size="small"
+          type="submit"
+          disabled={isDisabled}
+          className="self-end w-12 h-12 disabled:cursor-not-allowed"
+        >
+          <div hidden className="sr-only">
+            Ask
+          </div>
+          <PaperAirplaneIcon aria-hidden="true" className="h-5 w-5" />
+        </Button>
+      </div>
     </form>
   );
 }
diff --git a/package.json b/package.json
index 9ed4d886e8594..d1ba1a0ba854f 100644
--- a/package.json
+++ b/package.json
@@ -245,6 +245,7 @@
     "react-redux": "8.0.5",
     "react-refresh": "^0.10.0",
     "react-router-dom": "^6.11.2",
+    "react-textarea-autosize": "^8.3.0",
     "regenerator-runtime": "0.13.7",
     "resolve.exports": "1.1.0",
     "rollup": "^2.56.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e2ba96bdc3755..294e3ccb32295 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -814,6 +814,9 @@ devDependencies:
   react-router-dom:
     specifier: ^6.11.2
     version: 6.11.2(react-dom@18.2.0)(react@18.2.0)
+  react-textarea-autosize:
+    specifier: ^8.3.0
+    version: 8.3.0(@types/react@18.2.14)(react@18.2.0)
   resolve.exports:
     specifier: 1.1.0
     version: 1.1.0
@@ -24160,6 +24163,20 @@ packages:
       refractor: 3.6.0
     dev: false
 
+  /react-textarea-autosize@8.3.0(@types/react@18.2.14)(react@18.2.0):
+    resolution: {integrity: sha512-3GLWFAan2pbwBeoeNDoqGmSbrShORtgWfaWX0RJDivsUrpShh01saRM5RU/i4Zmf+whpBVEY5cA90Eq8Ub1N3w==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0
+    dependencies:
+      '@babel/runtime': 7.22.6
+      react: 18.2.0
+      use-composed-ref: 1.3.0(react@18.2.0)
+      use-latest: 1.2.1(@types/react@18.2.14)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: true
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -27359,6 +27376,14 @@ packages:
       tslib: 2.6.1
     dev: true
 
+  /use-composed-ref@1.3.0(react@18.2.0):
+    resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: true
+
   /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.14)(react@18.2.0):
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
@@ -27372,6 +27397,20 @@ packages:
       react: 18.2.0
     dev: true
 
+  /use-latest@1.2.1(@types/react@18.2.14)(react@18.2.0):
+    resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.14
+      react: 18.2.0
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.14)(react@18.2.0)
+    dev: true
+
   /use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==}
     peerDependencies: