diff --git a/packages/self-service/playground.html b/packages/self-service/playground.html
deleted file mode 100644
index 17410ec10..000000000
--- a/packages/self-service/playground.html
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
-
-
-
- Chatbot playground
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/self-service/playground/chatbot-404.png b/packages/self-service/playground/chatbot-404.png
new file mode 100644
index 000000000..3222f48d7
Binary files /dev/null and b/packages/self-service/playground/chatbot-404.png differ
diff --git a/packages/self-service/playground/index.html b/packages/self-service/playground/index.html
new file mode 100644
index 000000000..37aee06ab
--- /dev/null
+++ b/packages/self-service/playground/index.html
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+ Chatbot playground
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/self-service/scripts/generateIndex.js b/packages/self-service/scripts/generateIndex.js
index 797a27514..f3ec3bb9c 100644
--- a/packages/self-service/scripts/generateIndex.js
+++ b/packages/self-service/scripts/generateIndex.js
@@ -9,5 +9,5 @@ export function generateIndexFile(version) {
const content = `import(\`/${version}/output.js\`).then(() => console.log("AI chatbot module has been successfully loaded"));`;
fs.writeFileSync('dist/index.js', content);
- fs.cpSync('playground.html', 'dist/playground/index.html');
+ fs.cpSync('playground', 'dist/playground', { recursive: true });
}
diff --git a/src/context/WidgetSettingContext.tsx b/src/context/WidgetSettingContext.tsx
index 0045d2b68..63fb7e798 100644
--- a/src/context/WidgetSettingContext.tsx
+++ b/src/context/WidgetSettingContext.tsx
@@ -46,6 +46,7 @@ export const WidgetSettingProvider = ({ children }: React.PropsWithChildren) =>
firstMessageData,
botStudioEditProps,
autoOpen,
+ callbacks,
} = useConstantState();
if (!appId || !botId) {
@@ -91,6 +92,7 @@ export const WidgetSettingProvider = ({ children }: React.PropsWithChildren) =>
botId,
userId: strategy === 'manual' ? injectedUserId : cachedSession?.userId,
})
+ .onError(callbacks?.onWidgetSettingFailure)
.onGetBotStyle((style) => setBotStyle(style))
.onAutoNonCached(({ user, channel }) => {
const session = {
diff --git a/src/libs/api/widgetSetting.ts b/src/libs/api/widgetSetting.ts
index cb3477365..89c1e490c 100644
--- a/src/libs/api/widgetSetting.ts
+++ b/src/libs/api/widgetSetting.ts
@@ -1,4 +1,6 @@
-import { resolvePath } from '../../utils';
+import { SendbirdError } from '@sendbird/chat';
+
+import { noop, resolvePath } from '../../utils';
type APIResponse = {
bot_style: {
@@ -69,7 +71,7 @@ export async function getWidgetSetting({
const response = await fetch(path);
const result = await response.json();
if (!response.ok) {
- throw new Error(result.message || 'Something went wrong');
+ throw new SendbirdError(result);
}
const json = result as APIResponse;
@@ -119,33 +121,30 @@ export const widgetSettingHandler = (
AutoCached: (response: { channel?: ResponseChannel }) => void;
ManualNonCached: (response?: { channel: ResponseChannel }) => void;
ManualCached: (response: { channel?: ResponseChannel }) => void;
+ Error: (error: Error) => void;
};
const callbacks: {
+ onError: Callbacks['Error'];
onGetBotStyle: Callbacks['BotStyle'];
onAutoNonCached: Callbacks['AutoNonCached'];
onAutoCached: Callbacks['AutoCached'];
onManualNonCached: Callbacks['ManualNonCached'];
onManualCached: Callbacks['ManualCached'];
} = {
- onGetBotStyle: () => {
- /* empty */
- },
- onAutoNonCached: () => {
- /* empty */
- },
- onAutoCached: () => {
- /* empty */
- },
- onManualNonCached: () => {
- /* empty */
- },
- onManualCached: () => {
- /* empty */
- },
+ onError: noop,
+ onGetBotStyle: noop,
+ onAutoNonCached: noop,
+ onAutoCached: noop,
+ onManualNonCached: noop,
+ onManualCached: noop,
};
const handlers = {
+ onError: (callback?: Callbacks['Error']) => {
+ if (callback) callbacks.onError = callback;
+ return handlers;
+ },
onGetBotStyle: (callback: Callbacks['BotStyle']) => {
callbacks.onGetBotStyle = callback;
return handlers;
@@ -167,16 +166,20 @@ export const widgetSettingHandler = (
return handlers;
},
get: async () => {
- const response = await getWidgetSetting({
- host: params.host,
- appId: params.appId,
- botId: params.botId,
- ...getParamsByStrategy(strategy, useCachedSession, params),
- });
-
- callbacks.onGetBotStyle(response.botStyle);
- if (strategy === 'auto') handleAutoStrategy(response);
- if (strategy === 'manual') handleManualStrategy(response);
+ try {
+ const response = await getWidgetSetting({
+ host: params.host,
+ appId: params.appId,
+ botId: params.botId,
+ ...getParamsByStrategy(strategy, useCachedSession, params),
+ });
+
+ callbacks.onGetBotStyle(response.botStyle);
+ if (strategy === 'auto') handleAutoStrategy(response);
+ if (strategy === 'manual') handleManualStrategy(response);
+ } catch (error) {
+ if (error instanceof Error) callbacks.onError(error);
+ }
},
};
diff --git a/src/types.ts b/src/types.ts
index a78e37b0f..0fd1c669a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -4,6 +4,7 @@ export interface SendbirdChatAICallbacks {
* @private Callback to be called when the widget expand state changes.
*/
onWidgetExpandStateChange?: (isExpanded: boolean) => void;
+ onWidgetSettingFailure?: (error: Error) => void;
}
export interface FunctionCallRequestInfo {
+