[SBTW-1940] Optimize Interactive Demo

dist/CodeBlock-eef27473.mjs → dist/CodeBlock-3ca0ea81.mjs

@@ -1,4 +1,4 @@
-import { j as e } from "./index-0cbad462.mjs";
+import { j as e } from "./index-83624634.mjs";
 import { CopyBlock as r, irBlack as t } from "react-code-blocks";
 import "react";
 import "react-dom";

dist/__bundle-2aa1a987-fe05b42f.mjs → dist/__bundle-2aa1a987-96c85f83.mjs

@@ -1,4 +1,4 @@
-import { c as F } from "./index-0cbad462.mjs";
+import { c as F } from "./index-83624634.mjs";
 function I(s, h) {
   for (var b = 0; b < h.length; b++) {
     const c = h[b];

dist/__bundle-aece11ae-29c47242.mjs → dist/__bundle-aece11ae-79610f69.mjs

@@ -1,4 +1,4 @@
-import { L as S, g as s, R as X, a as m, P as y, Y as I, H as N, X as b } from "./index-0cbad462.mjs";
+import { L as S, g as s, R as X, a as m, P as y, Y as I, H as N, X as b } from "./index-83624634.mjs";
 import "react";
 import "react-dom";
 var k = function(i, o) {

dist/__bundle-ba2b9764-5b81f96b.mjs → dist/__bundle-ba2b9764-b6b0c284.mjs

@@ -1,4 +1,4 @@
-import { c as g } from "./index-0cbad462.mjs";
+import { c as g } from "./index-83624634.mjs";
 function H(e, t) {
   for (var o = 0; o < t.length; o++) {
     const s = t[o];

dist/bundle-f5U_VL0z-143f938a.mjs → dist/bundle-f5U_VL0z-16fab16d.mjs

@@ -1,4 +1,4 @@
-import { V as g2 } from "./index-0cbad462.mjs";
+import { V as g2 } from "./index-83624634.mjs";
 import "react";
 import "react-dom";
 function Mt(H) {

dist/components/Chat.d.ts

@@ -1,5 +1,5 @@
 import { type Props as ChatWidgetProps } from './ChatAiWidget';
-declare const Chat: ({ applicationId, botId, hashedKey, isOpen, ...constantProps }: ChatWidgetProps & {
+declare const Chat: ({ apiHost, applicationId, botId, hashedKey, isOpen, ...constantProps }: ChatWidgetProps & {
     isOpen: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Chat;

dist/const.d.ts

@@ -12,6 +12,7 @@ type FirstMessageItem = {
     message: string;
 };
 export interface Constant {
+    apiHost?: string;
     botCategory: string;
     botNickName: string;
     userId: string;

dist/index.es.js

@@ -1,4 +1,4 @@
-import { b as r, C as m } from "./index-0cbad462.mjs";
+import { b as r, C as m } from "./index-83624634.mjs";
 import "react";
 import "react-dom";
 export {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/chat-ai-widget",
-  "version": "1.1.0-interactive-demo-fintech-19",
+  "version": "1.1.0-interactive-demo-fintech-20",
   "description": "Sendbird Chat AI Widget,\n Detailed documentation can be found at https://github.com/sendbird/chat-ai-widget#readme",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",

src/components/Chat.tsx

@@ -19,10 +19,11 @@ import {
   useChatWindowLoadTime,
 } from '../hooks/useInteractiveDemoSharableData';
 import { assert, isMobile } from '../utils';
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const SBComponent = () => {
   const {
+    apiHost,
     applicationId,
     botId,
     userId,
@@ -32,10 +33,12 @@ const SBComponent = () => {
     enableMention,
   } = useConstantState();
 
+  assert(apiHost !== null, 'apiHost must be provided');
   assert(
     applicationId !== null && botId !== null,
     'applicationId and botId must be provided'
   );
+
   const { sbConnectionStatus } = useSbConnectionState();
   const sdkInitParams = useMemo(
     () => ({
@@ -62,7 +65,7 @@ const SBComponent = () => {
       appId={applicationId}
       userId={userId}
       nickname={userNickName}
-      customApiHost={`https://api-${applicationId}.sendbird.com`}
+      customApiHost={apiHost || `https://api-${applicationId}.sendbird.com`}
       customWebSocketHost={`wss://ws-${applicationId}.sendbird.com`}
       sdkInitParams={sdkInitParams}
       configureSession={configureSession}
@@ -88,6 +91,7 @@ const SBComponent = () => {
 };
 
 const Chat = ({
+  apiHost,
   applicationId,
   botId,
   hashedKey,
@@ -99,6 +103,7 @@ const Chat = ({
   const CHAT_WIDGET_APP_ID = import.meta.env.VITE_CHAT_WIDGET_APP_ID;
   const CHAT_WIDGET_BOT_ID = import.meta.env.VITE_CHAT_WIDGET_BOT_ID;
 
+  assert(apiHost !== null, 'apiHost must be provided');
   assert(
     applicationId !== null && botId !== null,
     'applicationId and botId must be provided'
@@ -119,6 +124,7 @@ const Chat = ({
       <ConstantStateProvider
         // If env is not provided, prop will be used instead.
         // But Either should be provided.
+        apiHost={apiHost}
         applicationId={CHAT_WIDGET_APP_ID ?? applicationId}
         botId={CHAT_WIDGET_BOT_ID ?? botId}
         {...constantProps}

src/components/CustomHealthcareMessageInput.tsx

@@ -507,8 +507,12 @@ export function HealthcareMessageInput({
 
   const { isPending } = useQuery({
     queryKey: ["getAIRecommendMessage", bodyInput],
-    queryFn: () =>
-      axios
+    queryFn: () => {
+      // bodyinput must includes 2 objects, role and assistant
+      const isInvalidBodyInput = !bodyInput || bodyInput.length < 2;
+      if (isInvalidBodyInput) return Promise.resolve([]);
+
+      return axios
         .post(`/api/assistant`, {
           params: {
             botId: "healthcare",
@@ -523,7 +527,8 @@ export function HealthcareMessageInput({
           setShowTip(false);
           setRecommendMessage(response.data.reply_messages[0]);
           return response.data;
-        }),
+        });
+    },
   });
 
   async function getRecommendMessage(bodyInput?: any[]) {
@@ -853,7 +858,7 @@ export function HealthcareMessageInput({
                   {showTip ? "Tips for using AI assistant" : "Suggested by AI"}
                 </AIAssistantBodyHeadText>
               </div>
-              {isPending ? (
+              {isPending || showTip ? (
                 <div
                   style={{
                     display: "flex",
@@ -869,9 +874,7 @@ export function HealthcareMessageInput({
                   type={LabelTypography.BODY_1}
                   color={LabelColors.ONBACKGROUND_1}
                 >
-                  {showTip
-                    ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor "
-                    : recommendMessage}
+                  {recommendMessage}
                 </AIAssistantBodyText>
               )}
             </TextContainer>

src/const.ts

@@ -122,6 +122,7 @@ type FirstMessageItem = {
 };
 
 export interface Constant {
+  apiHost?: string;
   botCategory: string;
   botNickName: string;
   userId: string;

src/context/ConstantContext.tsx

@@ -19,6 +19,7 @@ type ProviderProps = React.PropsWithChildren<ConstantContextProps>;
 export const ConstantStateProvider = (props: ProviderProps) => {
   const memoizedValue = useMemo(
     () => ({
+      apiHost: props.apiHost,
       applicationId: props.applicationId,
       botId: props.botId,
       botCategory: props.botCategory ?? initialState.botCategory,