@memori.ai/memori-react 2.7.1 → 2.8.0

package/src/components/layouts/__snapshots__/FullPage.test.tsx.snap

@@ -279,60 +279,72 @@ exports[`renders FullPage layout unchanged 1`] = `
               <div
                 class="memori--language-chooser"
               >
-                <div
-                  class="memori-select"
+                <label
+                  for="user-lang-pref"
+                  id="user-lang-pref-label"
+                >
+                  write_and_speak.iWantToTalkToIn
+                </label>
+                <select
+                  aria-labelledby="user-lang-pref-label"
+                  class="memori-select--button"
+                  id="user-lang-pref"
                 >
-                  <input
-                    hidden=""
-                    name="day"
-                    readonly=""
-                    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-                    type="hidden"
+                  <option
+                    aria-label="Italiano"
                     value="IT"
-                  />
-                  <label
-                    class="memori-select--label"
-                    data-headlessui-state=""
-                    id="headlessui-listbox-label-:r7:"
                   >
-                    write_and_speak.iWantToTalkToIn
-                    :
-                  </label>
-                  <button
-                    aria-expanded="false"
-                    aria-haspopup="true"
-                    aria-label="write_and_speak.iWantToTalkToIn"
-                    aria-labelledby="headlessui-listbox-label-:r7: headlessui-listbox-button-:r8:"
-                    class="memori-select--button"
-                    data-headlessui-state=""
-                    id="headlessui-listbox-button-:r8:"
-                    type="button"
+                    Italiano
+                  </option>
+                  <option
+                    aria-label="English"
+                    value="EN"
                   >
-                    <span
-                      class="memori-select--value"
-                    >
-                      Italiano
-                    </span>
-                    <span
-                      class="memori-select--icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="currentColor"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 20 20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
+                    English
+                  </option>
+                  <option
+                    aria-label="Deutsch"
+                    value="DE"
+                  >
+                    Deutsch
+                  </option>
+                  <option
+                    aria-label="Español"
+                    value="ES"
+                  >
+                    Español
+                  </option>
+                  <option
+                    aria-label="Français"
+                    value="FR"
+                  >
+                    Français
+                  </option>
+                  <option
+                    aria-label="Português"
+                    value="PT"
+                  >
+                    Português
+                  </option>
+                  <option
+                    aria-label="Українська"
+                    value="UK"
+                  >
+                    Українська
+                  </option>
+                  <option
+                    aria-label="Русский"
+                    value="RU"
+                  >
+                    Русский
+                  </option>
+                  <option
+                    aria-label="Polski"
+                    value="PL"
+                  >
+                    Polski
+                  </option>
+                </select>
               </div>
               <button
                 class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"

package/src/components/layouts/__snapshots__/Totem.test.tsx.snap

@@ -330,60 +330,72 @@ exports[`renders Totem layout unchanged 1`] = `
             <div
               class="memori--language-chooser"
             >
-              <div
-                class="memori-select"
+              <label
+                for="user-lang-pref"
+                id="user-lang-pref-label"
+              >
+                write_and_speak.iWantToTalkToIn
+              </label>
+              <select
+                aria-labelledby="user-lang-pref-label"
+                class="memori-select--button"
+                id="user-lang-pref"
               >
-                <input
-                  hidden=""
-                  name="day"
-                  readonly=""
-                  style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-                  type="hidden"
+                <option
+                  aria-label="Italiano"
                   value="IT"
-                />
-                <label
-                  class="memori-select--label"
-                  data-headlessui-state=""
-                  id="headlessui-listbox-label-:r7:"
                 >
-                  write_and_speak.iWantToTalkToIn
-                  :
-                </label>
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="write_and_speak.iWantToTalkToIn"
-                  aria-labelledby="headlessui-listbox-label-:r7: headlessui-listbox-button-:r8:"
-                  class="memori-select--button"
-                  data-headlessui-state=""
-                  id="headlessui-listbox-button-:r8:"
-                  type="button"
+                  Italiano
+                </option>
+                <option
+                  aria-label="English"
+                  value="EN"
                 >
-                  <span
-                    class="memori-select--value"
-                  >
-                    Italiano
-                  </span>
-                  <span
-                    class="memori-select--icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      focusable="false"
-                      role="img"
-                      viewBox="0 0 20 20"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
+                  English
+                </option>
+                <option
+                  aria-label="Deutsch"
+                  value="DE"
+                >
+                  Deutsch
+                </option>
+                <option
+                  aria-label="Español"
+                  value="ES"
+                >
+                  Español
+                </option>
+                <option
+                  aria-label="Français"
+                  value="FR"
+                >
+                  Français
+                </option>
+                <option
+                  aria-label="Português"
+                  value="PT"
+                >
+                  Português
+                </option>
+                <option
+                  aria-label="Українська"
+                  value="UK"
+                >
+                  Українська
+                </option>
+                <option
+                  aria-label="Русский"
+                  value="RU"
+                >
+                  Русский
+                </option>
+                <option
+                  aria-label="Polski"
+                  value="PL"
+                >
+                  Polski
+                </option>
+              </select>
             </div>
             <button
               class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"

package/src/components/ui/Select.css

@@ -6,6 +6,7 @@
 .memori-select--button {
     position: relative;
     width: 100%;
+    max-width: 240px;
     min-height: 38px;
     padding-top: 0.5rem;
     padding-right: 2.5rem;
@@ -136,4 +137,4 @@ li.memori-select--option:focus {
 li.memori-select--option:focus {
     outline: 2px solid #63b3ed;
     outline-offset: 2px;
-}
+}

package/src/index.tsx

@@ -40,6 +40,7 @@ export interface Props {
   AZURE_COGNITIVE_SERVICES_TTS_KEY?: string;
   onStateChange?: (state?: DialogState) => void;
   additionalInfo?: WidgetProps['additionalInfo'];
+  customMediaRenderer?: WidgetProps['customMediaRenderer'];
 }
 
 const getPreferredLanguages = () => {
@@ -87,6 +88,7 @@ const Memori: React.FC<Props> = ({
   AZURE_COGNITIVE_SERVICES_TTS_KEY,
   onStateChange,
   additionalInfo,
+  customMediaRenderer,
 }) => {
   const [memori, setMemori] = useState<IMemori>();
   const [speechKey, setSpeechKey] = useState<string | undefined>(
@@ -213,6 +215,7 @@ const Memori: React.FC<Props> = ({
       }
       onStateChange={onStateChange}
       additionalInfo={additionalInfo}
+      customMediaRenderer={customMediaRenderer}
       {...(tag && pin ? { personification: { tag, pin } } : {})}
     />
   ) : (