Created PromptInput component and moved the other components to Metronome (#81)

* Add new button styles and button states

* Initial implementation of PromptInput components and styles in Metronome

* Updated button styling

* Fix other button stylings and add useTypingSimulation hook

* Add Popover component and fix styling issues

* Add Desktop Color Swatch Picker

* Add SwitchTabPicker component for selecting image styles

* Updated ThreeDots icon

* Modify Radio component to add support for displaying color swatch

* Add MobileOptionsPopover component for displaying the options in mobile

* Use MobileOptionsPopover component to display the mobile list and move the mockData

* Fix issue with Popover width in mobile

* Highlight button when menu is active

* Removed typing animation when enhancing prompt and just do a simple fade-in animation

* refactor: Use regular if/else and add comments to make  it easier to read

* refactor: Remove extra space and applied suggested usage of classnames

* refactor: Refactored use of classnames

* refactor: Refactored code to use classnames

* refactor: Remove setTimeout initially added to make sure popup closes first before calling onEnhancePrompt

* refactor: use classnames lib and add pointer-events: none in css

* refactor: use classnames lib and combined isControlled and onToggle condition

* Added comment to clarify what the line of code is doing

* refactor: Used the css variables

* refactor: Replace with css variables if available

* refactor: Simplified the use of classnames

* Increment version

Author: clowreed

components/Icons.es6.js

@@ -1991,10 +1991,10 @@ function Microphone ({ className, width='16', height='16', color = '#766bff', vi
 function ThreeDots ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 16 16' }) {
   return (
     <svg width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-      <circle cx="3" cy="8" r="1.5" fill={color} />
-      <circle cx="8" cy="8" r="1.5" fill={color} />
-      <circle cx="13" cy="8" r="1.5" fill={color} />
-    </svg>
+      <path d="M14.0844 3.86047C14.0844 5.50448 12.8558 6.83722 11.3404 6.83722C9.82492 6.83722 8.5964 5.50448 8.5964 3.86047C8.5964 2.21646 9.82492 0.883728 11.3404 0.883728C12.8558 0.883728 14.0844 2.21646 14.0844 3.86047Z" fill={color}/>
+      <path d="M5.85242 3.86047C5.85242 5.50448 4.6239 6.83722 3.10845 6.83722C1.59299 6.83722 0.364471 5.50448 0.364471 3.86047C0.364471 2.21646 1.59299 0.883728 3.10845 0.883728C4.6239 0.883728 5.85242 2.21646 5.85242 3.86047Z" fill={color}/>
+      <path d="M22.3163 3.86047C22.3163 5.50448 21.0878 6.83722 19.5723 6.83722C18.0568 6.83722 16.8283 5.50448 16.8283 3.86047C16.8283 2.21646 18.0568 0.883728 19.5723 0.883728C21.0878 0.883728 22.3163 2.21646 22.3163 3.86047Z" fill={color}/>
+  </svg>
   )
 }
 
@@ -2006,6 +2006,14 @@ function PencilFilled ({ className, width='16', height='16', color = '#766bff',
   )
 }
 
+function Stop ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 10 10' }) {
+  return (
+    <svg width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M0 2C0 0.89543 0.895431 0 2 0H8C9.10457 0 10 0.895431 10 2V8C10 9.10457 9.10457 10 8 10H2C0.89543 10 0 9.10457 0 8V2Z" fill={color} />
+    </svg>
+  )
+}
+
 const icons = [
   Check,
   Checkmark,
@@ -2205,7 +2213,8 @@ const icons = [
   AiLogo,
   Microphone,
   ThreeDots,
-  PencilFilled
+  PencilFilled,
+  Stop
 ]
 
 each(icons, (icon) => {
@@ -2232,6 +2241,5 @@ export { Check, Checkmark, Lock, Notice, Disabled, Help, Search, Draggable,
   Flag, Testimonials, Chart, Pause, HubspotLogo, AlignLeftV2, AlignRightV2, AlignCenterV2, AlignJustifyV2, Sidebar, Palette, Lightbox, Filter, Slider,
   Flash, Dashboard, Guides, Article, Pulse, Edit, ContentApproved, Dragger, PaperClip, Invoicing, Banking, Checkbox, Circle, Bank, Card, Contract,
   MinusCircle, RepeatCircle, BadgeCard, HeadphonesMic, CheckmarkLarge, NoticeOutlined, Archive, Questionnaire, Upload, ShareFeedback, Spaceship, Zap, Tip,
-  Webpage, LayoutAlternative, GlobeAlternative, AiAssist, Flows, Highlight, ArrowCircleUp, ArrowUp, EditColor, AiImage,
-  AiLogo, Microphone, ThreeDots, PencilFilled
+  Webpage, LayoutAlternative, GlobeAlternative, AiAssist, Flows, Highlight, ArrowCircleUp, ArrowUp, EditColor, AiImage, AiLogo, Microphone, ThreeDots, PencilFilled, Stop
 }

components/form/button/Button.es6.js

@@ -5,7 +5,37 @@ import classnames from 'classnames'
 /**
  * Buttons trigger actions when clicked.
  */
-function Button ({ label, badge, primary, danger, loading, superSmall, small, large, wide, icon, iconWithLabel, active, block, disabled, onClick, className, buttonRef, id, alternative, chevron, type, title }) {
+function Button ({ label, badge, primary, danger, loading, superSmall, small, large, wide, icon, iconWithLabel, active, block, disabled, onClick, className, buttonRef, id, alternative, chevron, type, title, round, roundedRectangle, hasSelection, selected, recording, highlighted }) {
+
+  const renderButtonContent = () => {
+    // Icon with label
+    if (iconWithLabel) {
+      return (
+        <React.Fragment>{icon} {label}</React.Fragment>
+      )
+    }
+
+    // Round button
+    if (round) {
+      // Show spinner if loading, otherwise show icon
+      if (loading) {
+        return <span className="button__spinner" />
+      } else {
+        return icon
+      }
+    }
+
+    // Regular button
+    // Show icon if provided, otherwise show spinner or label
+    if (icon) {
+      return icon
+    } else if (loading) {
+      return <span className="button__spinner" />
+    } else {
+      return label
+    }
+  }
+
   return (<button
     className={classnames({
       button: true,
@@ -21,6 +51,12 @@ function Button ({ label, badge, primary, danger, loading, superSmall, small, la
       'button--icon-with-label': iconWithLabel,
       'button--alternative': alternative,
       'button--has-chevron': chevron,
+      'button--round': round,
+      'button--rounded-rectangle': roundedRectangle,
+      'button--has-selection': hasSelection,
+      'button--selected': selected,
+      'button--recording-indicator': recording && round,
+      'button--highlighted': highlighted && (round || roundedRectangle),
       active,
     }, className)}
     disabled={disabled}
@@ -30,17 +66,12 @@ function Button ({ label, badge, primary, danger, loading, superSmall, small, la
     id={id}
     title={title}
   >
-    {iconWithLabel
-      ? <React.Fragment>{icon} {label}</React.Fragment>
-      : icon || (
-        loading
-          ? <span className="button__spinner" />
-          : label
-      )
-    }
+    {renderButtonContent()}
+
     {badge && (
       <span className="button__badge">{badge}</span>
     )}
+
     {chevron && (
       <span className="button__chevron"></span>
     )}
@@ -67,6 +98,12 @@ Button.defaultProps = {
   type: 'button',
   onClick: () => {},
   title: '',
+  round: false,
+  roundedRectangle: false,
+  hasSelection: false,
+  selected: false,
+  recording: false,
+  highlighted: false,
 }
 
 Button.propTypes = {
@@ -151,6 +188,31 @@ Button.propTypes = {
    * HTML title attribute of the button.
    */
   title: PropTypes.string,
+  /**
+   * Whether this should be a rounded button.
+   */
+  round: PropTypes.bool,
+  /**
+   * Whether this should be a rounded-rectangle button.
+   */
+  roundedRectangle: PropTypes.bool,
+  /**
+   * Whether this should have a selected item.
+   */
+  hasSelection: PropTypes.bool,
+  /**
+   * Whether this is actively selected.
+   */
+  selected: PropTypes.bool,
+  /**
+   * Whether this button is recording
+   */
+  recording: PropTypes.bool,
+
+  /**
+   * Whether this button is highlighted
+   */
+  highlighted: PropTypes.bool,
 }
 
 export default Button

components/form/color-swatch-picker/ColorSwatchPickerDesktop.es6.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function ColorSwatchPickerDesktop ({ colors, selectedColor, onChange }) {
+  const handleColorClick = (value) => {
+    if (selectedColor === value) {
+      onChange(null)
+    } else {
+      onChange(value)
+    }
+  }
+
+  return (
+    <div className="color-swatch-picker-desktop">
+      {colors.map((colorOption) => (
+        <div
+          key={colorOption.value}
+          className={`color-swatch-picker-desktop__color-swatch ${selectedColor === colorOption.value ? 'selected' : ''}`}
+          style={{ backgroundColor: colorOption.color }}
+          onClick={() => handleColorClick(colorOption.value)}
+          title={colorOption.label || colorOption.value}
+        />
+      ))}
+    </div>
+  )
+}
+
+ColorSwatchPickerDesktop.propTypes = {
+  colors: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      color: PropTypes.string.isRequired,
+      label: PropTypes.string
+    })
+  ).isRequired,
+  selectedColor: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+}
+
+ColorSwatchPickerDesktop.defaultProps = {
+  colors: [],
+  selectedColor: null,
+  onChange: () => {}
+}
+
+export default ColorSwatchPickerDesktop

components/form/prompt-input/PromptInput.es6.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+function PromptInput ({ children, className }) {
+  return (
+    <div className={classnames('ds-prompt-input', className)}>
+      {children}
+    </div>
+  )
+}
+
+PromptInput.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node
+}
+
+PromptInput.defaultProps = {
+  className: '',
+  children: null
+}
+
+export default PromptInput
+

components/form/prompt-input/PromptInputActions.es6.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+function PromptInputActions ({ children, className }) {
+  return (
+    <div className={classnames('ds-prompt-input__actions', className)}>
+      {children}
+    </div>
+  )
+}
+
+PromptInputActions.defaultProps = {
+  className: '',
+  children: null
+}
+
+PromptInputActions.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+}
+
+export default PromptInputActions
+

components/form/prompt-input/PromptInputCommands.es6.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+function PromptInputCommands (props) {
+  return (
+    <div className={classnames('ds-prompt-input__actions-commands', props.className)}>
+      {props.children}
+    </div>
+  )
+}
+
+PromptInputCommands.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+}
+
+PromptInputCommands.defaultProps = {
+  className: '',
+  children: null,
+}
+
+export default PromptInputCommands
+

components/form/prompt-input/PromptInputSelectors.es6.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+function PromptInputSelectors ({ children, className }) {
+  return (
+    <div className={classnames('ds-prompt-input__actions-selectors', className)}>
+      {children}
+    </div>
+  )
+}
+PromptInputSelectors.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+}
+
+PromptInputSelectors.defaultProps = {
+  className: '',
+  children: null,
+}
+export default PromptInputSelectors
+

components/form/prompt-input/PromptInputTextarea.es6.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+function PromptInputTextarea ({ className, placeholder, rows, textareaRef, value, onChange, disabled }) {
+  return (
+    <textarea
+      className={classnames('ds-prompt-input__textarea', className)}
+      placeholder={placeholder}
+      rows={rows}
+      ref={textareaRef}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+    />
+  )
+}
+
+PromptInputTextarea.defaultProps = {
+  placeholder: 'placeholder',
+  rows: 3,
+  textareaRef: null,
+  value: '',
+  onChange: () => {},
+  disabled: false
+}
+
+PromptInputTextarea.propTypes = {
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  rows: PropTypes.number,
+  textareaRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+  ]),
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool
+}
+
+export default PromptInputTextarea
+

components/form/prompt-input/index.js

@@ -0,0 +1,5 @@
+export { default as PromptInput } from './PromptInput.es6.js'
+export { default as PromptInputTextarea } from './PromptInputTextarea.es6.js'
+export { default as PromptInputActions } from './PromptInputActions.es6.js'
+export { default as PromptInputSelectors } from './PromptInputSelectors.es6.js'
+export { default as PromptInputCommands } from './PromptInputCommands.es6.js'