wip selector in chat

Author: ClementPasteau

newIDE/app/src/AiGeneration/AiRequestChat/index.js

@@ -33,6 +33,7 @@ import {
 } from '../AiRequestUtils';
 import TwoStatesButton from '../../UI/TwoStatesButton';
 import Help from '../../UI/CustomSvgIcons/Help';
+import HelpQuestion from '../../UI/CustomSvgIcons/HelpQuestion';
 import Hammer from '../../UI/CustomSvgIcons/Hammer';
 import { ChatMessages } from './ChatMessages';
 import Send from '../../UI/CustomSvgIcons/Send';
@@ -51,6 +52,8 @@ import GoldCompact from '../../Profile/Subscription/Icons/GoldCompact';
 import { SubscriptionContext } from '../../Profile/Subscription/SubscriptionContext';
 import { CreditsPackageStoreContext } from '../../AssetStore/CreditsPackages/CreditsPackageStoreContext';
 import Paper from '../../UI/Paper';
+import SelectOption from '../../UI/SelectOption';
+import CompactSelectField from '../../UI/CompactSelectField';
 
 const TOO_MANY_USER_MESSAGES_WARNING_COUNT = 10;
 const TOO_MANY_USER_MESSAGES_ERROR_COUNT = 15;
@@ -1042,8 +1045,29 @@ export const AiRequestChat = React.forwardRef<Props, AiRequestChatInterface>(
                 noMargin
                 expand
                 alignItems="center"
-                justifyContent="flex-end"
+                justifyContent="space-between"
               >
+                <CompactSelectField
+                  disabled={isWorking}
+                  value={aiRequestMode}
+                  onChange={value => {
+                    if (value !== 'chat' && value !== 'agent') {
+                      return;
+                    }
+                    setAiState({ mode: value, aiRequestId });
+                  }}
+                  renderOptionIcon={className =>
+                    aiRequestMode === 'chat' ? (
+                      <HelpQuestion className={className} />
+                    ) : (
+                      <Hammer className={className} />
+                    )
+                  }
+                  rounded
+                >
+                  <SelectOption key="chat" value="chat" label={t`Ask`} />
+                  <SelectOption key="agent" value="agent" label={t`Build`} />
+                </CompactSelectField>
                 {isForAnotherProjectText || errorText || priceAndRequestsText}
               </Line>
             }

newIDE/app/src/UI/CompactSelectField/CompactSelectField.module.css

@@ -3,6 +3,9 @@
   align-items: center;
   min-width: 0px;
 }
+.container.rounded {
+  border-radius: 24px;
+}
 
 .compactSelectField {
   border-radius: 4px;
@@ -79,6 +82,10 @@
   min-width: 0px;
 }
 
+.compactSelectField.withOptionIcon select {
+  padding-left: 30px;
+}
+
 .compactSelectField select::placeholder {
   color: var(--theme-text-field-placeholder-color);
 }
@@ -146,3 +153,18 @@ svg.leftIcon {
 .container:not(.disabled):focus-within .leftIcon {
   color: var(--theme-text-default-color);
 }
+
+.optionIconContainer {
+  pointer-events: none;
+  position: absolute;
+  top: 2px;
+  left: 4px;
+  display: flex;
+  align-items: center;
+}
+.optionIcon {
+  font-size: 18px;
+}
+.container.disabled .optionIcon {
+  color: var(--theme-text-field-disabled-color);
+}

newIDE/app/src/UI/CompactSelectField/index.js

@@ -14,6 +14,8 @@ type Props = {|
   children: React.Node,
   renderLeftIcon?: (className: string) => React.Node,
   leftIconTooltip?: React.Node,
+  renderOptionIcon?: (className: string) => React.Node,
+  rounded?: boolean,
 |};
 
 const CompactSelectField = ({
@@ -24,14 +26,17 @@ const CompactSelectField = ({
   errored,
   children,
   renderLeftIcon,
+  renderOptionIcon,
   leftIconTooltip,
+  rounded,
 }: Props) => {
   return (
     <div
       className={classNames({
         [classes.container]: true,
         [classes.disabled]: disabled,
         [classes.errored]: errored,
+        [classes.rounded]: rounded,
       })}
     >
       {renderLeftIcon && (
@@ -60,8 +65,14 @@ const CompactSelectField = ({
       <div
         className={classNames({
           [classes.compactSelectField]: true,
+          [classes.withOptionIcon]: !!renderOptionIcon,
         })}
       >
+        {renderOptionIcon && (
+          <div className={classes.optionIconContainer}>
+            {renderOptionIcon(classes.optionIcon)}
+          </div>
+        )}
         <select
           id={id}
           disabled={disabled}

newIDE/app/src/UI/CustomSvgIcons/HelpQuestion.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon
+    {...props}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.50004 9.33337C7.50004 8.75897 7.62133 8.3179 7.82556 7.95706C8.02491 7.60489 8.28686 7.36064 8.49874 7.16996C8.72526 6.9661 8.87687 6.8355 8.99028 6.6654C9.08917 6.51707 9.16671 6.32278 9.16671 6.00003C9.16671 5.56077 8.99983 5.2639 8.77022 5.06904C8.5297 4.86497 8.19128 4.75003 7.83337 4.75003C7.47547 4.75003 7.13704 4.86497 6.89653 5.06904C6.66692 5.2639 6.50004 5.56076 6.50004 6.00003C6.50004 6.27618 6.27618 6.50003 6.00004 6.50003C5.7239 6.50003 5.50004 6.27618 5.50004 6.00003C5.50004 5.27269 5.79154 4.6945 6.24939 4.30602C6.69636 3.92681 7.27464 3.75003 7.83337 3.75003C8.3921 3.75003 8.97039 3.92681 9.41736 4.30602C9.87521 4.6945 10.1667 5.27269 10.1667 6.00003C10.1667 6.51062 10.0359 6.89968 9.82231 7.22009C9.62323 7.5187 9.35815 7.74232 9.16801 7.91344C8.96324 8.09773 8.80849 8.2494 8.69535 8.44925C8.58712 8.64047 8.50004 8.90782 8.50004 9.33337C8.50001 9.60948 8.27616 9.83337 8.00004 9.83337C7.72392 9.83337 7.50007 9.60948 7.50004 9.33337Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7.63546 11.6647C7.82023 11.4597 8.13605 11.443 8.34119 11.6276C8.54633 11.8124 8.56306 12.1288 8.3783 12.3339L8.37179 12.3411C8.18697 12.5463 7.87057 12.563 7.66541 12.3782C7.46024 12.1934 7.44348 11.877 7.6283 11.6718L7.63546 11.6647Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.1667 8.00004C14.1667 4.59428 11.4058 1.83337 8.00004 1.83337C4.59428 1.83337 1.83337 4.59428 1.83337 8.00004C1.83337 9.12401 2.13389 10.1762 2.65824 11.0827C2.718 11.186 2.73868 11.3079 2.71684 11.4252L2.29171 13.7077L4.57491 13.2832L4.66345 13.2748C4.75193 13.2742 4.83985 13.297 4.91736 13.3418C5.82386 13.8662 6.87608 14.1667 8.00004 14.1667C11.4058 14.1667 14.1667 11.4058 14.1667 8.00004ZM15.1667 8.00004C15.1667 11.958 11.958 15.1667 8.00004 15.1667C6.76239 15.1667 5.59699 14.852 4.58012 14.2989L1.7585 14.8249C1.59647 14.8551 1.42974 14.8034 1.31319 14.6869C1.19665 14.5703 1.145 14.4036 1.17517 14.2416L1.70056 11.4193C1.14763 10.4026 0.833374 9.23737 0.833374 8.00004C0.833374 4.042 4.042 0.833374 8.00004 0.833374C11.958 0.833374 15.1667 4.042 15.1667 8.00004Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));