@seamly/web-ui 20.0.0-beta.3 → 20.0.0-beta.4

package/build/dist/lib/style-guide.js

@@ -5685,7 +5685,7 @@ function TranslationsOptionButton() {
       })
     }), _jsxs("button", {
       type: "button",
-      className: className(['button', 'button--secondary', 'app__options__button']),
+      className: className(['button', 'button--secondary', 'chat__options__button']),
       id: toggleButtonId,
       onClick: handleToggleClick,
       onKeyDown: handleToggleKeyDown,
@@ -6097,7 +6097,7 @@ const participantInfo = {
     'e65fa8dc-97ab-4711-8fec-82bae6461aa2': {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6112,7 +6112,7 @@ const participantInfo = {
     },
     'e65fa8dc-97ab-4711-8fec-82bae6461aa3': {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6213,7 +6213,8 @@ const infoMessage = {
   payload: {
     body: {
       text: 'This is a system generated info message',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     id: (0,web_ui_namespaceObject.randomId)(),
@@ -6266,7 +6267,7 @@ const participantMessage = {
     participant: {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6292,7 +6293,7 @@ const participantMessageDefaultIcon = {
     messageStatus: 'received',
     participant: {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6320,7 +6321,8 @@ const getCustomMessage = ({
     body: {
       type,
       text,
-      data
+      data,
+      variables: {}
     },
     participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
     service: {
@@ -6345,7 +6347,8 @@ const shortTextMessage = {
   payload: {
     body: {
       text: 'What do you want to do?',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     fromHistory: true,
@@ -6409,7 +6412,8 @@ const longTextMessage = {
   payload: {
     body: {
       text: 'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     fromHistory: true,
@@ -6433,7 +6437,8 @@ const textMessageBoldItalicUnderline = {
   payload: {
     body: {
       text: 'Bubble with **bold** *italic* <u>underline</u>',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     fromHistory: true,
@@ -6458,8 +6463,24 @@ const textMessageWithLinks = {
   type: 'message',
   payload: {
     body: {
-      text: '<a href="https://google.com" data-link-id="1">Link in same window</a> and <a href="https://google.com" data-link-id="2" target="_blank">link in new window</a> embedded in text',
-      type: 'text'
+      text: '{{link_1}} and {{link_2}} embedded in text',
+      type: 'text',
+      variables: {
+        link_1: {
+          id: '1',
+          name: 'Link in same window',
+          newTab: false,
+          type: 'link',
+          url: 'https://google.com'
+        },
+        link_2: {
+          id: '2',
+          name: 'link in new window',
+          newTab: true,
+          type: 'link',
+          url: 'https://google.com'
+        }
+      }
     },
     fromClient: false,
     fromHistory: true,
@@ -6484,8 +6505,17 @@ const textMessageWithLongLink = {
   type: 'message',
   payload: {
     body: {
-      text: 'Here is a long link <a href="https://google.com" data-link-id="1">click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee</a> embedded in text',
-      type: 'text'
+      text: 'Here is a long link {{link_1}} embedded in text',
+      type: 'text',
+      variables: {
+        link_1: {
+          id: '1',
+          name: 'click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee',
+          newTab: false,
+          type: 'link',
+          url: 'https://google.com'
+        }
+      }
     },
     fromClient: false,
     fromHistory: true,
@@ -6511,7 +6541,8 @@ const textMesageWithBullets = {
   payload: {
     body: {
       text: '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     fromHistory: true,
@@ -6672,7 +6703,8 @@ const userMessage = {
   payload: {
     body: {
       text: 'This is what the user typed',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: true,
     fromHistory: true,
@@ -6689,7 +6721,8 @@ const userMessageLong = {
   payload: {
     body: {
       text: 'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: true,
     fromHistory: true,
@@ -7146,7 +7179,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Long ago when a dialog started',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, participantMessage, participantMessageDefaultIcon, newTopicDivider, transcriptInfoMessage, ...[newTranslationDividerStart, newTranslationDividerStop].map(addTranslationData), infoMessage]
@@ -7190,7 +7224,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Long ago when a dialog started',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7200,7 +7235,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing the full date',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7210,7 +7246,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7220,7 +7257,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7230,7 +7268,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing "yesterday"',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7240,7 +7279,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7250,7 +7290,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7260,7 +7301,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing me the dialog continues today',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }]