@botonic/react 0.40.1 → 0.41.0-alpha.0

package/src/components/system-debug-trace/styles.ts

@@ -0,0 +1,286 @@
+import styled from 'styled-components'
+
+import { COLORS } from '../../constants'
+
+export const StyledDebugContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-between;
+  gap: 12px;
+
+  background-color: ${COLORS.SOLID_WHITE};
+  border-radius: 6px;
+  font-family: 'Inter', sans-serif;
+  box-sizing: border-box;
+  margin: 0px 8px;
+  max-width: calc(100% - 16px);
+  width: 100%;
+
+  /* When collapsible (expanded or collapsed), entire container is hoverable and clickable */
+  &.collapsible {
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${COLORS.N50};
+    }
+  }
+`
+
+export const StyledDebugHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  user-select: none;
+  border-radius: 6px;
+  padding: 8px 12px;
+  width: 100%;
+`
+
+export const StyledDebugArrow = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`
+
+export const StyledDebugIcon = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-right: 8px;
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`
+
+export const StyledDebugTitle = styled.span`
+  flex: 1;
+  display: flex;
+  align-items: center;
+
+  font-weight: 600;
+  font-size: 12px;
+  color: ${COLORS.N700};
+  line-height: 1.5;
+  white-space: nowrap;
+  gap: 4px;
+
+  span {
+    font-weight: 400;
+  }
+`
+
+export const StyledDebugContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+`
+interface StyledDebugDetailProps {
+  $isLastItem?: boolean
+}
+export const StyledDebugDetail = styled.div<StyledDebugDetailProps>`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 28px;
+  margin-bottom: ${({ $isLastItem }) => ($isLastItem ? '0' : '8px')};
+  line-height: 1.5;
+`
+
+export const StyledDebugLabel = styled.strong`
+  color: ${COLORS.N700};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.5;
+`
+
+export const StyledDebugValue = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 12px;
+  color: ${COLORS.N700};
+  line-height: 1.5;
+
+  > svg {
+    width: 14px;
+    height: 14px;
+    min-width: 14px;
+    min-height: 14px;
+    flex-shrink: 0;
+    display: block;
+  }
+`
+
+export const StyledDebugItemWithIcon = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  font-weight: 600;
+  font-size: 12px;
+  color: ${COLORS.N700};
+  line-height: 1.5;
+
+  &:not(:last-child) {
+    margin-bottom: 4px;
+  }
+
+  > svg {
+    width: 14px;
+    height: 14px;
+    min-width: 14px;
+    min-height: 14px;
+    flex-shrink: 0;
+    display: block;
+  }
+`
+
+export const StyledDebugMetadata = styled.div`
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: 1px solid ${COLORS.N100};
+  color: ${COLORS.N700};
+  font-size: 12px;
+  padding-left: 28px;
+
+  > div {
+    margin-top: 6px;
+    font-weight: 400;
+  }
+`
+
+export const StyledSeeChunksButton = styled.button`
+  border: 1px solid #c4c6d0;
+  border-radius: 6px;
+  padding: 8px;
+  height: 28px;
+  background-color: transparent;
+  color: #413f48;
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  margin-left: 0;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+
+  &:hover {
+    background-color: ${COLORS.N200};
+  }
+`
+interface StyledGuardrailItemProps {
+  $isLastItem?: boolean
+}
+export const StyledGuardrailItem = styled.div<StyledGuardrailItemProps>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 28px;
+  margin-bottom: ${({ $isLastItem }) => ($isLastItem ? '0' : '8px')};
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+
+  svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+`
+
+export const StyledDebugContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+
+  /* Create line from first label to last label */
+  &::before {
+    content: '';
+    position: absolute;
+    left: 13px;
+    width: 1px;
+    background-color: ${COLORS.N100};
+    top: 0;
+    /* Height ends at last label's bottom position */
+    height: var(--last-label-bottom, 100%);
+  }
+
+  /* Change line color to N200 when collapsible event is hovered */
+  .collapsible:hover & {
+    &::before {
+      background-color: ${COLORS.N200};
+    }
+  }
+`
+
+export const StyledGuardrailLabel = styled.span`
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+`
+
+export const StyledGuardrailValue = styled.span`
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+`
+
+export const StyledSourceValue = styled.span`
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+`
+
+export const StyledFileSourceValue = styled(StyledSourceValue)`
+  display: block;
+`
+
+export const StyledUrlSourceValue = styled.a`
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${COLORS.N700};
+  text-decoration: none;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+
+  &:hover {
+    text-decoration: underline;
+    color: ${COLORS.BOTONIC_BLUE};
+  }
+
+  &:visited {
+    color: ${COLORS.N700};
+  }
+`

package/src/components/system-debug-trace/types.ts

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import {
+  AiAgentDebugEvent,
+  FallbackDebugEvent,
+  HandoffSuccessDebugEvent,
+  KeywordDebugEvent,
+  KnowledgeBaseDebugEvent,
+  SmartIntentDebugEvent,
+} from './events'
+
+export interface IconProps {
+  color?: string
+}
+
+// Union type of all debug event types
+export type DebugEvent =
+  | KeywordDebugEvent
+  | AiAgentDebugEvent
+  | KnowledgeBaseDebugEvent
+  | FallbackDebugEvent
+  | SmartIntentDebugEvent
+  | HandoffSuccessDebugEvent
+
+export interface DebugEventConfig {
+  action: string
+  title: React.ReactNode
+  component: React.ComponentType<any> | null
+  icon?: React.ReactNode
+  collapsible?: boolean
+}

package/src/constants.js

@@ -3,32 +3,37 @@ import UrlIcon from './assets/url-icon.png'
 
 export const COLORS = {
   // http://chir.ag/projects/name-that-color
-  APPLE_GREEN: 'rgba(58, 156, 53, 1)',
-  BLEACHED_CEDAR_PURPLE: 'rgba(46, 32, 59, 1)',
-  BOTONIC_BLUE: 'rgba(0, 153, 255, 1)',
-  CACTUS_GREEN: 'rgba(96, 115, 94, 1)',
-  CONCRETE_WHITE: 'rgba(243, 243, 243, 1)',
-  CURIOUS_BLUE: 'rgba(38, 139, 210, 1)',
-  DAINTREE_BLUE: 'rgba(0, 43, 53, 1)',
-  ERROR_RED: 'rgba(255, 43, 94)',
-  FRINGY_FLOWER_GREEN: 'rgba(198, 231, 192, 1)',
-  GRAY: 'rgba(129, 129, 129, 1)',
-  LIGHT_GRAY: 'rgba(209, 209, 209, 1)',
-  MID_GRAY: 'rgba(105, 105, 115, 1)',
+  APPLE_GREEN: '#3A9C35',
+  BLEACHED_CEDAR_PURPLE: '#2E203B',
+  BOTONIC_BLUE: '#0099FF',
+  CACTUS_GREEN: '#60735E',
+  CONCRETE_WHITE: '#F3F3F3',
+  CURIOUS_BLUE: '#268BD2',
+  DAINTREE_BLUE: '#002B35',
+  ERROR_RED: '#FF2B5E',
+  FRINGY_FLOWER_GREEN: '#C6E7C0',
+  GRAY: '#818181',
+  LIGHT_GRAY: '#D1D1D1',
+  MID_GRAY: '#696973',
   PIGEON_POST_BLUE_ALPHA_0_5: 'rgba(176, 196, 222, 0.5)',
-  RED_NOTIFICATIONS: 'rgba(255, 66, 111, 1)',
-  SCORPION_GRAY: 'rgba(87, 87, 87, 1)',
-  SEASHELL_WHITE: 'rgba(241, 240, 240, 1)',
-  SILVER: 'rgba(200, 200, 200, 1)',
+  RED_NOTIFICATIONS: '#FF426F',
+  SCORPION_GRAY: '#575757',
+  SEASHELL_WHITE: '#F1F0F0',
+  SILVER: '#C8C8C8',
   SOLID_BLACK_ALPHA_0_2: 'rgba(0, 0, 0, 0.2)',
   SOLID_BLACK_ALPHA_0_5: 'rgba(0, 0, 0, 0.5)',
-  SOLID_BLACK: 'rgba(0, 0, 0, 1)',
+  SOLID_BLACK: '#000000',
   SOLID_WHITE_ALPHA_0_2: 'rgba(255, 255, 255, 0.2)',
   SOLID_WHITE_ALPHA_0_8: 'rgba(255, 255, 255, 0.8)',
-  SOLID_WHITE: 'rgba(255, 255, 255, 1)',
-  TASMAN_GRAY: 'rgba(209, 216, 207, 1)',
+  SOLID_WHITE: '#FFFFFF',
+  TASMAN_GRAY: '#D1D8CF',
   TRANSPARENT: 'rgba(0, 0, 0, 0)',
-  WILD_SAND_WHITE: 'rgba(244, 244, 244, 1)',
+  WILD_SAND_WHITE: '#F4F4F4',
+  N50: '#F0F0F3',
+  N100: '#E8E8EA',
+  N200: '#CAC9CE',
+  N500: '#6D6A78',
+  N700: '#393B45',
 }
 
 export const WEBCHAT = {
@@ -171,9 +176,11 @@ export const ROLES = {
   WEBVIEW: 'webview',
   WEBVIEW_HEADER: 'webview-header',
   MESSAGE: 'message',
+  SYSTEM_MESSAGE: 'system-message',
   IMAGE_MESSAGE: 'image-message',
   AUDIO_MESSAGE: 'audio-message',
   VIDEO_MESSAGE: 'video-message',
   DOCUMENT_MESSAGE: 'document-message',
   RAW_MESSAGE: 'raw-message',
+  SYSTEM_DEBUG_TRACE_MESSAGE: 'system-debug-trace-message',
 }

package/src/index-types.ts

@@ -17,6 +17,7 @@ import {
   ReplyProps,
   WebchatSettingsProps,
 } from './components'
+import { ChunkIdsGroupedBySourceData } from './components/system-debug-trace/events/knowledge-bases-types'
 import { CloseWebviewOptions } from './contexts'
 import { UseWebchat } from './webchat/context/use-webchat'
 import {
@@ -48,6 +49,7 @@ export interface WebchatRef {
     session,
     lastRoutePath,
   }: AddBotResponseArgs) => void
+  addSystemResponse: ({ response }: AddSystemResponseArgs) => void
   setTyping: (typing: boolean) => void
   addUserMessage: (message: any) => Promise<void>
   updateUser: (userToUpdate: any) => void
@@ -75,6 +77,19 @@ interface AddBotResponseArgs {
   lastRoutePath?: any
 }
 
+interface AddSystemResponseArgs {
+  response: any
+}
+
+export interface PreviewUtils {
+  getChunkIdsGroupedBySource: (
+    chunkIds: string[]
+  ) => Promise<ChunkIdsGroupedBySourceData[]>
+  onClickOpenChunks: (
+    chunkIdsGroupedBySource: ChunkIdsGroupedBySourceData[]
+  ) => void
+}
+
 export interface WebchatArgs {
   theme?: Partial<WebchatTheme>
   persistentMenu?: PersistentMenuOptionsTheme
@@ -99,6 +114,7 @@ export interface WebchatArgs {
   appId?: string
   visibility?: boolean | (() => boolean) | 'dynamic'
   server?: ServerConfig
+  previewUtils?: PreviewUtils
 }
 
 export interface WebchatProps {
@@ -121,6 +137,7 @@ export interface WebchatProps {
   host?: any
   server?: ServerConfig
   localWebviews?: React.ComponentType[]
+  previewUtils?: PreviewUtils
 }
 
 export type EventArgs = { [key: string]: any }
@@ -134,6 +151,7 @@ export enum SENDERS {
   bot = 'bot',
   user = 'user',
   agent = 'agent',
+  system = 'system',
 }
 
 export enum Typing {
@@ -197,4 +215,4 @@ interface UpdateMessageInfoEvent {
 }
 
 export { CaseEventQueuePositionChangedInput } from '@botonic/core'
-export { WebchatTheme }
+export { ChunkIdsGroupedBySourceData, WebchatTheme }

package/src/message-utils.js

@@ -15,6 +15,8 @@ export const isContact = msg => isOfType(msg.type, INPUT.CONTACT)
 export const isCarousel = msg => isOfType(msg.type, INPUT.CAROUSEL)
 export const isCustom = msg => isOfType(msg.type, INPUT.CUSTOM)
 export const isButtonMessage = msg => isOfType(msg.type, INPUT.BUTTON_MESSAGE)
+export const isSystemDebugTrace = msg =>
+  isOfType(msg.type, INPUT.SYSTEM_DEBUG_TRACE)
 
 export const INPUT_MEDIA_TYPES = [
   INPUT.AUDIO,

package/src/msg-to-botonic.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import React from 'react'
 
 import { Audio } from './components/audio'
@@ -11,6 +12,7 @@ import { Location } from './components/location'
 import { Pic } from './components/pic'
 import { Reply } from './components/reply'
 import { Subtitle } from './components/subtitle'
+import { SystemDebugTrace } from './components/system-debug-trace'
 import { Text } from './components/text'
 import { Title } from './components/title'
 import { Video } from './components/video'
@@ -22,6 +24,7 @@ import {
   isDocument,
   isImage,
   isLocation,
+  isSystemDebugTrace,
   isText,
   isVideo,
 } from './message-utils'
@@ -94,6 +97,8 @@ export function msgToBotonic(msg, customMessageTypes = []) {
         </Text>
       </>
     )
+  } else if (isSystemDebugTrace(msg)) {
+    return <SystemDebugTrace {...msg} key={msg.key} />
   }
   console.warn(`Not converting message of type ${msg.type}`)
   return null

package/src/webchat/context/messages-reducer.ts

@@ -50,7 +50,8 @@ function addMessageComponent(
   const messageComponent = action.payload
   const isUnreadMessage =
     messageComponent.props?.isUnread &&
-    messageComponent.props?.sentBy !== SENDERS.user
+    messageComponent.props?.sentBy !== SENDERS.user &&
+    messageComponent.props?.sentBy !== SENDERS.system
 
   const numUnreadMessages = isUnreadMessage
     ? state.numUnreadMessages + 1
@@ -115,8 +116,11 @@ function updateMessageReducer(
       ? getUpdatedMessagesJSON(state, msgIndex, action.payload)
       : state.messagesJSON
 
-    const numUnreadMessages = state.messagesComponents.filter(
-      messageComponent => messageComponent.props.isUnread
+    const numUnreadMessages = updatedMessagesComponents.filter(
+      messageComponent =>
+        messageComponent.props?.isUnread &&
+        messageComponent.props?.sentBy !== SENDERS.user &&
+        messageComponent.props?.sentBy !== SENDERS.system
     ).length
 
     return {

package/src/webchat/context/types.ts

@@ -2,7 +2,11 @@ import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 
 import { Reply, WebchatSettingsProps, Webview } from '../../components'
 import { CloseWebviewOptions } from '../../contexts'
-import { TrackEventFunction, WebchatMessage } from '../../index-types'
+import {
+  PreviewUtils,
+  TrackEventFunction,
+  WebchatMessage,
+} from '../../index-types'
 import { WebchatTheme } from '../theme/types'
 
 export interface ErrorMessage {
@@ -86,6 +90,7 @@ export interface WebchatContextProps {
   updateUser: (user: Partial<ClientUser>) => void
   updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
   trackEvent?: TrackEventFunction
+  previewUtils?: PreviewUtils
   webchatState: WebchatState
   webchatContainerRef: React.MutableRefObject<HTMLDivElement | null>
   chatAreaRef: React.MutableRefObject<HTMLDivElement | null>

package/src/webchat/message-list/index.tsx

@@ -1,15 +1,16 @@
+import { INPUT } from '@botonic/core'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 
 import { ROLES } from '../../constants'
+import { SENDERS } from '../../index-types'
 import { WebchatContext } from '../../webchat/context'
 import { BotonicContainerId } from '../constants'
 import TypingIndicator from '../typing-indicator'
 import { IntroMessage } from './intro-message'
 import { ScrollButton } from './scroll-button'
-import { ContainerMessage, ScrollableMessageList } from './styles'
+import { MessageContainer, ScrollableMessageList } from './styles'
 import { UnreadMessagesBanner } from './unread-messages-banner'
 import { useNotifications } from './use-notifications'
-
 const SCROLL_TIMEOUT = 200
 const scrollOptionsEnd: ScrollIntoViewOptions = {
   block: 'end',
@@ -133,16 +134,29 @@ export const WebchatMessageList = () => {
       >
         <IntroMessage />
         {webchatState.messagesComponents.map((messageComponent, index) => {
+          const messageId = messageComponent.props.id
+          const sentBySystem = messageComponent.props?.sentBy === SENDERS.system
+
+          // Check if system message is followed by a regular message (user/bot)
+          const nextMessage = webchatState.messagesComponents[index + 1]
+          const isSystemMessageFollowedByMessage =
+            sentBySystem &&
+            nextMessage &&
+            nextMessage.props?.sentBy !== SENDERS.system
+
           return (
-            <React.Fragment key={messageComponent.props.id}>
-              <ContainerMessage role={ROLES.MESSAGE}>
-                {showUnreadMessagesBanner(messageComponent.props.id) && (
+            <React.Fragment key={messageId}>
+              <MessageContainer
+                role={sentBySystem ? ROLES.SYSTEM_MESSAGE : ROLES.MESSAGE}
+                $isLastSystemMessage={isSystemMessageFollowedByMessage}
+              >
+                {showUnreadMessagesBanner(messageId) && (
                   <UnreadMessagesBanner
                     unreadMessagesBannerRef={unreadMessagesBannerRef}
                   />
                 )}
                 {messageComponent}
-              </ContainerMessage>
+              </MessageContainer>
               {index === webchatState.messagesComponents.length - 1 && (
                 <div
                   ref={lastMessageRef}

package/src/webchat/message-list/styles.ts

@@ -1,12 +1,18 @@
 import styled from 'styled-components'
 
-export const ContainerMessage = styled.div`
+interface MessageContainerProps {
+  $isLastSystemMessage?: boolean
+}
+
+export const MessageContainer = styled.div<MessageContainerProps>`
   display: flex;
   overflow-x: hidden;
   flex-direction: column;
   flex: none;
   white-space: pre;
   word-wrap: break-word;
+  margin-bottom: ${({ $isLastSystemMessage }) =>
+    $isLastSystemMessage ? '8px' : '0'};
 `
 
 export const DefaultIntroImage = styled.img`

package/src/webchat/webchat.tsx

@@ -486,6 +486,19 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
 
       updateLastMessageDate(currentDateString())
     },
+    addSystemResponse: ({ response }) => {
+      if (Array.isArray(response)) {
+        response.forEach(r => {
+          addMessageComponent({ ...r, props: { ...r.props, isUnread: false } })
+        })
+      } else if (response) {
+        addMessageComponent({
+          ...response,
+          props: { ...response.props, isUnread: false },
+        })
+      }
+      updateLastMessageDate(currentDateString())
+    },
     setTyping: (typing: boolean) => updateTyping(typing),
     addUserMessage: message => sendInput(message),
     updateUser: updateSessionWithUser,
@@ -658,6 +671,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
         updateUser: updateSessionWithUser,
         updateWebchatDevSettings: updateWebchatDevSettings,
         trackEvent: props.onTrackEvent,
+        previewUtils: props.previewUtils,
         webchatState,
         webchatContainerRef,
         chatAreaRef,