chat, part 2

BloopAI · Dec 5, 2023 · 7ecfa24 · 7ecfa24
1 parent ec86eca
commit 7ecfa24
Show file tree

Hide file tree

Showing 34 changed files with 525 additions and 236 deletions.
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Conversation.tsx b/client/src/Project/CurrentTabContent/ChatTab/Conversation.tsx
@@ -6,7 +6,7 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import ScrollToBottom from 'react-scroll-to-bottom';
 import {
   ChatMessage,
@@ -21,19 +21,22 @@ import { DeviceContext } from '../../../context/deviceContext';
 import { ProjectContext } from '../../../context/projectContext';
 import { conversationsCache } from '../../../services/cache';
 import { mapLoadingSteps } from '../../../mappers/conversation';
+import { WarningSignIcon } from '../../../icons';
 import StarterMessage from './StarterMessage';
 import Input from './Input';
 import Message from './Message';
 
-type Props = {};
+type Props = {
+  side: 'left' | 'right';
+};
 
 let prevEventSource: EventSource | undefined;
 
 const focusInput = () => {
   findElementInCurrentTab('.ProseMirror')?.focus();
 };
 
-const Conversation = ({}: Props) => {
+const Conversation = ({ side }: Props) => {
   const { t } = useTranslation();
   const { apiUrl } = useContext(DeviceContext);
   const { project } = useContext(ProjectContext.Current);
@@ -418,16 +421,21 @@ const Conversation = ({}: Props) => {
           isEmptyConversation
           setInputValueImperatively={setInputValueImperatively}
         />
-        {conversation.map((m, i) => (
+        {(hideMessagesFrom === null
+          ? conversation
+          : conversation.slice(0, hideMessagesFrom + 1)
+        ).map((m, i) => (
           <Message
             key={i}
             i={i}
+            side={side}
+            projectId={project?.id!}
             isLoading={m.author === ChatMessageAuthor.Server && m.isLoading}
             loadingSteps={
               m.author === ChatMessageAuthor.Server ? m.loadingSteps : []
             }
             author={m.author}
-            text={m.text}
+            text={m.text || ''}
             parsedQuery={
               m.author === ChatMessageAuthor.Server ? undefined : m.parsedQuery
             }
@@ -458,14 +466,26 @@ const Conversation = ({}: Props) => {
             }
           />
         ))}
+        {hideMessagesFrom !== null && (
+          <div className="flex items-center w-full p-4 gap-4 select-none">
+            <div className="w-7 h-7 flex items-center justify-center rounded-full bg-yellow-subtle text-yellow">
+              <WarningSignIcon sizeClassName="w-3.5 h-3.5" />
+            </div>
+            <p className="text-yellow body-s">
+              <Trans>
+                Editing previously submitted questions will discard all answers
+                and questions following it
+              </Trans>
+            </p>
+          </div>
+        )}
       </ScrollToBottom>
       <Input
         selectedLines={selectedLines}
         setSelectedLines={setSelectedLines}
         onStop={stopGenerating}
         submittedQuery={submittedQuery}
         isStoppable={isLoading}
-        loadingSteps={loadingSteps}
         onMessageEditCancel={onMessageEditCancel}
         generationInProgress={
           (conversation[conversation.length - 1] as ChatMessageServer)

diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../../../types/general';
 import { getAutocomplete } from '../../../../services/api';
 import { FileResItem, LangItem } from '../../../../types/api';
+import useKeyboardNavigation from '../../../../hooks/useKeyboardNavigation';
 import InputCore from './InputCore';
 
 type Props = {
@@ -22,7 +23,6 @@ type Props = {
   setInputValue: Dispatch<
     SetStateAction<{ parsed: ParsedQueryType[]; plain: string }>
   >;
-  loadingSteps?: ChatLoadingStep[];
   selectedLines?: [number, number] | null;
   setSelectedLines?: (l: [number, number] | null) => void;
   queryIdToEdit?: string;
@@ -50,7 +50,6 @@ const ConversationInput = ({
   generationInProgress,
   isStoppable,
   onStop,
-  loadingSteps,
   selectedLines,
   setSelectedLines,
   queryIdToEdit,
@@ -148,8 +147,20 @@ const ConversationInput = ({
     [],
   );
 
+  const handleKeyEvent = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && onMessageEditCancel) {
+        e.preventDefault();
+        e.stopPropagation();
+        onMessageEditCancel();
+      }
+    },
+    [onMessageEditCancel],
+  );
+  useKeyboardNavigation(handleKeyEvent, !queryIdToEdit);
+
   return (
-    <div className="flex items-start w-full py-4 gap-4 rounded-md">
+    <div className="flex items-start w-full p-4 gap-4 rounded-md">
       <div className="w-7 h-7 rounded-full overflow-hidden select-none">
         <img src={envConfig.github_user?.avatar_url} alt={t('avatar')} />
       </div>
@@ -167,16 +178,29 @@ const ConversationInput = ({
             'Write a message, @ to mention files, folders or docs...',
           )}
         />
-        <button
-          className="self-end flex gap-1 items-center py-1 pr-1 pl-2 rounded-6 body-mini-b text-label-base bg-bg-base disabled:text-label-muted disabled:bg-bg-base"
-          disabled={!value?.plain || generationInProgress}
-          onClick={onSubmitButtonClicked}
-        >
-          <Trans>Submit</Trans>
-          <div className="w-5 h-5 flex items-center justify-center px-1 rounded bg-bg-base-hover body-mini text-label-base">
-            ↵
-          </div>
-        </button>
+        <div className="self-end flex gap-2 items-center">
+          {!!queryIdToEdit && (
+            <button
+              className="flex gap-1 items-center py-1 pr-1 pl-2 rounded-6 body-mini-b text-label-base bg-bg-base disabled:text-label-muted disabled:bg-bg-base"
+              onClick={onMessageEditCancel}
+            >
+              <Trans>Cancel</Trans>
+              <div className="h-5 flex items-center justify-center px-1 rounded bg-bg-base-hover body-mini text-label-base">
+                Esc
+              </div>
+            </button>
+          )}
+          <button
+            className="flex gap-1 items-center py-1 pr-1 pl-2 rounded-6 body-mini-b text-label-base bg-bg-base disabled:text-label-muted disabled:bg-bg-base"
+            disabled={!value?.plain || generationInProgress}
+            onClick={onSubmitButtonClicked}
+          >
+            <Trans>Submit</Trans>
+            <div className="w-5 h-5 flex items-center justify-center px-1 rounded bg-bg-base-hover body-mini text-label-base">
+              ↵
+            </div>
+          </button>
+        </div>
       </div>
     </div>
   );