npm - @nyaruka/temba-components - Versions diffs - 0.131.2 → 0.131.3 - Mend

@nyaruka/temba-components 0.131.2 → 0.131.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (223) hide show

package/CHANGELOG.md +14 -0
package/demo/components/floating-tabs/example.html +400 -0
package/demo/components/flow/index.html +1 -1
package/demo/data/flows/sample-flow.json +41 -2
package/demo/data/flows/voicemail.json +613 -0
package/demo/index.html +6 -0
package/dist/locales/es.js +5 -5
package/dist/locales/es.js.map +1 -1
package/dist/locales/fr.js +5 -5
package/dist/locales/fr.js.map +1 -1
package/dist/locales/locale-codes.js +11 -2
package/dist/locales/locale-codes.js.map +1 -1
package/dist/locales/pt.js +5 -5
package/dist/locales/pt.js.map +1 -1
package/dist/temba-components.js +1109 -535
package/dist/temba-components.js.map +1 -1
package/out-tsc/src/display/FloatingTab.js +167 -0
package/out-tsc/src/display/FloatingTab.js.map +1 -0
package/out-tsc/src/display/ProgressBar.js +22 -2
package/out-tsc/src/display/ProgressBar.js.map +1 -1
package/out-tsc/src/events.js.map +1 -1
package/out-tsc/src/flow/CanvasNode.js +165 -31
package/out-tsc/src/flow/CanvasNode.js.map +1 -1
package/out-tsc/src/flow/Editor.js +857 -3
package/out-tsc/src/flow/Editor.js.map +1 -1
package/out-tsc/src/flow/NodeEditor.js +239 -19
package/out-tsc/src/flow/NodeEditor.js.map +1 -1
package/out-tsc/src/flow/NodeTypeSelector.js +44 -3
package/out-tsc/src/flow/NodeTypeSelector.js.map +1 -1
package/out-tsc/src/flow/StickyNote.js +12 -3
package/out-tsc/src/flow/StickyNote.js.map +1 -1
package/out-tsc/src/flow/actions/add_contact_groups.js +2 -1
package/out-tsc/src/flow/actions/add_contact_groups.js.map +1 -1
package/out-tsc/src/flow/actions/add_contact_urn.js +2 -1
package/out-tsc/src/flow/actions/add_contact_urn.js.map +1 -1
package/out-tsc/src/flow/actions/add_input_labels.js +2 -1
package/out-tsc/src/flow/actions/add_input_labels.js.map +1 -1
package/out-tsc/src/flow/actions/play_audio.js +2 -1
package/out-tsc/src/flow/actions/play_audio.js.map +1 -1
package/out-tsc/src/flow/actions/remove_contact_groups.js +2 -1
package/out-tsc/src/flow/actions/remove_contact_groups.js.map +1 -1
package/out-tsc/src/flow/actions/request_optin.js +1 -0
package/out-tsc/src/flow/actions/request_optin.js.map +1 -1
package/out-tsc/src/flow/actions/say_msg.js +2 -1
package/out-tsc/src/flow/actions/say_msg.js.map +1 -1
package/out-tsc/src/flow/actions/send_broadcast.js +2 -1
package/out-tsc/src/flow/actions/send_broadcast.js.map +1 -1
package/out-tsc/src/flow/actions/send_email.js +2 -1
package/out-tsc/src/flow/actions/send_email.js.map +1 -1
package/out-tsc/src/flow/actions/send_msg.js +93 -3
package/out-tsc/src/flow/actions/send_msg.js.map +1 -1
package/out-tsc/src/flow/actions/set_contact_channel.js +2 -1
package/out-tsc/src/flow/actions/set_contact_channel.js.map +1 -1
package/out-tsc/src/flow/actions/set_contact_field.js +2 -1
package/out-tsc/src/flow/actions/set_contact_field.js.map +1 -1
package/out-tsc/src/flow/actions/set_contact_language.js +2 -1
package/out-tsc/src/flow/actions/set_contact_language.js.map +1 -1
package/out-tsc/src/flow/actions/set_contact_name.js +2 -1
package/out-tsc/src/flow/actions/set_contact_name.js.map +1 -1
package/out-tsc/src/flow/actions/set_contact_status.js +2 -1
package/out-tsc/src/flow/actions/set_contact_status.js.map +1 -1
package/out-tsc/src/flow/actions/set_run_result.js +2 -1
package/out-tsc/src/flow/actions/set_run_result.js.map +1 -1
package/out-tsc/src/flow/actions/start_session.js +2 -1
package/out-tsc/src/flow/actions/start_session.js.map +1 -1
package/out-tsc/src/flow/config.js +2 -10
package/out-tsc/src/flow/config.js.map +1 -1
package/out-tsc/src/flow/nodes/shared.js +54 -0
package/out-tsc/src/flow/nodes/shared.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_airtime.js +9 -3
package/out-tsc/src/flow/nodes/split_by_airtime.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_contact_field.js +8 -3
package/out-tsc/src/flow/nodes/split_by_contact_field.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_expression.js +8 -3
package/out-tsc/src/flow/nodes/split_by_expression.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_groups.js +8 -3
package/out-tsc/src/flow/nodes/split_by_groups.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_intent.js +3 -2
package/out-tsc/src/flow/nodes/split_by_intent.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_llm.js +9 -2
package/out-tsc/src/flow/nodes/split_by_llm.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_llm_categorize.js +9 -2
package/out-tsc/src/flow/nodes/split_by_llm_categorize.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_random.js +8 -2
package/out-tsc/src/flow/nodes/split_by_random.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_resthook.js +8 -3
package/out-tsc/src/flow/nodes/split_by_resthook.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_run_result.js +8 -3
package/out-tsc/src/flow/nodes/split_by_run_result.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_scheme.js +8 -3
package/out-tsc/src/flow/nodes/split_by_scheme.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_subflow.js +8 -2
package/out-tsc/src/flow/nodes/split_by_subflow.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_ticket.js +8 -2
package/out-tsc/src/flow/nodes/split_by_ticket.js.map +1 -1
package/out-tsc/src/flow/nodes/split_by_webhook.js +8 -2
package/out-tsc/src/flow/nodes/split_by_webhook.js.map +1 -1
package/out-tsc/src/flow/nodes/wait_for_digits.js +3 -2
package/out-tsc/src/flow/nodes/wait_for_digits.js.map +1 -1
package/out-tsc/src/flow/nodes/wait_for_menu.js +3 -2
package/out-tsc/src/flow/nodes/wait_for_menu.js.map +1 -1
package/out-tsc/src/flow/nodes/wait_for_response.js +8 -3
package/out-tsc/src/flow/nodes/wait_for_response.js.map +1 -1
package/out-tsc/src/flow/types.js +15 -0
package/out-tsc/src/flow/types.js.map +1 -1
package/out-tsc/src/layout/FloatingWindow.js +346 -0
package/out-tsc/src/layout/FloatingWindow.js.map +1 -0
package/out-tsc/src/live/ContactChat.js +3 -19
package/out-tsc/src/live/ContactChat.js.map +1 -1
package/out-tsc/src/locales/es.js +5 -5
package/out-tsc/src/locales/es.js.map +1 -1
package/out-tsc/src/locales/fr.js +5 -5
package/out-tsc/src/locales/fr.js.map +1 -1
package/out-tsc/src/locales/locale-codes.js +11 -2
package/out-tsc/src/locales/locale-codes.js.map +1 -1
package/out-tsc/src/locales/pt.js +5 -5
package/out-tsc/src/locales/pt.js.map +1 -1
package/out-tsc/src/store/AppState.js +67 -0
package/out-tsc/src/store/AppState.js.map +1 -1
package/out-tsc/temba-modules.js +4 -0
package/out-tsc/temba-modules.js.map +1 -1
package/out-tsc/test/temba-floating-tab.test.js +91 -0
package/out-tsc/test/temba-floating-tab.test.js.map +1 -0
package/out-tsc/test/temba-floating-window.test.js +301 -0
package/out-tsc/test/temba-floating-window.test.js.map +1 -0
package/out-tsc/test/temba-flow-editor-node.test.js +117 -0
package/out-tsc/test/temba-flow-editor-node.test.js.map +1 -1
package/out-tsc/test/temba-localization.test.js +471 -0
package/out-tsc/test/temba-localization.test.js.map +1 -0
package/out-tsc/test/temba-node-type-selector.test.js +150 -0
package/out-tsc/test/temba-node-type-selector.test.js.map +1 -1
package/out-tsc/test/utils.test.js +18 -0
package/out-tsc/test/utils.test.js.map +1 -1
package/package.json +1 -1
package/screenshots/truth/floating-tab/default.png +0 -0
package/screenshots/truth/floating-tab/gray.png +0 -0
package/screenshots/truth/floating-tab/green.png +0 -0
package/screenshots/truth/floating-tab/hidden.png +0 -0
package/screenshots/truth/floating-tab/hover.png +0 -0
package/screenshots/truth/floating-tab/purple.png +0 -0
package/screenshots/truth/floating-window/chromeless.png +0 -0
package/screenshots/truth/floating-window/custom-size.png +0 -0
package/screenshots/truth/floating-window/default.png +0 -0
package/screenshots/truth/floating-window/with-header.png +0 -0
package/screenshots/truth/node-type-selector/action-mode.png +0 -0
package/screenshots/truth/node-type-selector/split-mode.png +0 -0
package/screenshots/truth/nodes/split_by_llm_categorize/editor/feedback-categorization.png +0 -0
package/src/display/FloatingTab.ts +174 -0
package/src/display/ProgressBar.ts +22 -2
package/src/events.ts +2 -4
package/src/flow/CanvasNode.ts +190 -32
package/src/flow/Editor.ts +1040 -3
package/src/flow/NodeEditor.ts +317 -19
package/src/flow/NodeTypeSelector.ts +47 -3
package/src/flow/StickyNote.ts +12 -3
package/src/flow/actions/add_contact_groups.ts +2 -1
package/src/flow/actions/add_contact_urn.ts +3 -1
package/src/flow/actions/add_input_labels.ts +2 -1
package/src/flow/actions/play_audio.ts +2 -1
package/src/flow/actions/remove_contact_groups.ts +3 -1
package/src/flow/actions/request_optin.ts +1 -0
package/src/flow/actions/say_msg.ts +2 -1
package/src/flow/actions/send_broadcast.ts +2 -1
package/src/flow/actions/send_email.ts +3 -1
package/src/flow/actions/send_msg.ts +134 -3
package/src/flow/actions/set_contact_channel.ts +2 -1
package/src/flow/actions/set_contact_field.ts +2 -1
package/src/flow/actions/set_contact_language.ts +3 -1
package/src/flow/actions/set_contact_name.ts +2 -1
package/src/flow/actions/set_contact_status.ts +2 -1
package/src/flow/actions/set_run_result.ts +2 -1
package/src/flow/actions/start_session.ts +3 -1
package/src/flow/config.ts +2 -12
package/src/flow/nodes/shared.ts +70 -1
package/src/flow/nodes/split_by_airtime.ts +20 -3
package/src/flow/nodes/split_by_contact_field.ts +13 -3
package/src/flow/nodes/split_by_expression.ts +13 -3
package/src/flow/nodes/split_by_groups.ts +13 -3
package/src/flow/nodes/split_by_intent.ts +3 -2
package/src/flow/nodes/split_by_llm.ts +19 -2
package/src/flow/nodes/split_by_llm_categorize.ts +19 -2
package/src/flow/nodes/split_by_random.ts +12 -2
package/src/flow/nodes/split_by_resthook.ts +13 -3
package/src/flow/nodes/split_by_run_result.ts +13 -3
package/src/flow/nodes/split_by_scheme.ts +13 -3
package/src/flow/nodes/split_by_subflow.ts +12 -2
package/src/flow/nodes/split_by_ticket.ts +12 -2
package/src/flow/nodes/split_by_webhook.ts +12 -2
package/src/flow/nodes/wait_for_digits.ts +3 -2
package/src/flow/nodes/wait_for_menu.ts +3 -2
package/src/flow/nodes/wait_for_response.ts +13 -3
package/src/flow/types.ts +47 -0
package/src/layout/FloatingWindow.ts +386 -0
package/src/live/ContactChat.ts +4 -19
package/src/locales/es.ts +18 -13
package/src/locales/fr.ts +18 -13
package/src/locales/locale-codes.ts +11 -2
package/src/locales/pt.ts +18 -13
package/src/store/AppState.ts +104 -0
package/static/api/llms.json +18 -0
package/temba-modules.ts +4 -0
package/test/temba-floating-tab.test.ts +110 -0
package/test/temba-floating-window.test.ts +477 -0
package/test/temba-flow-editor-node.test.ts +144 -0
package/test/temba-localization.test.ts +611 -0
package/test/temba-node-type-selector.test.ts +203 -0
package/test/utils.test.ts +20 -0
package/test-assets/contacts/history.json +5 -6
package/test-assets/select/llms.json +2 -2
package/web-dev-server.config.mjs +47 -1
package/web-test-runner.config.mjs +0 -1
package/out-tsc/src/flow/nodes/wait_for_audio.js +0 -7
package/out-tsc/src/flow/nodes/wait_for_audio.js.map +0 -1
package/out-tsc/src/flow/nodes/wait_for_image.js +0 -7
package/out-tsc/src/flow/nodes/wait_for_image.js.map +0 -1
package/out-tsc/src/flow/nodes/wait_for_location.js +0 -7
package/out-tsc/src/flow/nodes/wait_for_location.js.map +0 -1
package/out-tsc/src/flow/nodes/wait_for_video.js +0 -7
package/out-tsc/src/flow/nodes/wait_for_video.js.map +0 -1
package/src/flow/nodes/wait_for_audio.ts +0 -7
package/src/flow/nodes/wait_for_image.ts +0 -7
package/src/flow/nodes/wait_for_location.ts +0 -7
package/src/flow/nodes/wait_for_video.ts +0 -7

package/CHANGELOG.md CHANGED Viewed

@@ -4,8 +4,22 @@ All notable changes to this project will be documented in this file. Dates are d
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+#### [v0.131.3](https://github.com/nyaruka/temba-components/compare/v0.131.2...v0.131.3)
+- Chat history tweaks [`#754`](https://github.com/nyaruka/temba-components/pull/754)
+- Localization tab [`#753`](https://github.com/nyaruka/temba-components/pull/753)
+- Add localization editing framework for flow actions and router categories [`#747`](https://github.com/nyaruka/temba-components/pull/747)
+- Bump min-document from 2.19.0 to 2.19.2 [`#752`](https://github.com/nyaruka/temba-components/pull/752)
+- [WIP] Add a generic tab and floating window component [`#751`](https://github.com/nyaruka/temba-components/pull/751)
+- Add flow type and feature filtering to NodeTypeSelector [`#749`](https://github.com/nyaruka/temba-components/pull/749)
+- Add auto translate and category toggles [`cb1257c`](https://github.com/nyaruka/temba-components/commit/cb1257c2044ec8e5b7072274bdc0183811059229)
+- Add voice example file and improve filtering [`a00a21d`](https://github.com/nyaruka/temba-components/commit/a00a21dfeeb553da8f88ba2643792eb6c058a890)
+- Add FloatingTab and FloatingWindow components with tests [`38b3b13`](https://github.com/nyaruka/temba-components/commit/38b3b13bad1a961cd672ae2c246bd06e9adc7b51)
 #### [v0.131.2](https://github.com/nyaruka/temba-components/compare/v0.131.1...v0.131.2)
+> 14 November 2025
 - Support `_status` fields on msg events that are objects [`#745`](https://github.com/nyaruka/temba-components/pull/745)
 - Fix validate methods to use FormData instead of action types [`#742`](https://github.com/nyaruka/temba-components/pull/742)
 - Add mock channels endpoint for demo environment [`#744`](https://github.com/nyaruka/temba-components/pull/744)

package/demo/components/floating-tabs/example.html ADDED Viewed

@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Floating Tab & Window Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+    <style>
+      body {
+        min-height: 100vh;
+        position: relative;
+      }
+      .content {
+        padding: 20px;
+        max-width: 800px;
+      }
+      .phone-simulator {
+        padding: 30px;
+        position: relative;
+      }
+      .phone-frame {
+        border-radius: 40px;
+        border: 8px solid #1f2937;
+        box-shadow: 0 0px 30px rgba(0, 0, 0, 0.4);
+        background: #000;
+        position: relative;
+        overflow:hidden;
+      }
+      .phone-top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+        cursor: grab;
+      }
+      .phone-notch {
+        background: transparent;
+        height: 50px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 20px;
+      }
+      .phone-notch::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
+        z-index: -1;
+      }
+      .dynamic-island {
+        top: 10px;
+        left: 50%;
+        width: 120px;
+        height: 30px;
+        background: #000;
+        border-radius: 20px;
+        z-index: 1;
+      }
+      .phone-notch .time {
+        color: #000;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .phone-notch .status-icons {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+      }
+      .phone-notch .status-icons span {
+        color: #000;
+        font-size: 14px;
+      }
+      .phone-header {
+        background: transparent;
+        padding: 10px 15px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        cursor: move;
+        user-select: none;
+        border-bottom: none;
+        pointer-events: all;
+      }
+      .close-btn {
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 50%;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width:29px;
+      }
+      .close-btn:hover {
+        color: rgba(0, 0, 0, 0.7);
+      }
+      .phone-screen {
+        background: white;
+        padding: 15px;
+        padding-top: 75px;
+        padding-bottom: 60px;
+        height:470px;
+        overflow-y: auto;
+        flex-direction: column-reverse;
+        display: flex;
+      }
+      .message {
+        padding: 10px 14px;
+        margin-bottom: 8px;
+        border-radius: 18px;
+        max-width: 70%;
+        font-size: 15px;
+        line-height: 1.4;
+      }
+      .message.incoming {
+        background: #e5e5ea;
+        color: #000;
+        margin-right: auto;
+        border-bottom-left-radius: 4px;
+      }
+      .message.outgoing {
+        background: #007aff;
+        color: white;
+        margin-left: auto;
+        text-align: left;
+        border-bottom-right-radius: 4px;
+      }
+      .message-input {
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 70%, transparent 100%);
+        padding: 8px 16px;
+        border-top: none;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        z-index: 10;
+      }
+      .message-input input {
+        flex: 1;
+        border: 1px solid #c6c6c8;
+        border-radius: 20px;
+        padding: 8px 15px;
+        font-size: 15px;
+        margin-bottom:5px;
+        background: white;
+        border: none;
+        outline:none;
+      }
+      .message-input input::placeholder {
+        color: #8e8e93;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="content">
+      <h1>Floating Tab & Window Examples</h1>
+      <p><a href="/demo/index.html">← Back to main demo</a></p>
+      <div class="example">
+        <h3>Phone Simulator</h3>
+        <p>
+          Click the green phone icon on the right to open a phone simulator
+          window. The window can be dragged around the screen.
+        </p>
+        <p>
+          Hover over the tab to see the label animate in. Click again to close
+          the window.
+        </p>
+      </div>
+      <div class="example">
+        <h3>Multiple Tabs</h3>
+        <p>
+          Multiple floating tabs can be displayed at once, each with different
+          colors and purposes.
+        </p>
+        <ul>
+          <li><strong>Phone (Green):</strong> Phone simulator window</li>
+          <li><strong>Clock (Purple):</strong> Revision history window</li>
+          <li><strong>Globe (Gray):</strong> Translation/localization window</li>
+        </ul>
+      </div>
+      <div class="example">
+        <h3>Usage</h3>
+        <pre><code>&lt;!-- Floating Tab --&gt;
+&lt;temba-floating-tab
+  id="phone-tab"
+  icon="phone"
+  label="Phone Simulator"
+  color="#10b981"
+  top="100"
+&gt;&lt;/temba-floating-tab&gt;
+&lt;!-- Floating Window --&gt;
+&lt;temba-floating-window
+  id="phone-window"
+  title="Phone Simulator"
+  width="250"
+  height="700"
+  top="100"
+&gt;
+  &lt;!-- Your content here --&gt;
+&lt;/temba-floating-window&gt;</code></pre>
+      </div>
+    </div>
+    <!-- Phone Simulator Tab & Window -->
+         <temba-floating-window
+      id="translation-window"
+      header="Flow Translation"
+      width="350"
+      height="600"
+      top="100"
+      color="#6b7280"
+    >
+      <div style="padding: 20px">
+        <h4 style="margin-top: 0">Translate Flow</h4>
+        <div style="display: flex; flex-direction: column; gap: 15px">
+          <div>
+            <label style="display: block; margin-bottom: 5px; font-weight: 500"
+              >Language</label
+            >
+            <select style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #d1d5db">
+              <option>English</option>
+              <option>Spanish</option>
+              <option>French</option>
+              <option>Portuguese</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </temba-floating-window>
+    <temba-floating-window
+      id="phone-window"
+      width="375"
+      height="720"
+      top="60"
+      chromeless
+    >
+      <div class="phone-simulator">
+        <div class="phone-frame">
+          <div class="phone-top drag-handle">
+            <div class="phone-notch">
+              <div style="width:29px;"></div>
+              <div class="dynamic-island"></div>
+              <button class="close-btn" onclick="document.getElementById('phone-window').close()">
+                <temba-icon name="x" clickable size="2"></temba-icon>
+              </button>
+            </div>
+          </div>
+          <div class="phone-screen">
+            <div class="message outgoing">Always do!</div>
+            <div class="message incoming">Drive safe!</div>
+            <div class="message outgoing">Can't wait!</div>
+            <div class="message incoming">See you soon!</div>
+            <div class="message outgoing">On it!</div>
+            <div class="message incoming">Don't forget the salad dressing!</div>
+            <div class="message outgoing">Sure thing, see you soon!</div>
+            <div class="message incoming">Great! Also need some tomatoes.</div>
+            <div class="message outgoing">I got broccoli and asparagus</div>
+            <div class="message incoming">Can you buy some veggies on your way home?</div>
+          </div>
+          <div class="message-input">
+            <input type="text" placeholder="Enter Message"/>
+          </div>
+        </div>
+      </div>
+    </temba-floating-window>
+    <temba-floating-window
+      id="history-window"
+      header="Revision History"
+      width="300"
+      height="500"
+      top="100"
+      color="#8b5cf6"
+    >
+      <div style="padding: 20px">
+        <h4 style="margin-top: 0">Recent Changes</h4>
+        <ul style="list-style: none; padding: 0">
+          <li style="margin-bottom: 15px; padding: 10px; background: #f3f4f6; border-radius: 8px">
+            <strong>2 hours ago</strong><br />
+            Updated flow configuration
+          </li>
+          <li style="margin-bottom: 15px; padding: 10px; background: #f3f4f6; border-radius: 8px">
+            <strong>Yesterday</strong><br />
+            Added new message template
+          </li>
+          <li style="margin-bottom: 15px; padding: 10px; background: #f3f4f6; border-radius: 8px">
+            <strong>3 days ago</strong><br />
+            Modified contact fields
+          </li>
+        </ul>
+      </div>
+    </temba-floating-window>
+    <temba-floating-tab
+      id="phone-tab"
+      icon="simulator"
+      label="Phone Simulator"
+      color="#10b981"
+    ></temba-floating-tab>
+    <!-- History Tab & Window -->
+    <temba-floating-tab
+      id="history-tab"
+      icon="revisions"
+      label="Revision History"
+      color="#8b5cf6"
+    ></temba-floating-tab>
+    <!-- Translation Tab & Window -->
+    <temba-floating-tab
+      id="translation-tab"
+      icon="language"
+      label="Flow Translation"
+      color="#6b7280"
+    ></temba-floating-tab>
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+      // connect tabs to windows
+      const phoneTab = document.getElementById('phone-tab');
+      const phoneWindow = document.getElementById('phone-window');
+      const historyTab = document.getElementById('history-tab');
+      const historyWindow = document.getElementById('history-window');
+      const translationTab = document.getElementById('translation-tab');
+      const translationWindow = document.getElementById('translation-window');
+      // phone tab/window interaction
+      phoneTab.addEventListener('temba-button-clicked', () => {
+        phoneWindow.show();
+      });
+      phoneWindow.addEventListener('temba-dialog-hidden', () => {
+        phoneWindow.hide();
+      });
+      // history tab/window interaction
+      historyTab.addEventListener('temba-button-clicked', () => {
+        historyWindow.show();
+      });
+      historyWindow.addEventListener('temba-dialog-hidden', () => {
+        historyWindow.hide();
+      });
+      // translation tab/window interaction
+      translationTab.addEventListener('temba-button-clicked', () => {
+        translationWindow.show();
+      });
+      translationWindow.addEventListener('temba-dialog-hidden', () => {
+        translationWindow.hide();
+      });
+    </script>
+  </body>
+</html>

package/demo/components/flow/index.html CHANGED Viewed

@@ -144,7 +144,7 @@
       // Fallback function for known flows
       async function loadKnownFlows(container) {
-        const knownFlows = ['sample-flow', 'food-order'];
+        const knownFlows = ['sample-flow', 'food-order', 'voicemail'];
         const flows = [];
         for (const flowId of knownFlows) {

package/demo/data/flows/sample-flow.json CHANGED Viewed

@@ -1122,6 +1122,45 @@
     },
     "revision": 69,
     "expire_after_minutes": 4320,
-    "localization": {}
+    "localization": {
+      "esp": {
+        "3d56e4cf-1e88-499a-b0b4-ff48385fc9a5": {
+          "text": [
+            "¿Cuál es tu color favorito?! @contact.uuid. Funciona."
+          ],
+          "quick_replies": [
+            "Rojo",
+            "Verde",
+            "Azul",
+            "Amarillo",
+            "Morado"
+          ]
+        },
+        "9963160a-a007-4c7b-8c9e-7325e1b69ed8": {
+          "text": [
+            "Excelentes opciones."
+          ],
+          "quick_replies": [
+            "Rojo",
+            "Verde",
+            "Azul"
+          ]
+        }
+      },
+      "fra": {
+        "3d56e4cf-1e88-499a-b0b4-ff48385fc9a5": {
+          "text": [
+            "Quelle est votre couleur préférée?! @contact.uuid. Ça marche."
+          ],
+          "quick_replies": [
+            "Rouge",
+            "Vert",
+            "Bleu",
+            "Jaune",
+            "Violet"
+          ]
+        }
+      }
+    }
   }
-}
+}