acinguiux-preact-components 0.0.1

package/src/wcs/components/chatbot-koreai/chatbot-koreai.js

@@ -0,0 +1,176 @@
+import ChatBot from '#acinguiux-preact/wcs/shared/chat-bot/chat-bot.js'
+import KoreaiTransport from './koreai-transport.js'
+import { marked } from 'marked'
+
+const { h, preactHooks, matter, register } = globalThis.ami
+const { useState } = preactHooks
+const { Button, RichText, Img } = matter
+
+const THINKING_MESSAGE = { isBot: true, children: ['...'] }
+
+function setupMarkdown () {
+  // Remove code parsing.
+  const tokenizer = {
+    code () {
+      return null
+    }
+  }
+
+  const renderer = {
+    // Open all links in new tab.
+    link (args) {
+      const processedLink = this.constructor.prototype.link.call(this, args)
+      return processedLink.replace('<a ', '<a target="_blank" ')
+    },
+    // Replace italics with bold.
+    em ({ tokens }) {
+      const text = this.parser.parseInline(tokens)
+      return `<strong>${text}</strong>`
+    }
+  }
+
+  marked.use({ tokenizer, renderer })
+}
+
+setupMarkdown()
+
+function ChatbotKoreai ({
+  id,
+  url,
+  name,
+  icon,
+  'button-text': buttonText,
+  'header-text': headerText,
+  'attach-text': attachText,
+  'input-text': inputText,
+  'send-text': sendText
+}) {
+  if (!id || !url) {
+    console.error('Both id and url are required.')
+    return null
+  }
+
+  const [state, setState] = useState({
+    transport: new KoreaiTransport(id, name, url)
+  })
+
+  // Translate Kore.ai messages onto chat-bot.js messages.
+  const [messages, isBusy] = getMessagesFromHistory(state.transport.history, userMessage => {
+    // Additional button handling.
+    state.transport.sendMessage({ message: { body: userMessage } })
+    setState({ ...state })
+  })
+
+  return h(ChatBot, {
+    buttonText,
+    headerText,
+    attachText,
+    inputText,
+    sendText,
+    isBusy: isBusy || !state.transport.isOpen(),
+    icon,
+    messages,
+    onInit () {
+      state.transport.connect(() => setState({ ...state })) // Redraw on new message.
+    },
+    onSend (userMessage) {
+      state.transport.sendMessage({ message: { body: userMessage } })
+      setState({ ...state }) // Redraw on message sent.
+    },
+    onClose () {
+      state.transport.disconnect()
+    },
+    async onAttach (file) {
+      await state.transport.sendFile(file)
+      setState({ ...state }) // Redraw on file attached.
+    }
+  })
+}
+
+function getMessagesFromHistory (history, onSend) {
+  const messages = []
+
+  for (const data of history) {
+    if (data.type === 'bot_response') {
+      messages.push(...resolveBotMessages(data, onSend))
+    } else if (data.resourceid === '/bot.message' && data?.message?.body) {
+      messages.push({
+        children: data.message.body,
+        isBot: false,
+        timestamp: new Date(data.id)
+      })
+    }
+  }
+
+  const isBusy = history.length < 4
+  if (isBusy) {
+    messages.push(THINKING_MESSAGE)
+  }
+
+  return [messages, isBusy]
+}
+
+function resolveBotMessages (eventData, onSend) {
+  const messages = []
+
+  for (const message of eventData?.message ?? []) {
+    const outerPayload = message?.component?.payload
+    const innerPayload = outerPayload?.payload
+    const payload = innerPayload ?? outerPayload
+    const text = resolveText(payload)
+    const buttonTitles = resolveButtonTitles(payload)
+    const imageModel = outerPayload?.type === 'image' && { src: payload.url }
+
+    messages.push({
+      children: h('div', { className: 'space-y-2' },
+        // Image.
+        imageModel && h('div', { className: 'rounded-lg overflow-hidden' },
+          h(Img, { _model: imageModel })
+        ),
+
+        // Text message.
+        text && h(RichText, marked(text)),
+
+        // Buttons.
+        buttonTitles.length > 0 && h('div', { className: 'flex flex-col', style: 'gap: 8px' }, buttonTitles.map(buttonTitle =>
+          h('div',
+            h(Button, {
+              _model: { name: buttonTitle },
+              _size: 'xs',
+              async onClick () {
+                onSend(buttonTitle)
+              }
+            })
+          )
+        ))
+      ),
+      isBot: eventData.type === 'bot_response',
+      timestamp: new Date(eventData.timestamp)
+    })
+  }
+
+  return messages
+}
+
+function resolveButtonTitles (payload) {
+  const buttonTitles = []
+  for (const reply of payload?.quick_replies ?? []) {
+    buttonTitles.push(reply.title)
+  }
+
+  for (const feedback of payload?.thumpsUpDownArrays ?? []) {
+    buttonTitles.push(feedback.reviewText)
+  }
+
+  return buttonTitles
+}
+
+function resolveText (payload) {
+  if (typeof payload === 'string') {
+    return payload
+  }
+
+  return payload?.text
+}
+
+register(ChatbotKoreai, 'chatbot-koreai')

package/src/wcs/components/chatbot-koreai/koreai-transport.js

@@ -0,0 +1,217 @@
+const CHUNK_SIZE = 1_048_576 // 1 MiB
+const PING_INTERVAL = 30_000
+
+export default class KoreaiTransport {
+  constructor (id, name, url) {
+    const [language, country] = document.documentElement.lang.toLowerCase().split('-')
+    this.socket = null
+    this.history = []
+    this.pingInterval = null
+    this.jwtUrl = new URL(url)
+    this.botInfo = {
+      chatBot: name,
+      taskBotId: id,
+      customData: { botlanguage: language, countryCode: country }
+    }
+  }
+
+  async connect (onStateChange, params = '') {
+    // Get the websocket URL.
+    const res = await fetch('https://de-bots.kore.ai/api/rtm/start', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `Bearer ${await this._getAccessToken()}`
+      },
+      body: JSON.stringify({
+        botInfo: this.botInfo,
+        language: this.botInfo.customData.botlanguage,
+        bot_title: this.botInfo.chatBot
+      })
+    })
+    const { url } = await res.json()
+
+    // Create web socket connection.
+    this.socket = new WebSocket(url + params)
+
+    // Reconnect on close.
+    this.socket.addEventListener('close', () => {
+      onStateChange()
+      clearInterval(this.pingInterval)
+      this.connect(onStateChange, '&isReconnect=true&ConnectionMode=Reconnect')
+    })
+
+    this.socket.addEventListener('error', event => {
+      console.error('WebSocket error:', event)
+    })
+
+    // Handle incoming messages.
+    this.socket.addEventListener('message', event => {
+      const data = JSON.parse(event.data)
+      this.history.push(data)
+      onStateChange()
+    })
+
+    // Handle ping.
+    clearInterval(this.pingInterval)
+    this.pingInterval ||= setInterval(() => this.sendMessage({ type: 'ping' }), PING_INTERVAL)
+  }
+
+  async disconnect () {
+    return this.sendMessage({
+      customEvent: { web_sdk: 'reconnect_button_event' },
+      resourceid: '/bot.clientEvent',
+      message: { body: 'reconnect_button_event', type: 'text' },
+    })
+  }
+
+  async sendMessage (message) {
+    if (!this.isOpen()) {
+      return
+    }
+
+    const date = new Date()
+
+    const data = {
+      clientMessageId: date.getTime(),
+      resourceid: '/bot.message',
+      botInfo: this.botInfo,
+      client: 'sdk',
+      meta: {
+        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        locale: document.documentElement.lang // Use site locale rather than browser locale.
+      },
+      id: date.getTime(),
+      ...message
+    }
+
+    this.history.push(data)
+    this.socket.send(JSON.stringify(data))
+  }
+
+  async sendFile (file) {
+    const chunks = await this._getBase64Chunks(file)
+    const fileToken = await this._getFileToken()
+    const messageToken = await this._getFileToken()
+    const boundary = `--------MultipartData${this._getRandomToken()}`
+
+    // Send chunk requests.
+    for (const [ii, chunk] of chunks.entries()) {
+      const formData = new FormData()
+      formData.append('chunkNo', ii)
+      formData.append('messageToken', messageToken)
+      formData.append('chunk', chunk)
+      await fetch(`https://de-bots.kore.ai/api/1.1/attachment/file/${fileToken}/chunk`, {
+        method: 'POST',
+        headers: {
+          authorization: `Bearer ${await this._getAccessToken()}`,
+          'content-type': `multipart/form-data; boundary=${boundary}`
+        },
+        body: this._getCustomMultipartBody(boundary, { chunkNo: ii, messageToken, chunk })
+      })
+    }
+
+    // Send completion request.
+    const res = await fetch(`https://de-bots.kore.ai/api/1.1/attachment/file/${fileToken}`, {
+      method: 'PUT',
+      headers: {
+        accept: '*/*',
+        authorization: `Bearer ${await this._getAccessToken()}`,
+        'content-type': `multipart/form-data; boundary=${boundary}`
+      },
+      body: this._getCustomMultipartBody(boundary, {
+        totalChunks: chunks.length,
+        messageToken,
+        fileExtension: file.name.split('.').pop(),
+        fileContext: 'workflows',
+        thumbnailUpload: false,
+        filename: file.name
+      })
+    })
+
+    const { fileId } = await res.json()
+
+    await this.sendMessage({
+      message: {
+        body: file.name,
+        attachments: [{ fileName: file.name, fileType: file.type, fileId }]
+      }
+    })
+  }
+
+  isOpen () {
+    return this?.socket?.readyState === WebSocket.OPEN
+  }
+
+  async _getBase64Chunks (file) {
+    const chunks = []
+    for (let ii = 0; ii < file.size; ii += CHUNK_SIZE) {
+      const blob = file.slice(ii, ii + CHUNK_SIZE)
+      const chunk = await new Promise(resolve => {
+        const reader = new FileReader()
+        reader.onloadend = event => {
+          resolve(event.target.result.split(',').pop())
+        }
+        reader.readAsDataURL(blob)
+      })
+      chunks.push(chunk)
+    }
+
+    return chunks
+  }
+
+  // Why the hell aren't Kore.ai following standards?
+  _getCustomMultipartBody (boundary, data) {
+    const lines = []
+    for (const key of Object.keys(data)) {
+      lines.push(`--${boundary}`)
+      if (key === 'chunk') {
+        lines.push(`Content-Disposition: form-data; name="${key}"; filename="${data[key].name}"`, 'Content-Transfer-Encoding: base64')
+      } else {
+        lines.push(`Content-Disposition: form-data; name="${key}";`)
+      }
+      lines.push('', data[key])
+    }
+    lines.push(`--${boundary}--`)
+    return lines.join('\r\n')
+  }
+
+  async _getJwt () {
+    const res = await fetch(`${this.jwtUrl.origin}/acinguiux-botkit/generate-token?taskBotId=${this.botInfo.taskBotId}`)
+    const json = await res.json()
+    return json.jwt
+  }
+
+  async _getAccessToken () {
+    if (!this.accessToken) {
+      const res = await fetch('https://de-bots.kore.ai/api/oAuth/token/jwtgrant', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ assertion: await this._getJwt(), botInfo: this.botInfo, token: {} })
+      })
+      const json = await res.json()
+      this.accessToken = json.authorization.accessToken
+    }
+
+    return this.accessToken
+  }
+
+  async _getFileToken () {
+    const res = await fetch('https://de-bots.kore.ai/api/1.1/attachment/file/token', {
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        authorization: `Bearer ${await this._getAccessToken()}`
+      }
+    })
+
+    const json = await res.json()
+    return json.fileToken
+  }
+
+  _getRandomToken () {
+    const buffer = new Uint8Array(16)
+    crypto.getRandomValues(buffer)
+    return Array.from(buffer, byte => byte.toString(16).padStart(2, '0')).join('')
+  }
+}

package/src/wcs/components/chatbot-ms/chatbot-ms.js

@@ -0,0 +1,210 @@
+import ChatBot from '#acinguiux-preact/wcs/shared/chat-bot/chat-bot.js'
+import { marked } from 'marked'
+
+const { h, preactHooks, matter, register } = globalThis.ami
+const { useState } = preactHooks
+const { Heading, Link, RichText } = matter
+
+// API: https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#activity-object
+const ACTIVITY_MAP = {
+  message: MessageActivity,
+  typing: TypingActivity
+}
+
+const API_URL = 'https://directline.botframework.com/v3/directline/conversations'
+const USER_ID = globalThis.crypto.randomUUID()
+
+// -----------------------------------------------------------------------------
+// Main chat bot component
+// -----------------------------------------------------------------------------
+
+function ChatbotMS ({ 'instance-id': instanceId, 'button-text': buttonText, 'header-text': headerText, icon, state }) {
+  const [data, setData] = useState({
+    user: { id: USER_ID, name: USER_ID },
+    conv: {},
+    messages: []
+  })
+
+  if (!instanceId) {
+    return null
+  }
+
+  const start = async () => {
+    // Start a conversation.
+    const res = await fetch(API_URL, {
+      method: 'post',
+      headers: { authorization: `Bearer ${instanceId}`, 'content-type': 'application/json' },
+      body: JSON.stringify({ user: data.user })
+    })
+
+    data.conv = await res.json()
+    setData({ ...data })
+
+    // Connect to a web socket.
+    const socket = new globalThis.WebSocket(data.conv.streamUrl)
+    socket.addEventListener('message', event => {
+      if (!event.data) {
+        return
+      }
+
+      // Get activities.
+      const activities = JSON.parse(event.data)?.activities || []
+
+      // Limit activities to supported only.
+      const supportedActivities = activities.filter(activity => Object.keys(ACTIVITY_MAP).includes(activity.type))
+
+      // Convert activities to messages.
+      const messages = supportedActivities.map(activity => ({
+        isTyping: activity.type === 'typing',
+        isBot: activity.from.id !== data.user.id,
+        children: h(ACTIVITY_MAP[activity.type], { activity, sendFromUser })
+      }))
+
+      // Remove all existing typing messages.
+      data.messages = data.messages.filter(m => !m.isTyping)
+
+      // Update messages.
+      data.messages.push(...messages)
+      setData({ ...data })
+    })
+  }
+
+  const sendFromUser = async text => fetch(`${API_URL}/${data.conv.conversationId}/activities`, {
+    method: 'post',
+    headers: { authorization: `Bearer ${data.conv.token}`, 'content-type': 'application/json' },
+    body: JSON.stringify({ locale: getLocale(), from: data.user, type: 'message', text })
+  })
+
+  return h(ChatBot, {
+    buttonText,
+    headerText,
+    icon,
+    forceOpen: state === 'open',
+    messages: data.messages,
+    onInit () {
+      start()
+    },
+    onSend (userMessage) {
+      sendFromUser(userMessage)
+    }
+  })
+}
+
+register(ChatbotMS, 'chatbot-ms')
+
+// -----------------------------------------------------------------------------
+// Activities
+// -----------------------------------------------------------------------------
+
+function MessageActivity ({ activity, sendFromUser }) {
+  const actions = activity?.suggestedActions?.actions
+  return [
+    activity.text && h(Markdown, { text: activity.text }),
+    activity.attachments && h(Attachments, { attachments: activity.attachments, sendFromUser }),
+    actions?.length && h(SuggestedActions, { actions, sendFromUser })
+  ]
+}
+
+function SuggestedActions ({ actions, sendFromUser }) {
+  return h('div', { className: 'space-y-2' }, actions.map(action =>
+    h('div',
+      h(CardAction, { content: action, sendFromUser })
+    )
+  ))
+}
+
+function TypingActivity () {
+  return h('span', '...')
+}
+
+// -----------------------------------------------------------------------------
+// Attachments
+// -----------------------------------------------------------------------------
+
+// API: https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#attachment-object
+function Attachments ({ attachments, sendFromUser }) {
+  const attachmentMap = {
+    'application/vnd.microsoft.card.hero': HeroCard,
+    'application/vnd.microsoft.card.adaptive': AdaptiveCard
+  }
+
+  return attachments.map(a => h('div',
+    attachmentMap[a.contentType] && h(attachmentMap[a.contentType], { content: a.content, sendFromUser })
+  ))
+}
+
+// Attachment type: application/vnd.microsoft.card.hero
+function HeroCard ({ content, sendFromUser }) {
+  return h('div', { className: 'space-y-2' },
+    content.title && h(Heading, { _level: 3 }, content.title),
+    content.subtitle && h('p', content.subtitle),
+    content.text && h(Markdown, { text: content.text }),
+    content.images?.map(im => h('img', { className: 'block w-full', src: im.url })),
+    content.buttons && h('div', { className: 'space-y-2' }, content.buttons.map(b => // type: imBack, openUrl
+      h('div',
+        h(CardAction, { content: b, sendFromUser })
+      ))
+    )
+  )
+}
+
+// Rabbit hole: https://adaptivecards.io
+function AdaptiveCard ({ content, sendFromUser }) {
+  return h('div', { className: 'space-y-2' },
+    content.body?.map(b => // type: imBack, openUrl
+      b.type === 'TextBlock' && h(Markdown, { text: b.text })
+    ),
+    (content?.actions ?? []).map(a =>
+      h(CardAction, { content: { ...a, value: a.data }, sendFromUser })
+    )
+  )
+}
+
+// API: https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#cardaction-object
+// Types: https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-add-rich-cards?view=azure-bot-service-4.0#process-events-within-rich-cards
+function CardAction ({ content, sendFromUser }) {
+  const baseProps = {
+    _variant: 'simple',
+    className: 'rounded-md pt-1 pb-1 pl-2 pr-2 border border-txa/20 inline-block'
+  }
+
+  switch (content.type) {
+    case 'call':
+    case 'downloadFile':
+    case 'openUrl':
+    case 'playAudio':
+    case 'playVideo':
+    case 'showImage':
+    case 'signin':
+      return h(Link, {
+        ...baseProps,
+        _model: { name: content.title, value: content.value },
+        target: '_blank',
+        rel: 'noopener',
+      })
+    default:
+      return content.url
+        ? h(Link, { ...baseProps, _model: { name: content.title, value: content.url }, target: '_blank' })
+        : h(Link, {
+          _model: { name: content.title },
+          ...baseProps,
+          onClick () {
+            sendFromUser(content.value)
+          }
+        })
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------------------------
+
+function getLocale () {
+  return document.documentElement.lang ?? navigator.language ?? 'en'
+}
+
+function Markdown ({ text }) {
+  // Make sure links open in a new window.
+  const markedText = marked(text).replaceAll(/( href=")/gm, ' rel="noopener" target="_blank" $1')
+  return h(RichText, markedText)
+}

package/src/wcs/components/chatbot-test/chatbot-test.js

@@ -0,0 +1,44 @@
+import ChatBot from '#acinguiux-preact/wcs/shared/chat-bot/chat-bot.js'
+
+const { h, preactHooks, register } = globalThis.ami
+const { useState } = preactHooks
+
+const DELAY = 1000 // Simulate lag.
+
+function ChatbotTest () {
+  const [state, setState] = useState({ messages: [], isBusy: true })
+
+  return h(ChatBot, {
+    buttonText: 'Ask us',
+    headerText: 'Test chatbot',
+    closeText: 'Close window',
+    attachText: 'Attach file',
+    inputText: 'Type your message here',
+    sendText: 'Send message',
+    icon: null,
+    isBusy: state.isBusy,
+    forceOpen: false,
+    messages: state.messages,
+    onInit () {
+      setTimeout(() => {
+        setState(prevState => ({ ...prevState, messages: [...prevState.messages, { isBot: true, children: ['Hello!'], timestamp: new Date() }], isBusy: false }))
+      }, DELAY)
+    },
+    onSend (userMessage) {
+      setState(prevState => ({ ...prevState, messages: [...prevState.messages, { children: [userMessage], timestamp: new Date() }], isBusy: true }))
+
+      setTimeout(() => {
+        setState(prevState => ({ ...prevState, messages: [...prevState.messages, { isBot: true, children: [`You sent: ${userMessage}`], timestamp: new Date() }], isBusy: false }))
+      }, DELAY)
+    },
+    onAttach (file) {
+      setState(prevState => ({ ...prevState, messages: [...prevState.messages, { children: [`Attaching ${file.name}`], timestamp: new Date() }], isBusy: true }))
+
+      setTimeout(() => {
+        setState(prevState => ({ ...prevState, messages: [...prevState.messages, { isBot: true, children: [`You attached: ${file.name}`], timestamp: new Date() }], isBusy: false }))
+      }, DELAY)
+    }
+  })
+}
+
+register(ChatbotTest, 'chatbot-test')