feat: added isAvatar3D flag for making the Avatar Controls visible

memori-ai · Nov 7, 2024 · d36b0de · d36b0de
1 parent 2b0c360
commit d36b0de
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 50 deletions.
diff --git a/src/components/MemoriWidget/MemoriWidget.tsx b/src/components/MemoriWidget/MemoriWidget.tsx
@@ -3389,6 +3389,7 @@ const MemoriWidget = ({
           setAvatarType={setAvatarType}
           enablePositionControls={enablePositionControls}
           setEnablePositionControls={setEnablePositionControls}
+          isAvatar3d={!!integrationConfig?.avatarURL}
           additionalSettings={additionalSettings}
         />
       )}

diff --git a/src/components/SettingsDrawer/SettingsDrawer.tsx b/src/components/SettingsDrawer/SettingsDrawer.tsx
@@ -25,6 +25,7 @@ export interface Props {
   setAvatarType: (value: 'blob' | 'avatar3d') => void;
   enablePositionControls?: boolean;
   setEnablePositionControls: (value: boolean) => void;
+  isAvatar3d?: boolean;
 }
 
 const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
@@ -46,6 +47,7 @@ const SettingsDrawer = ({
   setAvatarType,
   enablePositionControls,
   setEnablePositionControls,
+  isAvatar3d,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -153,58 +155,70 @@ const SettingsDrawer = ({
             </RadioGroup.Option>
           </RadioGroup>
         </div>
-        <div className="memori-settings-drawer--field controls">
-          <label htmlFor="#avatarControls" style={{ marginBottom: '1rem' }}>
-            {t('write_and_speak.avatarControls') || 'Avatar controls'}:
-          </label>
 
-          <label htmlFor="avatarType" className="memori-settings-drawer-label">
-            {t('write_and_speak.avatarType') || 'Avatar type'}:
-          </label>
-          <RadioGroup
-            id="avatarType"
-            name="avatarType"
-            value={avatarType}
-            defaultValue={avatarType}
-            className="memori-settings-drawer--avatarType-radio"
-            onChange={(value: any) => {
-              setAvatarType && setAvatarType(value);
-              setLocalConfig('avatarType', value);
-            }}
-          >
-            <RadioGroup.Option
-              value="blob"
-              className="memori-settings-drawer--avatarType-radio-button"
-            >
-              {({ checked }) => (
-                <Button primary={checked} outlined={!checked}>
-                  {t('write_and_speak.blob') || 'Blob'}
-                </Button>
-              )}
-            </RadioGroup.Option>
-            <RadioGroup.Option
-              value="avatar3d"
-              className="memori-settings-drawer--avatarType-radio-button"
-            >
-              {({ checked }) => (
-                <Button primary={checked} outlined={!checked}>
-                  {t('write_and_speak.avatar3d') || 'Avatar 3D'}
-                </Button>
-              )}
-            </RadioGroup.Option>
-          </RadioGroup>
-        </div>
+        {isAvatar3d && (
+          <>
+            <div className="memori-settings-drawer--field controls">
+              <label htmlFor="#avatarControls" style={{ marginBottom: '1rem' }}>
+                {t('write_and_speak.avatarControls') || 'Avatar controls'}:
+              </label>
+
+              <label
+                htmlFor="avatarType"
+                className="memori-settings-drawer-label"
+              >
+                {t('write_and_speak.avatarType') || 'Avatar type'}:
+              </label>
+              <RadioGroup
+                id="avatarType"
+                name="avatarType"
+                value={avatarType}
+                defaultValue={avatarType}
+                className="memori-settings-drawer--avatarType-radio"
+                onChange={(value: any) => {
+                  setAvatarType && setAvatarType(value);
+                  setLocalConfig('avatarType', value);
+                }}
+              >
+                <RadioGroup.Option
+                  value="blob"
+                  className="memori-settings-drawer--avatarType-radio-button"
+                >
+                  {({ checked }) => (
+                    <Button primary={checked} outlined={!checked}>
+                      {t('write_and_speak.blob') || 'Blob'}
+                    </Button>
+                  )}
+                </RadioGroup.Option>
+                <RadioGroup.Option
+                  value="avatar3d"
+                  className="memori-settings-drawer--avatarType-radio-button"
+                >
+                  {({ checked }) => (
+                    <Button primary={checked} outlined={!checked}>
+                      {t('write_and_speak.avatar3d') || 'Avatar 3D'}
+                    </Button>
+                  )}
+                </RadioGroup.Option>
+              </RadioGroup>
+            </div>
+
+            <div className="memori-settings-drawer--field">
+              <Checkbox
+                label={
+                  t('write_and_speak.enablePositionControls') ||
+                  'Enable position controls'
+                }
+                name="enablePositionControls"
+                checked={enablePositionControls}
+                onChange={e => {
+                  setEnablePositionControls(e.target.checked);
+                }}
+              />
+            </div>
+          </>
+        )}
 
-        <div className="memori-settings-drawer--field">
-          <Checkbox
-            label={t('write_and_speak.enablePositionControls') || 'Enable position controls'}
-            name="enablePositionControls"
-            checked={enablePositionControls}
-            onChange={e => {
-              setEnablePositionControls(e.target.checked);
-            }}
-          />
-        </div>
         <div className="memori-settings-drawer--field">
           <Checkbox
             label={t('write_and_speak.hideEmissionsLabel') || 'Hide emissions'}