Merge chat/build modes into one + rework first creation experience

newIDE/app/src/AiGeneration/AiConfiguration.js

@@ -9,6 +9,7 @@ export type AiConfigurationPresetWithAvailability = {|
   ...AiConfigurationPreset,
   disabled: boolean,
   enableWith: 'higher-tier-plan' | null,
+  enabledWithPlans: Array<string>,
 |};
 
 export const getAiConfigurationPresetsWithAvailability = ({
@@ -27,6 +28,7 @@ export const getAiConfigurationPresetsWithAvailability = ({
     return aiSettings.aiRequest.presets.map(preset => ({
       ...preset,
       enableWith: null,
+      enabledWithPlans: [],
       disabled: preset.isDefault ? false : true,
     }));
   }
@@ -45,6 +47,8 @@ export const getAiConfigurationPresetsWithAvailability = ({
           ? presetAvailability.disabled
           : preset.disabled,
       enableWith: (presetAvailability && presetAvailability.enableWith) || null,
+      enabledWithPlans:
+        (presetAvailability && presetAvailability.enabledWithPlans) || [],
     };
   });
 };

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

@@ -0,0 +1,53 @@
+// @flow
+import * as React from 'react';
+import { Trans } from '@lingui/macro';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import Paper from '../../UI/Paper';
+import classes from './AutoEditButton.module.css';
+
+type Props = {|
+  isAutoEditEnabled: boolean,
+  onToggle: () => void,
+  disabled?: boolean,
+|};
+
+const styles = {
+  paper: {
+    borderRadius: 8,
+    display: 'flex',
+  },
+  button: {
+    padding: '6px 12px',
+    fontSize: 12,
+    fontFamily: 'var(--gdevelop-modern-font-family)',
+    color: 'inherit',
+    whiteSpace: 'nowrap',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+  },
+};
+
+const AutoEditButton = ({
+  isAutoEditEnabled,
+  onToggle,
+  disabled,
+}: Props): React.Node => (
+  <Paper
+    background="light"
+    style={{ ...styles.paper, opacity: disabled ? 0.5 : 1 }}
+  >
+    <ButtonBase onClick={onToggle} disabled={disabled} style={styles.button}>
+      <Trans>Auto edit</Trans>
+      <span
+        className={`${classes.statusPill} ${
+          isAutoEditEnabled ? classes.statusPillOn : classes.statusPillOff
+        }`}
+      >
+        {isAutoEditEnabled ? <Trans>On</Trans> : <Trans>Off</Trans>}
+      </span>
+    </ButtonBase>
+  </Paper>
+);
+
+export default AutoEditButton;

newIDE/app/src/AiGeneration/AiRequestChat/AutoEditButton.module.css

@@ -0,0 +1,17 @@
+.statusPill {
+  border-radius: 6px;
+  padding: 2px 5px;
+  margin-left: 2px;
+  min-width: 1.4em;
+  text-align: center;
+}
+
+.statusPillOn {
+  background-color: var(--theme-auto-edit-on-background-color);
+  color: var(--theme-auto-edit-on-text-color);
+}
+
+.statusPillOff {
+  background-color: var(--theme-auto-edit-off-background-color);
+  color: var(--theme-auto-edit-off-text-color);
+}

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

@@ -0,0 +1,199 @@
+// @flow
+import * as React from 'react';
+import { Trans } from '@lingui/macro';
+import { I18n } from '@lingui/react';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Tooltip from '@material-ui/core/Tooltip';
+import Paper from '../../UI/Paper';
+import GDevelopThemeContext from '../../UI/Theme/GDevelopThemeContext';
+import NetworkLow from '../../UI/CustomSvgIcons/NetworkLow';
+import NetworkMedium from '../../UI/CustomSvgIcons/NetworkMedium';
+import NetworkHigh from '../../UI/CustomSvgIcons/NetworkHigh';
+import NetworkMaximum from '../../UI/CustomSvgIcons/NetworkMaximum';
+import ChevronArrowBottom from '../../UI/CustomSvgIcons/ChevronArrowBottom';
+import Silver from '../../Profile/Subscription/Icons/Silver';
+import GoldCompact from '../../Profile/Subscription/Icons/GoldCompact';
+import Startup from '../../Profile/Subscription/Icons/Startup';
+import { type AiConfigurationPresetWithAvailability } from '../AiConfiguration';
+import { selectMessageByLocale } from '../../Utils/i18n/MessageByLocale';
+import { tooltipEnterDelay } from '../../UI/Tooltip';
+
+type Props = {|
+  chosenOrDefaultAiConfigurationPresetId: string,
+  setAiConfigurationPresetId: string => void,
+  aiConfigurationPresetsWithAvailability: Array<AiConfigurationPresetWithAvailability>,
+  disabled?: boolean,
+|};
+
+const networkIcons = [NetworkLow, NetworkMedium, NetworkHigh, NetworkMaximum];
+
+const styles = {
+  paper: {
+    borderRadius: 8,
+    display: 'flex',
+  },
+  button: {
+    padding: '4px 4px 4px 8px',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  menuItemContent: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    gap: 24,
+  },
+  freeBadge: {
+    fontSize: 12,
+    opacity: 0.7,
+  },
+  networkIcon: {
+    fontSize: 20,
+  },
+  chevronIcon: {
+    fontSize: 20,
+  },
+  subscriptionIcon: {
+    width: 20,
+    height: 20,
+  },
+};
+
+const getSubscriptionBadge = (enabledWithPlans: Array<string>): React.Node => {
+  if (enabledWithPlans.length === 0) {
+    return (
+      <span style={styles.freeBadge}>
+        <Trans>Free</Trans>
+      </span>
+    );
+  }
+  if (
+    enabledWithPlans.some(
+      p => p === 'gdevelop_silver' || p === 'gdevelop_indie'
+    )
+  ) {
+    return <Silver style={styles.subscriptionIcon} />;
+  }
+  if (enabledWithPlans.some(p => p === 'gdevelop_gold')) {
+    return <GoldCompact style={styles.subscriptionIcon} />;
+  }
+  return <Startup style={styles.subscriptionIcon} />;
+};
+
+export const ReasoningLevelSelector = ({
+  chosenOrDefaultAiConfigurationPresetId,
+  setAiConfigurationPresetId,
+  aiConfigurationPresetsWithAvailability,
+  disabled,
+}: Props): React.Node => {
+  const gdevelopTheme = React.useContext(GDevelopThemeContext);
+  const networkIconColor =
+    gdevelopTheme.palette.type === 'light' ? '#7046EC' : '#9979F1';
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const isMenuOpen = Boolean(anchorEl);
+
+  const orchestratorPresets = aiConfigurationPresetsWithAvailability.filter(
+    preset => preset.mode === 'orchestrator'
+  );
+
+  // Deselect the current preset if it becomes disabled
+  React.useEffect(
+    () => {
+      const currentPreset = orchestratorPresets.find(
+        preset => preset.id === chosenOrDefaultAiConfigurationPresetId
+      );
+
+      if (currentPreset && currentPreset.disabled) {
+        const firstEnabledPreset = orchestratorPresets.find(
+          preset => !preset.disabled
+        );
+
+        if (firstEnabledPreset) {
+          setAiConfigurationPresetId(firstEnabledPreset.id);
+        }
+      }
+    },
+    [
+      chosenOrDefaultAiConfigurationPresetId,
+      orchestratorPresets,
+      setAiConfigurationPresetId,
+    ]
+  );
+
+  if (orchestratorPresets.length === 0) return null;
+
+  const currentPreset = orchestratorPresets.find(
+    preset => preset.id === chosenOrDefaultAiConfigurationPresetId
+  );
+  const NetworkIcon =
+    networkIcons[
+      currentPreset != null ? currentPreset.reasoningLevel ?? 0 : 0
+    ] || NetworkLow;
+
+  return (
+    <I18n>
+      {({ i18n }) => (
+        <>
+          <Paper
+            background="light"
+            style={{ ...styles.paper, opacity: disabled ? 0.5 : 1 }}
+          >
+            <Tooltip
+              title={<Trans>Reasoning level</Trans>}
+              enterDelay={tooltipEnterDelay}
+            >
+              <span>
+                <ButtonBase
+                  onClick={e => setAnchorEl(e.currentTarget)}
+                  disabled={disabled}
+                  style={styles.button}
+                >
+                  <NetworkIcon
+                    style={{ ...styles.networkIcon, color: networkIconColor }}
+                  />
+                  <ChevronArrowBottom style={styles.chevronIcon} />
+                </ButtonBase>
+              </span>
+            </Tooltip>
+          </Paper>
+          <Menu
+            anchorEl={anchorEl}
+            open={isMenuOpen}
+            onClose={() => setAnchorEl(null)}
+          >
+            <ListSubheader disableSticky>
+              <Trans>Reasoning level:</Trans>
+            </ListSubheader>
+            {orchestratorPresets.map(preset => (
+              <MenuItem
+                key={preset.id}
+                disabled={preset.disabled}
+                selected={preset.id === chosenOrDefaultAiConfigurationPresetId}
+                onClick={() => {
+                  setAiConfigurationPresetId(preset.id);
+                  setAnchorEl(null);
+                }}
+              >
+                <div style={styles.menuItemContent}>
+                  <span>
+                    {preset.reasoningLevelByLocale
+                      ? selectMessageByLocale(
+                          i18n,
+                          preset.reasoningLevelByLocale
+                        )
+                      : selectMessageByLocale(i18n, preset.nameByLocale)}
+                  </span>
+                  {getSubscriptionBadge(preset.enabledWithPlans)}
+                </div>
+              </MenuItem>
+            ))}
+          </Menu>
+        </>
+      )}
+    </I18n>
+  );
+};