@seamly/web-ui 21.0.9 → 22.0.0

package/src/stylesheets/7-deprecated/5-components/_chat-status.scss

@@ -1,38 +1,84 @@
-// ##### CHAT STATUS #####
-// ===================
-
-// BASE
-// ----
 .#{$n}-chat-status {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  align-items: flex-start;
+  gap: $spacer * 0.5;
   width: 100%;
+  min-height: $buttonsize;
+  margin: $spacer;
   padding: $spacer * 0.5;
-  border-bottom: $thin-border solid $grey-b;
+  border-radius: $borderradius;
   background-color: $white;
+  box-shadow: $boxshadow;
+
+  &--condensed {
+    align-items: center;
+    padding: $spacer * 0.25 $spacer * 0.5 $spacer * 0.25 $spacer * 0.25;
+  }
 }
 
-&.#{$n}-app--collapsed .#{$n}-chat-status {
-  display: none;
+.#{$n}-chat--layout-window .#{$n}-chat-status {
+  margin-right: $buttonsize + $spacer * 2;
 }
 
-// PARTS
-// -----
-.#{$n}-chat-status__title {
+.#{$n}-chat-status__body {
   display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: $spacer * 0.5;
   align-items: center;
-  margin: 0 $spacer * 0.5 0 0;
+  justify-content: flex-start;
+}
+
+.#{$n}-chat-status__title {
+  display: flex;
+  margin: 0;
   color: $grey-e;
-  font-size: $fontsize-small;
+  font-size: $fontsize-medium;
   font-weight: $fontweight-bold;
-  line-height: 1;
+  line-height: 1.25;
+}
 
-  + .#{$n}-chat-status__button {
-    margin-top: $spacer * 0.5;
+.#{$n}-chat-status .#{$n}-icon {
+  flex: 0 0 $iconsize-small;
+  width: $iconsize-small;
+  height: $iconsize-small;
+}
+
+.#{$n}-chat-status__button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: $spacer * 0.5;
+  padding: $spacer * 0.25 $spacer * 0.5;
+  color: $white;
+}
+
+.#{$n}-chat-status__button .#{$n}-icon {
+  svg {
+    width: 100%;
+    height: 100%;
+
+    path {
+      fill: $white;
+    }
   }
 }
 
-.#{$n}-chat-status .#{$n}-button--tertiary {
-  color: $interaction;
+.#{$n}-chat-status__close {
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  min-width: $buttonsize-small - $spacer * 0.5;
+  min-height: $buttonsize-small - $spacer * 0.5;
+  color: $brand3;
+
+  &:has(.#{$n}-icon) {
+    flex: 0 0 $buttonsize-small - $spacer * 0.5;
+    width: $buttonsize-small - $spacer * 0.5;
+    padding: 0;
+  }
+
+  .#{$n}-icon {
+    align-self: center;
+  }
 }

package/src/stylesheets/7-deprecated/5-components/_conversation.scss

@@ -1,10 +1,7 @@
 .#{$n}-conversation__container {
   display: flex;
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   flex: 1 1 100%;
   flex-direction: column;
   justify-content: space-between;

package/src/stylesheets/7-deprecated/5-components/_input.scss

@@ -26,11 +26,14 @@
   height: 100%;
   margin-right: $spacer * 0.25;
   padding: $spacer * 0.5;
+  overflow: hidden;
   transition: padding $transition;
   border: $thin-border solid transparent;
   border-radius: $borderradius-small;
   color: $grey-e;
   font-size: $fontsize-small;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   resize: none;
 
   // iOS will zoom in on focus if font-size below 16px, and not go back.
@@ -41,9 +44,11 @@
   }
 
   @include stylePlaceholder {
-    overflow: visible;
+    overflow: hidden;
     color: $grey-c;
     line-height: $spacer;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 

package/src/stylesheets/7-deprecated/5-components/_interrupt.scss

@@ -1,10 +1,7 @@
 .#{$n}-interrupt {
   display: flex;
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   background: $white;
 }
 

package/src/stylesheets/7-deprecated/5-components/_message.scss

@@ -221,14 +221,12 @@ $avatar-size: $badge-touch-size;
   .#{$n}-message__body {
     width: 100%;
   }
-}
 
-.#{$n}-message--type-choice-prompt:not(
-    .#{$n}-message--type-choice-prompt-selected
-  ) {
-  .#{$n}-message__body {
-    padding: 0;
-    background: none;
+  &:not(.#{$n}-message--type-choice-prompt-selected) {
+    .#{$n}-message__body {
+      padding: 0;
+      background: none;
+    }
   }
 }
 
@@ -295,20 +293,50 @@ $avatar-size: $badge-touch-size;
 
 // Download
 .#{$n}-message--type-upload {
+  .#{$n}-message__body {
+    padding: 0;
+  }
+
   .#{$n}-download {
     display: flex;
     align-items: center;
-    width: 100%;
-    text-decoration: line-through;
+    gap: $spacer * 0.5;
+    padding: $spacer * 0.5 $spacer * 0.75;
+    border-radius: $borderradius;
+    color: inherit;
+    text-align: left;
     word-break: break-all;
   }
 
   .#{$n}-download-link {
-    color: inherit;
     text-decoration: underline;
+    cursor: pointer;
 
     &:hover {
-      text-decoration: none;
+      text-decoration: initial;
+    }
+  }
+
+  .#{$n}-download--preview {
+    flex-flow: column wrap;
+    align-items: flex-end;
+    gap: 0;
+    padding: 0;
+
+    > img {
+      width: 100%;
+      height: auto;
+      border-top-left-radius: $borderradius;
+      border-top-right-radius: $borderradius;
+      object-fit: cover;
+    }
+
+    .#{$n}-file-download {
+      display: flex;
+      flex: 0 0 auto;
+      justify-content: flex-end;
+      width: 100%;
+      padding: $spacer * 0.5 $spacer * 0.75;
     }
   }
 
@@ -316,7 +344,6 @@ $avatar-size: $badge-touch-size;
     flex: 0 0 16px;
     width: 16px;
     height: 16px;
-    margin-right: $spacer * 0.5;
   }
 
   .#{$n}-icon svg {
@@ -325,6 +352,16 @@ $avatar-size: $badge-touch-size;
   }
 }
 
+.#{$n}-conversation__item--source-agent .#{$n}-message--type-upload {
+  .#{$n}-download--preview .#{$n}-file-download {
+    justify-content: flex-start;
+  }
+
+  .#{$n}-icon path {
+    fill: $interaction;
+  }
+}
+
 // Deleted
 .#{$n}-message--deleted .#{$n}-file-download {
   text-decoration: line-through;

package/src/stylesheets/7-deprecated/5-components/_translation-options.scss

@@ -1,49 +1,42 @@
 .#{$n}-translation-options {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
   width: 100%;
   margin: 0;
 
-  // 1px needed for the outline focus ring
-  padding: 1px 0 0;
+  // Top padding needed for the outline focus ring
+  padding: $spacer * 0.05 0 0;
   list-style: none;
+}
 
-  &--item {
-    color: $brand3;
-    font-size: $fontsize-small;
-
-    > input[type='radio'] {
-      + label svg {
-        opacity: 0;
-      }
-
-      &:checked + label svg {
-        opacity: 1;
-      }
-    }
-
-    > label {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: calc($spacer * 0.25) 0;
-      font-weight: $fontweight-bold;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      // Only show a ring when we have focused via keyboard
-      &:focus-within:has(input:focus-visible) {
-        outline: -webkit-focus-ring-color auto 1px;
-      }
+.#{$n}-translation-options__item {
+  display: flex;
+  align-items: center;
+  gap: $spacer * 0.5;
+  width: 100%;
+  padding: calc($spacer * 0.25) 0;
+  color: $brand3;
+  font-size: $fontsize-small;
+  font-weight: $fontweight-bold;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
 
-      > span {
-        margin-left: 0.5em;
-      }
-    }
+  > span {
+    margin-left: -0.5em;
   }
 
-  &--icon {
+  .#{$n}-icon {
     display: flex;
-    margin-right: calc($spacer / 2);
+    width: $iconsize-small;
+    height: $iconsize-small;
+    opacity: 0;
+  }
+
+  &[aria-selected='true'] .#{$n}-icon {
+    opacity: 1;
   }
 }

package/src/stylesheets/7-deprecated/5-components/_unread-messages.scss

@@ -0,0 +1,38 @@
+.#{$n}-unread-messages {
+  display: none;
+  position: absolute;
+  bottom: $spacer;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  opacity: 0;
+
+  &.#{$n}-transition--visible {
+    display: flex;
+  }
+
+  &.#{$n}-transition--in {
+    transition: opacity $transition 1s;
+    opacity: 1;
+  }
+
+  .#{$n}-button {
+    display: flex;
+    align-items: center;
+    gap: $spacer * 0.5;
+  }
+
+  .#{$n}-icon {
+    width: $spacer;
+    height: $spacer;
+
+    svg {
+      width: $spacer;
+      height: $spacer;
+    }
+
+    svg path {
+      fill: $white;
+    }
+  }
+}

package/src/stylesheets/deprecated-view.scss

@@ -56,6 +56,7 @@
   @import '7-deprecated/5-components/carousel';
   @import '7-deprecated/5-components/collapse-button';
   @import '7-deprecated/5-components/suggestions';
+  @import '7-deprecated/5-components/unread-messages';
 }
 
 .#{$n}-app--deprecated,

package/src/stylesheets/styles.scss

@@ -10,6 +10,7 @@
   @import '3-chat/chat';
   @import '4-base/elements';
   @import '4-base/formelements';
+  @import '5-components/abort-transaction';
   @import '5-components/avatar';
   @import '5-components/buttons';
   @import '5-components/choice-prompt';
@@ -45,6 +46,7 @@
   @import '5-components/window-open-button';
   @import '5-components/pre-chat-messages';
   @import '5-components/unstarted';
+  @import '5-components/unread-messages';
 }
 
 .#{$n}-app,

package/webpack/config.common.js

@@ -5,6 +5,7 @@ const webpackMerge = require('webpack-merge').merge
 const { styleScssLoaders } = require('@seamly/doc-site/lib/config/site')
 const BundleAnalyzerPlugin =
   require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 
 const generateBabelLoaderBrowserPluginsPart = require('./parts/babel-loader-browser-plugins')
 const generateDevServerPart = require('./parts/dev-server')
@@ -37,6 +38,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
       PACKAGE_NAME: JSON.stringify(pkg.name),
       PACKAGE_VERSION: JSON.stringify(pkg.version),
     }),
+    new ForkTsCheckerWebpackPlugin(),
   ]
 
   if (env.analyze) {
@@ -93,6 +95,8 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
                 '@babel/env',
                 {
                   targets: BROWSERS,
+                  useBuiltIns: 'entry',
+                  corejs: '3.30.0',
                 },
               ],
             ],
@@ -104,7 +108,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
           },
         },
         {
-          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|mp3)$/,
           exclude: [PUBLIC_ROOT],
           loader: 'url-loader',
           options: {
@@ -122,6 +126,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
           loader: 'ts-loader',
           exclude: /node_modules|\.d\.ts$/,
           options: {
+            transpileOnly: true,
             compilerOptions: {
               outDir: 'build',
               noEmit: false,

package/webpack/config.package.js

@@ -1,12 +1,14 @@
 /* eslint-disable */
 const webpackDefinePlugin = require('webpack').DefinePlugin
 const webpackMerge = require('webpack-merge').merge
+const SourceMapDevToolPlugin = require('webpack').SourceMapDevToolPlugin
 const glob = require('glob')
 const path = require('path')
 const { assetScssLoaders } = require('@seamly/doc-site/lib/config/site')
 const defaultConfig = require('./defaults')
 const generateBabelLoaderPluginsPart = require('./parts/babel-loader-plugins')
 const generateBabelLoaderBrowserPluginsPart = require('./parts/babel-loader-browser-plugins')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 
 module.exports = (env = {}, argv = {}, configOverrides = {}) => {
   const implConfig = {
@@ -48,6 +50,11 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
         PACKAGE_NAME: JSON.stringify(pkg.name),
         PACKAGE_VERSION: JSON.stringify(pkg.version),
       }),
+      new SourceMapDevToolPlugin({
+        filename: '[file].map[query]',
+        append: '\n//# sourceMappingURL=~/[url]',
+      }),
+      new ForkTsCheckerWebpackPlugin(),
     ],
     resolve: {
       modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
@@ -61,6 +68,14 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     },
     module: {
       rules: [
+        {
+          test: /\.(mp3|wav)$/,
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'sounds',
+          },
+        },
         {
           test: /\.(j|t)s$/,
           include: BABEL_TRANSPILE_MODULES.map((moduleName) =>
@@ -84,6 +99,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
           loader: 'ts-loader',
           exclude: /node_modules|\.d\.ts$/,
           options: {
+            transpileOnly: true,
             compilerOptions: {
               outDir: 'build',
               noEmit: false,
@@ -164,6 +180,8 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
                   '@babel/env',
                   {
                     targets: BROWSERS,
+                    useBuiltIns: 'entry',
+                    corejs: '3.30.0',
                   },
                 ],
               ],

package/webpack/defaults.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 
-const BABEL_TRANSPILE_MODULES = ['debug', 'superagent', 'phoenix']
+const BABEL_TRANSPILE_MODULES = ['debug', 'phoenix']
 const BROWSERS = 'last 1 version, > 1%, not dead, not ie 11, not ie_mob 11'
 
 const ROOT = path.resolve(__dirname, '..')

package/src/javascripts/ui/components/core/seamly-file-upload.js

@@ -1,86 +0,0 @@
-import { useDispatch } from 'react-redux'
-import { useSeamlyApiContext, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n/hooks'
-import {
-  registerUpload,
-  setUploadComplete,
-  setUploadError,
-  setUploadProgress,
-} from 'domains/store/slice'
-import { randomId } from 'lib/id'
-import SeamlyFileUploadContext from './seamly-file-upload-context'
-
-const SeamlyFileUpload = ({ children }) => {
-  const { t } = useI18n()
-  const dispatch = useDispatch()
-  const api = useSeamlyApiContext()
-  const { addUploadBubble } = useSeamlyCommands()
-
-  const onUploadFileHandler = (file) => {
-    const fileId = randomId()
-
-    const uploadHandle = api.uploadFile(
-      file,
-      (p) => {
-        dispatch(setUploadProgress({ fileId, progress: Math.ceil(p) }))
-      },
-      (result) => {
-        const {
-          id,
-          transactionId,
-          occurredAt,
-          body: { contentType, filename, filesize, url },
-        } = result.body
-        dispatch(setUploadComplete(fileId))
-        addUploadBubble(
-          id,
-          transactionId,
-          occurredAt,
-          contentType,
-          filename,
-          filesize,
-          url,
-        )
-      },
-      (err) => {
-        const errorKey = err && err.body ? err.body.error : ''
-        let errorText
-
-        switch (errorKey) {
-          case 'file_uploads_are_disabled':
-            errorText = t('fileUpload.errors.unavailable')
-            break
-          case 'request_entity_too_large':
-            errorText = t('fileUpload.errors.tooLarge')
-            break
-          case 'file_has_invalid_mime_type':
-            errorText = t('fileUpload.errors.wrongType')
-            break
-          case 'virus_found':
-            errorText = t('fileUpload.errors.virusFound')
-            break
-          default:
-            errorText = t('fileUpload.errors.general')
-        }
-
-        dispatch(setUploadError({ fileId, errorText }))
-      },
-    )
-
-    dispatch(
-      registerUpload({
-        fileId,
-        fileName: file.name,
-        uploadHandle,
-      }),
-    )
-  }
-
-  return (
-    <SeamlyFileUploadContext.Provider value={onUploadFileHandler}>
-      {children}
-    </SeamlyFileUploadContext.Provider>
-  )
-}
-
-export default SeamlyFileUpload

package/src/javascripts/ui/components/entry/text-entry/hooks.js

@@ -1,46 +0,0 @@
-import { useEffect, useMemo } from 'preact/hooks'
-import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
-import { useLiveRegion } from 'ui/hooks/live-region-hooks'
-import { useEntryTextLimit } from 'ui/hooks/seamly-state-hooks'
-import { debounce } from 'ui/utils/general-utils'
-import { useFormControl } from 'domains/forms/hooks'
-import { useI18n } from 'domains/i18n/hooks'
-
-export function useCharacterLimit(controlName) {
-  const { t } = useI18n()
-  const { sendAssertive } = useLiveRegion()
-  const { hasLimit, limit } = useEntryTextLimit()
-
-  const debouncedSendAssertive = useMemo(
-    () => debounce(sendAssertive, maxCharacterSrDebounceDelay),
-    [sendAssertive],
-  )
-  const validateLimit = useMemo(() => {
-    return debounce((_reachedCharacterWarning, _remainingChars) => {
-      if (_reachedCharacterWarning) {
-        debouncedSendAssertive(
-          t('input.srCharacterLimitText', { limit: _remainingChars }),
-        )
-      }
-    }, maxCharacterSrDebounceDelay)
-  }, [debouncedSendAssertive, t])
-
-  const [{ value }] = useFormControl(controlName)
-  const remainingChars = hasLimit && value ? limit - value.length : limit
-  const reachedCharacterWarning = hasLimit
-    ? remainingChars <= maxCharacterWarningLimit
-    : false
-  const reachedCharacterLimit = hasLimit ? remainingChars < 0 : false
-
-  useEffect(() => {
-    validateLimit(reachedCharacterWarning, remainingChars)
-  }, [reachedCharacterWarning, remainingChars, validateLimit])
-
-  return {
-    hasCharacterLimit: hasLimit,
-    characterLimit: limit,
-    reachedCharacterWarning,
-    reachedCharacterLimit,
-    remainingChars,
-  }
-}