studio conversation design fixes

BloopAI · Jan 18, 2024 · 47b51c5 · 47b51c5
1 parent c8f17f9
commit 47b51c5
Show file tree

Hide file tree

Showing 10 changed files with 381 additions and 304 deletions.
diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx
@@ -269,7 +269,9 @@ const ConversationInput = ({
   return (
     <div
       className={`flex items-start w-full p-4 gap-4 rounded-tl-md rounded-tr-md ${
-        isInputAtBottom ? 'bg-bg-base border-t border-x border-bg-border' : ''
+        isInputAtBottom
+          ? 'bg-bg-base border-t border-x border-bg-border shadow-medium'
+          : ''
       }`}
       ref={containerRef}
     >

diff --git a/client/src/Project/CurrentTabContent/StudioTab/Conversation.tsx b/client/src/Project/CurrentTabContent/StudioTab/Conversation.tsx
diff --git a/...entTabContent/StudioTab/GeneratedDiff.tsx → .../StudioTab/Conversation/GeneratedDiff.tsx b/...entTabContent/StudioTab/GeneratedDiff.tsx → .../StudioTab/Conversation/GeneratedDiff.tsx
@@ -1,8 +1,8 @@
 import { Dispatch, memo, SetStateAction, useCallback, useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { GeneratedCodeDiff } from '../../../types/api';
-import { BranchIcon, WarningSignIcon } from '../../../icons';
-import CodeDiff from '../../../components/Code/CodeDiff';
+import { GeneratedCodeDiff } from '../../../../types/api';
+import { BranchIcon, WarningSignIcon } from '../../../../icons';
+import CodeDiff from '../../../../components/Code/CodeDiff';
 
 type Props = {
   diff: GeneratedCodeDiff;

diff --git a/...ent/StudioTab/Input/TemplatesDropdown.tsx → .../Conversation/Input/TemplatesDropdown.tsx b/...ent/StudioTab/Input/TemplatesDropdown.tsx → .../Conversation/Input/TemplatesDropdown.tsx
@@ -9,13 +9,13 @@ import {
   useRef,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import DropdownSection from '../../../../components/Dropdown/Section';
-import { StudioTemplateType } from '../../../../types/api';
-import SectionItem from '../../../../components/Dropdown/Section/SectionItem';
-import { CogIcon, TemplatesIcon } from '../../../../icons';
-import { UIContext } from '../../../../context/uiContext';
-import { ProjectSettingSections } from '../../../../types/general';
-import useKeyboardNavigation from '../../../../hooks/useKeyboardNavigation';
+import DropdownSection from '../../../../../components/Dropdown/Section';
+import { StudioTemplateType } from '../../../../../types/api';
+import SectionItem from '../../../../../components/Dropdown/Section/SectionItem';
+import { CogIcon, TemplatesIcon } from '../../../../../icons';
+import { UIContext } from '../../../../../context/uiContext';
+import { ProjectSettingSections } from '../../../../../types/general';
+import useKeyboardNavigation from '../../../../../hooks/useKeyboardNavigation';
 
 type Props = {
   templates: StudioTemplateType[];

diff --git a/...rrentTabContent/StudioTab/Input/index.tsx → ...nt/StudioTab/Conversation/Input/index.tsx b/...rrentTabContent/StudioTab/Input/index.tsx → ...nt/StudioTab/Conversation/Input/index.tsx
@@ -10,25 +10,21 @@ import React, {
   useState,
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { StudioConversationMessageAuthor } from '../../../../types/general';
-import MarkdownWithCode from '../../../../components/MarkdownWithCode';
-import { EnvContext } from '../../../../context/envContext';
-import KeyboardHint from '../../../../components/KeyboardHint';
+import { StudioConversationMessageAuthor } from '../../../../../types/general';
+import MarkdownWithCode from '../../../../../components/MarkdownWithCode';
+import { EnvContext } from '../../../../../context/envContext';
 import {
   PencilIcon,
   RefreshIcon,
   TemplatesIcon,
   TrashCanIcon,
   WarningSignIcon,
-} from '../../../../icons';
-import Button from '../../../../components/Button';
-import useKeyboardNavigation from '../../../../hooks/useKeyboardNavigation';
-import { checkEventKeys } from '../../../../utils/keyboardUtils';
-import { UIContext } from '../../../../context/uiContext';
-import CopyButton from '../../../../components/MarkdownWithCode/CopyButton';
-import { StudioTemplateType } from '../../../../types/api';
-import Dropdown from '../../../../components/Dropdown';
-import { useTemplateShortcut } from '../../../../consts/shortcuts';
+} from '../../../../../icons';
+import Button from '../../../../../components/Button';
+import CopyButton from '../../../../../components/MarkdownWithCode/CopyButton';
+import { StudioTemplateType } from '../../../../../types/api';
+import Dropdown from '../../../../../components/Dropdown';
+import { useTemplateShortcut } from '../../../../../consts/shortcuts';
 import TemplatesDropdown from './TemplatesDropdown';
 
 type Props = {
@@ -38,15 +34,12 @@ type Props = {
   onMessageRemoved?: (i: number, andSubsequent?: boolean) => void;
   i?: number;
   inputRef?: React.MutableRefObject<HTMLTextAreaElement | null>;
+  templatesRef?: React.MutableRefObject<HTMLButtonElement | null>;
   isTokenLimitExceeded: boolean;
   isLast: boolean;
   side: 'left' | 'right';
-  onSubmit?: () => void;
-  isActiveTab: boolean;
-  isLoading: boolean;
-  requestsLeft: number;
-  handleCancel: () => void;
   templates?: StudioTemplateType[];
+  setIsDropdownShown: (b: boolean) => void;
 };
 
 const ConversationInput = ({
@@ -59,31 +52,20 @@ const ConversationInput = ({
   isLast,
   isTokenLimitExceeded,
   side,
-  onSubmit,
-  isActiveTab,
-  requestsLeft,
-  isLoading,
-  handleCancel,
   templates,
+  setIsDropdownShown,
+  templatesRef,
 }: Props) => {
   const { t } = useTranslation();
   const { envConfig } = useContext(EnvContext);
-  const { setIsUpgradeRequiredPopupOpen } = useContext(
-    UIContext.UpgradeRequiredPopup,
-  );
-  // const { refetchTemplates, setTemplates } = useContext(StudioContext.Setters);
   const [isFocused, setFocused] = useState(false);
-  const [isDropdownShown, setIsDropdownShown] = useState(false);
   const ref = useRef<HTMLTextAreaElement | null>(null);
   const cloneRef = useRef<HTMLTextAreaElement | null>(null);
-  const templatesRef = useRef<HTMLButtonElement | null>(null);
-  const [isSaved, setSaved] = useState(false);
   useImperativeHandle(inputRef, () => ref.current!);
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       onMessageChange(e.target.value, i);
-      setSaved(false);
     },
     [i, onMessageChange],
   );
@@ -100,67 +82,10 @@ const ConversationInput = ({
     }
   }, [message, isFocused]);
 
-  const saveAsTemplate = useCallback(() => {
-    setSaved(true);
-    // setTemplates((prev) => [
-    //   {
-    //     name: '',
-    //     content: message,
-    //     id: 'new',
-    //     modified_at: '',
-    //     is_default: false,
-    //   },
-    //   ...prev,
-    // ]);
-    // setLeftPanel({ type: StudioLeftPanelType.TEMPLATES });
-  }, [message]);
-
-  const useTemplates = useCallback(() => {
-    // setLeftPanel({ type: StudioLeftPanelType.TEMPLATES });
-  }, []);
-
-  const handleKeyEvent = useCallback(
-    (e: KeyboardEvent) => {
-      if (checkEventKeys(e, ['entr'])) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (
-          message &&
-          !isTokenLimitExceeded &&
-          // !hasContextError &&
-          requestsLeft
-          // && !isChangeUnsaved
-        ) {
-          onSubmit?.();
-        } else if (!requestsLeft) {
-          setIsUpgradeRequiredPopupOpen(true);
-        }
-        // } else if ((e.metaKey || e.ctrlKey) && e.key === 't') {
-        //   setLeftPanel({ type: StudioLeftPanelType.TEMPLATES });
-      }
-      if (checkEventKeys(e, ['Esc']) && isLoading) {
-        e.preventDefault();
-        e.stopPropagation();
-        handleCancel();
-      }
-      if (checkEventKeys(e, useTemplateShortcut) && i === undefined) {
-        templatesRef.current?.parentElement?.click();
-      }
-    },
-    [onSubmit, isLoading, requestsLeft, i],
-  );
-  useKeyboardNavigation(
-    handleKeyEvent,
-    !isActiveTab || !onSubmit || isDropdownShown,
-  );
-
   const dropdownProps = useMemo(() => {
     return {
       templates,
-      onTemplateSelected: (t: string) => {
-        onMessageChange(t, i);
-        setSaved(false);
-      },
+      onTemplateSelected: onMessageChange,
     };
   }, [templates, onMessageChange, i]);
 
@@ -230,18 +155,6 @@ const ConversationInput = ({
                 rows={1}
                 ref={cloneRef}
               />
-              {!!onSubmit && (
-                <div className="self-end flex gap-2 items-center select-none">
-                  <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={!message}
-                    onClick={onSubmit}
-                  >
-                    <Trans>Generate</Trans>
-                    <KeyboardHint shortcut="entr" />
-                  </button>
-                </div>
-              )}
             </>
           ) : (
             <>

diff --git a/...ntTabContent/StudioTab/StarterMessage.tsx → ...StudioTab/Conversation/StarterMessage.tsx b/...ntTabContent/StudioTab/StarterMessage.tsx → ...StudioTab/Conversation/StarterMessage.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { CodeStudioIcon } from '../../../icons';
+import { CodeStudioIcon } from '../../../../icons';
 
 type Props = {};