@moises.ai/design-system 3.6.13 → 3.6.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.6.13",
+  "version": "3.6.18",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/StemGenerationForm/CreateNew/CreateNew.jsx

@@ -1,11 +1,15 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { Flex, Box, Tooltip, Separator } from '@radix-ui/themes'
 import { TextArea } from '../../TextArea/TextArea'
 import { Button } from '../../Button/Button'
 import { IconButton } from '../../IconButton/IconButton'
 import { Text } from '../../Text/Text'
-import { FileIcon, TrashIcon, UploadIcon } from '../../../icons'
+import { FileIcon, TrashIcon, AttachmentIcon, MagicWandIcon, RocketIcon } from '../../../icons'
 import { formatFileInfo, getInstrumentDescription } from '../utils'
+import styles from './CreateNew.module.css'
+
+const DEBOUNCE_MS = 500
+const SKELETON_WIDTHS = [60, 48, 68, 52, 56]
 
 export const CreateNew = ({
   formState,
@@ -13,7 +17,16 @@ export const CreateNew = ({
   i18n = { _: (text) => text },
   onAddConditioningAudio,
   onTextConditioningFocus,
+  onInspireMe,
+  inspireMeLoading,
+  onBoost,
+  boostLoading,
+  suggestedTags,
+  onFetchSuggestedTags,
+  suggestedTagsLoading,
 }) => {
+  const debounceRef = useRef(null)
+
   const handleTextConditioningChange = useCallback(
     (e) => {
       const newValue = e.target.value
@@ -25,6 +38,30 @@ export const CreateNew = ({
     [onFormStateChange],
   )
 
+  useEffect(() => {
+    if (!onFetchSuggestedTags) return
+    if (!formState.conditioningText) return
+
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => {
+      onFetchSuggestedTags(formState.conditioningText)
+    }, DEBOUNCE_MS)
+
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+    }
+  }, [formState.conditioningText, onFetchSuggestedTags])
+
+  const handleTagClick = useCallback(
+    (tag) => {
+      onFormStateChange((prevState) => ({
+        ...prevState,
+        conditioningText: (prevState.conditioningText || '').trimEnd() + ' ' + tag + ' ',
+      }))
+    },
+    [onFormStateChange],
+  )
+
   const handleClearConditioningAudio = useCallback(() => {
     onFormStateChange((prevState) => ({
       ...prevState,
@@ -73,11 +110,11 @@ export const CreateNew = ({
           >
             <Button
               variant="ghost"
-              color="cyan"
               onClick={onAddConditioningAudio}
+              style={{ color: '#EDEEF0' }}
             >
-              <UploadIcon width={16} height={16} />
-              <Text size="1">{i18n._('Select Reference Audio')}</Text>
+              <AttachmentIcon width={16} height={16} style={{ color: '#B0B4BA' }} />
+              <Text size="1" style={{ color: '#EDEEF0' }}>{i18n._('Select Reference Audio')}</Text>
             </Button>
           </Tooltip>
         )}
@@ -92,6 +129,7 @@ export const CreateNew = ({
             value={formState.conditioningText}
             onFocus={onTextConditioningFocus}
             onChange={handleTextConditioningChange}
+            disabled={!!inspireMeLoading || !!boostLoading}
             placeholder={i18n._(
               `Describe your desired sound characteristics (ex: ${getInstrumentDescription(
                 formState.instrument,
@@ -101,6 +139,73 @@ export const CreateNew = ({
             rows={6}
           />
         </Box>
+
+        {!formState.conditioningText && onInspireMe && (
+          <Box px="3px" pb="2">
+            <Button
+              variant="soft"
+              color="cyan"
+              size="1"
+              onClick={onInspireMe}
+              loading={inspireMeLoading}
+              style={{ borderRadius: '9999px' }}
+            >
+              <MagicWandIcon width={14} height={14} />
+              {i18n._('Inspire me')}
+            </Button>
+          </Box>
+        )}
+
+        {formState.conditioningText && (onBoost || suggestedTagsLoading || suggestedTags?.length > 0) && (
+          <div className={styles.promptActions}>
+            {onBoost && (
+              <IconButton
+                className={styles.boostButton}
+                variant="soft"
+                color="orange"
+                size="2"
+                onClick={onBoost}
+                loading={boostLoading}
+                style={{ borderRadius: '9999px', width: 32, height: 32 }}
+              >
+                <RocketIcon width={14} height={14} />
+              </IconButton>
+            )}
+            {suggestedTagsLoading && (
+              <div className={styles.tagsContainer}>
+                {SKELETON_WIDTHS.map((w, i) => (
+                  <div
+                    key={i}
+                    className={styles.skeletonChip}
+                    style={{ width: w }}
+                  />
+                ))}
+              </div>
+            )}
+            {!suggestedTagsLoading && suggestedTags?.length > 0 && (
+              <div className={styles.tagsContainer}>
+                {suggestedTags.map((tag) => (
+                  <Button
+                    key={tag}
+                    className={styles.tagChip}
+                    variant="ghost"
+                    size="2"
+                    onClick={() => handleTagClick(tag)}
+                    style={{
+                      borderRadius: '9999px',
+                      color: 'rgba(241, 247, 254, 0.71)',
+                      backgroundColor: 'rgba(221, 234, 248, 0.08)',
+                      paddingLeft: 14,
+                      paddingRight: 14,
+                    }}
+                  >
+                    {tag}
+                  </Button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
       </Flex>
     </Flex>
   )

package/src/components/StemGenerationForm/CreateNew/CreateNew.module.css

@@ -0,0 +1,51 @@
+.promptActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding: 0 3px 8px;
+}
+
+.tagsContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  flex: 1;
+  min-width: 0;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.tagsContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.tagChip {
+  border-radius: 9999px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.boostButton {
+  flex-shrink: 0;
+}
+
+.skeletonChip {
+  border-radius: 9999px;
+  flex-shrink: 0;
+  height: 32px;
+  background: rgba(221, 234, 248, 0.06);
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}

package/src/components/StemGenerationForm/StemGenerationForm.jsx

@@ -39,6 +39,13 @@ export const StemGenerationForm = ({
   unmutedTracksCount,
   onMountConcurrency,
   onClear,
+  onInspireMe,
+  inspireMeLoading,
+  onBoost,
+  boostLoading,
+  suggestedTags,
+  onFetchSuggestedTags,
+  suggestedTagsLoading,
 }) => {
   const [isAnimating, setIsAnimating] = useState(false)
   const [presetSelected, setPresetSelected] = useState('2')
@@ -229,6 +236,13 @@ export const StemGenerationForm = ({
             i18n={i18n}
             onAddConditioningAudio={onAddConditioningAudio}
             onTextConditioningFocus={showConditioningTextPaywall}
+            onInspireMe={onInspireMe}
+            inspireMeLoading={inspireMeLoading}
+            onBoost={onBoost}
+            boostLoading={boostLoading}
+            suggestedTags={suggestedTags}
+            onFetchSuggestedTags={onFetchSuggestedTags}
+            suggestedTagsLoading={suggestedTagsLoading}
           />
         )}
 

package/src/components/StemGenerationForm/StemGenerationForm.stories.jsx

@@ -231,6 +231,37 @@ generateFromTrack = {
       description: 'Callback to clear generation state',
       control: false,
     },
+    onInspireMe: {
+      description:
+        'Callback when user clicks "Inspire me". Consumer fetches prompt and sets conditioningText.',
+      control: false,
+    },
+    inspireMeLoading: {
+      description: 'Loading state for the inspire action',
+      control: 'boolean',
+    },
+    onBoost: {
+      description:
+        'Callback when user clicks the boost (rocket) button. Consumer fetches boosted text and replaces conditioningText.',
+      control: false,
+    },
+    boostLoading: {
+      description: 'Loading state for the boost action',
+      control: 'boolean',
+    },
+    suggestedTags: {
+      description: 'Array of tag strings returned from upstream, shown as clickable chips next to the boost button',
+      control: false,
+    },
+    onFetchSuggestedTags: {
+      description:
+        'Callback fired (debounced) when the user types in the textarea. Receives the current text. Consumer fetches tags and passes them back via suggestedTags.',
+      control: false,
+    },
+    suggestedTagsLoading: {
+      description: 'Loading state for suggested tags. Shows skeleton chips when true.',
+      control: 'boolean',
+    },
   },
 }
 
@@ -701,3 +732,128 @@ export const WithCreativeControls = {
     unmutedTracksCount: 3,
   },
 }
+
+/**
+ * ## Inspire Me (Empty Textarea)
+ *
+ * Shows the "Inspire me" button below the textarea when no text has been entered.
+ * Clicking the button triggers the consumer to fetch and populate a prompt.
+ */
+export const InspireMeEmpty = {
+  args: {
+    formState: {
+      ...FORM_DEFAULTS,
+      conditioningText: '',
+    },
+    presets: [],
+    i18n: mockI18n,
+    loading: false,
+    limitReached: false,
+    showUpgradeConcurrency: false,
+    error: null,
+    unmutedTracksCount: 3,
+    onInspireMe: () => console.log('Inspire me clicked'),
+    inspireMeLoading: false,
+  },
+}
+
+/**
+ * ## Inspire Me (Loading)
+ *
+ * Shows the "Inspire me" button in its loading state while a prompt is being fetched.
+ */
+export const InspireMeLoading = {
+  args: {
+    formState: {
+      ...FORM_DEFAULTS,
+      conditioningText: '',
+    },
+    presets: [],
+    i18n: mockI18n,
+    loading: false,
+    limitReached: false,
+    showUpgradeConcurrency: false,
+    error: null,
+    unmutedTracksCount: 3,
+    onInspireMe: () => console.log('Inspire me clicked'),
+    inspireMeLoading: true,
+  },
+}
+
+/**
+ * ## Boost with Tags
+ *
+ * Shows the boost button and suggested tag chips when the textarea has text.
+ * Tags scroll horizontally and clicking a tag appends it to the prompt locally.
+ */
+export const BoostWithTags = {
+  args: {
+    formState: {
+      ...FORM_DEFAULTS,
+      conditioningText: 'Heavy rock drums with double bass pedal',
+    },
+    presets: [],
+    i18n: mockI18n,
+    loading: false,
+    limitReached: false,
+    showUpgradeConcurrency: false,
+    error: null,
+    unmutedTracksCount: 3,
+    onBoost: () => console.log('Boost clicked'),
+    boostLoading: false,
+    suggestedTags: ['lo-fi', 'dub', 'soul-fi', 'swing', 'lo-rez'],
+    onFetchSuggestedTags: (text) => console.log('Fetch tags for:', text),
+    suggestedTagsLoading: false,
+  },
+}
+
+/**
+ * ## Boost Loading
+ *
+ * Shows the boost button in its loading state while boost text is being fetched.
+ */
+export const BoostLoading = {
+  args: {
+    formState: {
+      ...FORM_DEFAULTS,
+      conditioningText: 'Smooth jazz guitar with warm tone',
+    },
+    presets: [],
+    i18n: mockI18n,
+    loading: false,
+    limitReached: false,
+    showUpgradeConcurrency: false,
+    error: null,
+    unmutedTracksCount: 3,
+    onBoost: () => console.log('Boost clicked'),
+    boostLoading: true,
+    suggestedTags: ['lo-fi', 'dub', 'soul-fi', 'swing', 'lo-rez'],
+    onFetchSuggestedTags: (text) => console.log('Fetch tags for:', text),
+    suggestedTagsLoading: false,
+  },
+}
+
+/**
+ * ## Suggested Tags Loading (Skeleton)
+ *
+ * Shows skeleton placeholders while suggested tags are being fetched from upstream.
+ */
+export const SuggestedTagsLoading = {
+  args: {
+    formState: {
+      ...FORM_DEFAULTS,
+      conditioningText: 'Funky bass groove with slap technique',
+    },
+    presets: [],
+    i18n: mockI18n,
+    loading: false,
+    limitReached: false,
+    showUpgradeConcurrency: false,
+    error: null,
+    unmutedTracksCount: 3,
+    onBoost: () => console.log('Boost clicked'),
+    boostLoading: false,
+    onFetchSuggestedTags: (text) => console.log('Fetch tags for:', text),
+    suggestedTagsLoading: true,
+  },
+}

package/src/components/TextArea/TextArea.module.css

@@ -26,7 +26,12 @@
   color: var(--neutral-alpha-9) !important;
   -webkit-text-fill-color: var(--neutral-alpha-9) !important;
   background-color: var(--neutral-alpha-3) !important;
+}
 
+.disabled textarea {
+  color: var(--neutral-alpha-9) !important;
+  -webkit-text-fill-color: var(--neutral-alpha-9) !important;
+  opacity: 1 !important;
 }
 
 .focusRing:where(:focus-within) {

package/src/icons/MagicWandIcon.jsx

@@ -0,0 +1,70 @@
+export const MagicWandIcon = ({ width, height, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M1.33301 14.667L10.333 5.66699"
+      stroke="currentColor"
+      strokeWidth="1.13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.33301 7.66699L10.333 5.66699"
+      stroke="currentColor"
+      strokeWidth="1.13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.667 1.33301V4.33301"
+      stroke="currentColor"
+      strokeWidth="1.13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.167 2.83301H10.167"
+      stroke="currentColor"
+      strokeWidth="1.13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5.33301 2.33301V4.33301"
+      stroke="currentColor"
+      strokeWidth="1.13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.33301 3.33301H4.33301"
+      stroke="currentColor"
+      strokeWidth="1.13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.333 9.33301V11.333"
+      stroke="currentColor"
+      strokeWidth="1.13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M14.333 10.333H12.333"
+      stroke="currentColor"
+      strokeWidth="1.13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+MagicWandIcon.displayName = 'MagicWandIcon'

package/src/icons.jsx

@@ -168,6 +168,7 @@ export { LoopSection3Icon } from './icons/LoopSection3Icon'
 export { NoLoopSection2Icon } from './icons/NoLoopSection2Icon'
 export { NoLoopSectionIcon } from './icons/NoLoopSectionIcon'
 export { NoLyricsIcon } from './icons/NoLyricsIcon'
+export { MagicWandIcon } from './icons/MagicWandIcon'
 export { MasteringIcon } from './icons/MasteringIcon'
 export { MonoIcon } from './icons/MonoIcon'
 export { MusicControlIcon } from './icons/MusicControlIcon'