feat(client): audio ui block implementation

packages/client/src/components/block-defaults/audio-block/AudioBlock.tsx

@@ -0,0 +1,49 @@
+import { observer } from 'mobx-react-lite';
+
+import { useBlock } from '@/hooks';
+import { BlockDef, BlockComponent } from '@/stores';
+
+import { styled } from '@mui/material';
+
+const StyledLabel = styled('span')(({ theme }) => ({
+    marginBottom: '4px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap: '4px',
+}));
+
+export interface AudioBlockDef extends BlockDef<'audio-player'> {
+    widget: 'audio-player';
+    data: {
+        label: string;
+        autoplay: boolean;
+        controls: boolean;
+        loop: boolean;
+        source: string;
+    };
+    listeners: {
+        onClick: true;
+    };
+}
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    padding: '4px',
+}));
+
+export const AudioBlock: BlockComponent = observer(({ id }) => {
+    const { attrs, data } = useBlock<AudioBlockDef>(id);
+
+    return (
+        <StyledContainer {...attrs}>
+            <StyledLabel>{data.label}</StyledLabel>
+            <audio
+                controls={data.controls}
+                autoPlay={data.autoplay}
+                loop={data.loop}
+                src={data.source}
+            ></audio>
+        </StyledContainer>
+    );
+});

packages/client/src/components/block-defaults/audio-block/config.tsx

@@ -0,0 +1,86 @@
+import { CSSProperties } from 'react';
+import { BlockConfig } from '@/stores';
+import { InputSettings, QueryInputSettings } from '@/components/block-settings';
+
+import { AudioBlockDef, AudioBlock } from './AudioBlock';
+import HeadsetIcon from '@mui/icons-material/Headset';
+import { BLOCK_TYPE_ACTION } from '../block-defaults.constants';
+import { SwitchSettings } from '@/components/block-settings/shared/SwitchSettings';
+
+export const DefaultStyles: CSSProperties = {};
+
+// export the config for the block
+export const config: BlockConfig<AudioBlockDef> = {
+    widget: 'audio-player',
+    type: BLOCK_TYPE_ACTION,
+    data: {
+        label: 'Audio Player',
+        autoplay: false,
+        controls: true,
+        loop: false,
+        source: '',
+    },
+    listeners: {
+        onClick: [],
+    },
+    slots: {},
+    render: AudioBlock,
+    icon: HeadsetIcon,
+    contentMenu: [
+        {
+            name: 'General',
+            children: [
+                {
+                    description: 'Label',
+                    render: ({ id }) => (
+                        <InputSettings id={id} label="Label" path="label" />
+                    ),
+                },
+                {
+                    description: 'Audio URL',
+                    render: ({ id }) => (
+                        <QueryInputSettings
+                            id={id}
+                            label="Audio URL"
+                            path="source"
+                        />
+                    ),
+                },
+                {
+                    description: 'Autoplay',
+                    render: ({ id }) => (
+                        <SwitchSettings
+                            id={id}
+                            label="Enable Autoplay"
+                            path="autoplay"
+                            description="This setting will enable autoplay of the audio"
+                        />
+                    ),
+                },
+                {
+                    description: 'Controls',
+                    render: ({ id }) => (
+                        <SwitchSettings
+                            id={id}
+                            label="Enable controls"
+                            path="controls"
+                            description="This setting will enable controls like pause, play, volume-control on the audio player"
+                        />
+                    ),
+                },
+                {
+                    description: 'Loop',
+                    render: ({ id }) => (
+                        <SwitchSettings
+                            id={id}
+                            label="Enable loop"
+                            path="loop"
+                            description="This setting will play the audio in a loop"
+                        />
+                    ),
+                },
+            ],
+        },
+    ],
+    styleMenu: [],
+};

packages/client/src/components/block-defaults/audio-block/index.ts

@@ -0,0 +1,2 @@
+export * from './config';
+export * from './AudioBlock';

packages/client/src/components/block-defaults/index.ts

@@ -1,4 +1,5 @@
 import { Registry } from '@/stores';
+import { config as AudioBlockConfig, AudioBlockDef } from './audio-block';
 import { config as BodyBlockConfig, BodyBlockDef } from './body-block';
 import { config as ButtonBlockConfig, ButtonBlockDef } from './button-block';
 import { config as QueryBlockConfig, QueryBlockDef } from './query-block';
@@ -51,6 +52,7 @@ import { config as ModalBlockConfig, ModalBlockDef } from './modal-block';
 import { config as StepperBlockConfig, StepperBlockDef } from './stepper-block';
 
 export type DefaultBlockDefinitions =
+    | AudioBlockDef
     | BodyBlockDef
     | ButtonBlockDef
     | CheckboxBlockDef
@@ -82,6 +84,7 @@ export type DefaultBlockDefinitions =
     | ModalBlockDef;
 
 export const DefaultBlocks: Registry<DefaultBlockDefinitions> = {
+    [AudioBlockConfig.widget]: AudioBlockConfig,
     [ButtonBlockConfig.widget]: ButtonBlockConfig,
     [CheckboxBlockConfig.widget]: CheckboxBlockConfig,
     [CompareLLMBlockConfig.widget]: CompareLLMBlockConfig,
@@ -115,6 +118,7 @@ export function getTypeForBlock(widget: string) {
 }
 
 export {
+    AudioBlockConfig,
     ButtonBlockConfig,
     ContainerBlockConfig,
     CheckboxBlockConfig,

packages/client/src/components/designer/AddBlocksMenuCard.tsx

@@ -15,6 +15,7 @@ const StyledCard = styled(Card)(({ theme }) => ({
     border: `1px solid rgba(0, 0, 0, 0.23)`,
     //TODO: styled needs to be updated to match the theme
     borderRadius: '12px', //  theme.shape.borderRadiusLg
+    justifyContent: 'center',
 }));
 
 export interface AddBlocksMenuItemProps {

packages/client/src/components/designer/designer.constants.ts

@@ -1,5 +1,6 @@
 import { BlockJSON } from '@/stores';
 
+import BLOCK_AUDIO_PLAYER from '@/assets/img/BLOCK_AUDIO_PLAYER.png';
 import BLOCK_BUTTON from '@/assets/img/BLOCK_BUTTON.png';
 import BLOCK_CHECKBOX from '@/assets/img/BLOCK_CHECKBOX.png';
 import BLOCK_CONTAINER from '@/assets/img/BLOCK_CONTAINER.png';
@@ -116,6 +117,23 @@ export interface AddBlocksMenuItem {
  * Show the default blocks menu
  */
 export const DEFAULT_MENU: AddBlocksMenuItem[] = [
+    {
+        section: SECTION_INPUT,
+        image: BLOCK_AUDIO_PLAYER,
+        name: 'Audio Player',
+        json: {
+            widget: 'audio-player',
+            data: {
+                label: 'Audio Player',
+                autoplay: false,
+                controls: true,
+                loop: false,
+                source: '',
+            },
+            listeners: {},
+            slots: {} as BlockJSON['slots'],
+        },
+    },
     {
         section: SECTION_INPUT,
         image: BLOCK_BUTTON,