Skip to content

Commit b5f7256

Browse files
AhyoungRyuAhyoungRyu
committed
feat: Add js sample page
1 parent 7600202 commit b5f7256

File tree

10 files changed

+1172
-0
lines changed

10 files changed

+1172
-0
lines changed

‎.github/workflows/deploy.yml

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
jobs:
15+
build-and-deploy:
16+
runs-on: ubuntu-latest
17+
environment:
18+
name: github-pages
19+
url: ${{ steps.deployment.outputs.page_url }}
20+
21+
steps:
22+
- name: Checkout
23+
uses: actions/checkout@v4
24+
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: '20'
29+
30+
- name: Setup pnpm
31+
uses: pnpm/action-setup@v2
32+
with:
33+
version: '8'
34+
35+
- name: Install dependencies
36+
working-directory: js/samples/basic
37+
run: pnpm install
38+
39+
- name: Build
40+
working-directory: js/samples/basic
41+
run: pnpm build
42+
43+
- name: Setup Pages
44+
uses: actions/configure-pages@v4
45+
46+
- name: Upload artifact
47+
uses: actions/upload-pages-artifact@v3
48+
with:
49+
path: './js/samples/basic/dist'
50+
51+
- name: Deploy to GitHub Pages
52+
id: deployment
53+
uses: actions/deploy-pages@v4

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
**/node_modules
2+
**/dist

‎js/samples/basic/.env

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
VITE_APP_ID=2FE6BC0F-C3E7-4A27-8549-1A49AE6E3406
2+
VITE_AI_AGENT_ID=4uYl0g4Cj3Q51u7vlIPdM
3+
VITE_CUSTOM_API_HOST=https://api-no2.sendbirdtest.com
4+
VITE_CUSTOM_WS_HOST=wss://ws-no2.sendbirdtest.com
5+
6+
VITE_NEW_APP_ID=5B306480-5E40-40BA-A702-EA0935B4898D
7+
VITE_NEW_AI_AGENT_ID=4131e150-1845-417a-976f-15d262c66ad1
8+
VITE_NEW_CUSTOM_API_HOST=https://api-no5.sendbirdtest.com
9+
VITE_NEW_CUSTOM_WS_HOST=wss://ws-no5.sendbirdtest.com
10+
VITE_NEW_USER_ID=aiagent-test-user
11+
VITE_NEW_USER_AUTH_TOKEN=d1d4002af98c4e8654f96efa60c1561cf9162784

‎js/samples/basic/README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# AI Agent Messenger Sample - Basic
2+
3+
A basic example demonstrating how to integrate the AI Agent Messenger into a web application without any additional dependencies.
4+
5+
## Prerequisites
6+
7+
- Node.js >= 20.0.0
8+
- pnpm >= 8.0.0
9+
10+
## Installation
11+
12+
```bash
13+
// under js/samples/basic dir
14+
pnpm install
15+
```
16+
17+
## Development
18+
19+
To start the development server:
20+
21+
```bash
22+
pnpm dev
23+
```
24+
25+
The application will be available at `http://localhost:5173`
26+
27+

‎js/samples/basic/index.html

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
<!doctype html>
2+
<html lang="en" class="h-full bg-gray-50">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>AI Agent Messenger Quick Start</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css">
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
13+
<style>
14+
.CodeMirror {
15+
height: auto;
16+
border-radius: 0.375rem;
17+
font-size: 0.875rem;
18+
padding: 0.5rem;
19+
}
20+
</style>
21+
</head>
22+
<body class="h-full">
23+
<div class="min-h-full">
24+
<div class="bg-white shadow">
25+
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
26+
<h1 class="text-3xl font-bold tracking-tight text-gray-900">AI Agent Messenger Quick Start</h1>
27+
</div>
28+
</div>
29+
<main>
30+
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
31+
<div class="px-4 py-6 sm:px-0">
32+
<div class="flex gap-6">
33+
<div class="w-2/3 overflow-hidden bg-white shadow sm:rounded-lg">
34+
<div class="px-4 py-5 sm:p-6">
35+
<div class="space-y-6">
36+
<!-- Required Section -->
37+
<div class="border-b border-gray-200 pb-6">
38+
<h2 class="text-2xl font-bold leading-6 text-gray-900">Getting Started</h2>
39+
<p class="mb-6 mt-3 text-base text-gray-500">
40+
This guide demonstrates how to integrate the AI Agent Messenger using vanilla JavaScript, making it easy to implement in any browser environment without additional dependencies.
41+
</p>
42+
<div>
43+
<h3 class="text-lg font-medium leading-6 text-gray-900">
44+
Step 1. Install AI Agent SDK
45+
</h3>
46+
<p class="mt-2 text-sm text-gray-500">
47+
Add the AI Agent SDK to your web page by importing it as a module.
48+
</p>
49+
<div class="mt-4">
50+
<textarea id="loadScript" class="code-editor-html">
51+
<script type="module">
52+
import { loadMessenger } from "https://aiagent.sendbird.com/orgs/default/index.js";
53+
</script></textarea>
54+
</div>
55+
56+
<h3 class="text-lg font-medium leading-6 text-gray-900 mt-6">
57+
Step 2. Initialize Messenger
58+
</h3>
59+
<p class="mt-2 text-sm text-gray-500">
60+
The messenger will be initialized and opened automatically after 2 seconds.
61+
</p>
62+
<div class="mt-4">
63+
<textarea id="initializeCode" class="code-editor-js">
64+
const messenger = await loadMessenger();
65+
await messenger.initialize({
66+
appId: 'APP_ID',
67+
aiAgentId: 'AI_AGENT_ID',
68+
});
69+
70+
// open the messenger automatically after 2 seconds
71+
setTimeout(() => {
72+
messenger.open();
73+
}, 2000);
74+
</textarea>
75+
</div>
76+
</div>
77+
</div>
78+
79+
<!-- Advanced Section -->
80+
<div class="pt-6">
81+
<h2 class="text-xl font-bold leading-6 text-gray-900 mb-6">Advanced Features</h2>
82+
83+
<div class="space-y-8">
84+
<div>
85+
<h3 class="text-lg font-medium leading-6 text-gray-900">Switch Application</h3>
86+
<p class="mt-2 text-sm text-gray-500">Change to a different application configuration.</p>
87+
<div class="mt-4">
88+
<textarea id="updateConfigCode" class="code-editor-js">
89+
await messenger.updateConfig({
90+
appId: 'NEW_APP_ID',
91+
aiAgentId: 'NEW_AI_AGENT_ID',
92+
// ... other config options
93+
});</textarea>
94+
</div>
95+
<button id="updateConfigBtn" class="mt-3 inline-flex items-center rounded-md bg-[#742ddd] px-3 py-2 text-sm text-white shadow-sm hover:bg-[#6211c8]">
96+
Update Config
97+
</button>
98+
</div>
99+
100+
<div>
101+
<h3 class="text-lg font-medium leading-6 text-gray-900">User Authentication</h3>
102+
<p class="mt-2 text-sm text-gray-500">Set up user authentication for personalized experience.</p>
103+
<div class="mt-4">
104+
<textarea id="updateSessionCode" class="code-editor-js">
105+
await messenger.updateUserSession({
106+
userId: 'new_user_id',
107+
authToken: 'new_auth_token',
108+
// this callback should handle session token refresh:
109+
onSessionTokenRequest: async () => {
110+
const response = await fetch('new-token-endpoint');
111+
return response.token;
112+
}
113+
});</textarea>
114+
</div>
115+
<button id="updateSessionBtn" class="mt-3 inline-flex items-center rounded-md bg-[#742ddd] px-3 py-2 text-sm text-white shadow-sm hover:bg-[#6211c8]">
116+
Update Session
117+
</button>
118+
</div>
119+
120+
<div>
121+
<h3 class="text-lg font-medium leading-6 text-gray-900">Manual Controls</h3>
122+
<p class="mt-2 text-sm text-gray-500">Manually control the messenger visibility.</p>
123+
<div class="mt-4">
124+
<textarea id="controlCode" class="code-editor-js">
125+
function openAgent() {
126+
if (!messenger) return;
127+
messenger.open();
128+
}
129+
130+
function closeAgent() {
131+
if (!messenger) return;
132+
messenger.close();
133+
}</textarea>
134+
</div>
135+
<div class="mt-3 space-x-3">
136+
<button id="openBtn" class="inline-flex items-center rounded-md bg-[#742ddd] px-3 py-2 text-sm text-white shadow-sm hover:bg-[#6211c8]">
137+
Open Messenger
138+
</button>
139+
<button id="closeBtn" class="inline-flex items-center rounded-md bg-[#742ddd] px-3 py-2 text-sm text-white shadow-sm hover:bg-[#6211c8]">
140+
Close Messenger
141+
</button>
142+
</div>
143+
</div>
144+
145+
<div>
146+
<h3 class="text-lg font-medium leading-6 text-gray-900">Conversation List Display</h3>
147+
<p class="mt-2 text-sm text-gray-500">Display conversation list in a designated area without launcher.</p>
148+
<div class="mt-4">
149+
<textarea id="customDisplayCode" class="code-editor-js">
150+
await messenger.initialize({
151+
appId: 'APP_ID',
152+
aiAgentId: 'AI_AGENT_ID',
153+
// Use Conversation component to display only the messenger without the launcher
154+
customMainComponent: ({ messenger }) => (props) => (
155+
<messenger.AgentProviderContainer {...props}>
156+
<messenger.Conversation />
157+
</messenger.AgentProviderContainer>
158+
),
159+
});
160+
</textarea>
161+
</div>
162+
<button id="renderConversationListBtn" class="mt-3 inline-flex items-center rounded-md bg-[#742ddd] px-3 py-2 text-sm text-white shadow-sm hover:bg-[#6211c8]">
163+
Open Conversation List
164+
</button>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
</div>
174+
</main>
175+
</div>
176+
177+
<!-- Code Editor -->
178+
<script>
179+
const editors = {};
180+
const configs = {
181+
mode: 'javascript',
182+
theme: 'dracula',
183+
readOnly: true,
184+
viewportMargin: Infinity,
185+
height: 'auto'
186+
}
187+
document.querySelectorAll('.code-editor-js').forEach((element) => {
188+
editors[element.id] = CodeMirror.fromTextArea(element, configs);
189+
});
190+
document.querySelectorAll('.code-editor-html').forEach((element) => {
191+
editors[element.id] = CodeMirror.fromTextArea(element, { ...configs, mode: 'xml' });
192+
});
193+
</script>
194+
195+
<!-- Live Demo -->
196+
<script type="module">
197+
import { loadMessenger } from 'https://aiagent.stg.sendbirdtest.com/orgs/default/index.js';
198+
199+
const messenger = await loadMessenger();
200+
await messenger.initialize({
201+
appId: import.meta.env.VITE_APP_ID,
202+
aiAgentId: import.meta.env.VITE_AI_AGENT_ID,
203+
customApiHost: import.meta.env.VITE_CUSTOM_API_HOST,
204+
customWebSocketHost: import.meta.env.VITE_CUSTOM_WS_HOST,
205+
rootElement: document.getElementById('messenger-container'),
206+
});
207+
208+
// open the messenger automatically after 2 seconds
209+
setTimeout(() => {
210+
messenger.open();
211+
}, 2000);
212+
213+
document.getElementById('updateConfigBtn').addEventListener('click', () => {
214+
messenger.updateConfig({
215+
// try to switch to another app
216+
appId: import.meta.env.VITE_NEW_APP_ID,
217+
aiAgentId: import.meta.env.VITE_NEW_AI_AGENT_ID,
218+
customApiHost: import.meta.env.VITE_NEW_CUSTOM_API_HOST,
219+
customWebSocketHost: import.meta.env.VITE_NEW_CUSTOM_WS_HOST,
220+
});
221+
});
222+
document.getElementById('updateSessionBtn').addEventListener('click', () => {
223+
messenger.updateUserSession({
224+
// try to use an existing test user with its auth token
225+
userId: import.meta.env.VITE_USER_ID,
226+
authToken: import.meta.env.VITE_USER_AUTH_TOKEN,
227+
onSessionTokenRequest: async (resolve) => resolve(import.meta.env.VITE_USER_AUTH_TOKEN),
228+
});
229+
});
230+
231+
document.getElementById('openBtn').addEventListener('click', () => {
232+
if (!messenger) return;
233+
messenger.open();
234+
});
235+
236+
document.getElementById('closeBtn').addEventListener('click', () => {
237+
if (!messenger) return;
238+
messenger.close();
239+
});
240+
241+
document.getElementById('renderConversationListBtn').addEventListener('click', async () => {
242+
messenger.destroy();
243+
const conversationListMessenger = await loadMessenger({
244+
customMainComponent: ({ messenger, react }) => (props) => {
245+
return react.createElement(messenger.AgentProviderContainer, props, [
246+
react.createElement(messenger.ConversationList),
247+
]);
248+
}
249+
});
250+
await conversationListMessenger.initialize({
251+
appId: import.meta.env.VITE_APP_ID,
252+
aiAgentId: import.meta.env.VITE_AI_AGENT_ID,
253+
customApiHost: import.meta.env.VITE_CUSTOM_API_HOST,
254+
customWebSocketHost: import.meta.env.VITE_CUSTOM_WS_HOST,
255+
rootElement: document.getElementById('messenger-container'),
256+
});
257+
});
258+
</script>
259+
</body>
260+
</html>

‎js/samples/basic/package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"private": true,
3+
"name": "ai-agent-messenger-sample-basic",
4+
"version": "0.0.1",
5+
"description": "AI Agent Messenger Sample - Basic",
6+
"type": "module",
7+
"scripts": {
8+
"preinstall": "npx only-allow pnpm",
9+
"prepare": "corepack enable",
10+
"install": "pnpm prepare && pnpm preinstall",
11+
"dev": "vite",
12+
"build": "vite build"
13+
},
14+
"packageManager": "pnpm@8.15.4",
15+
"engines": {
16+
"node": ">=20.0.0",
17+
"pnpm": ">=8.0.0"
18+
},
19+
"dependencies": {
20+
"@tailwindcss/vite": "^4.0.15",
21+
"tailwindcss": "^4.0.15",
22+
"vite": "^5.1.4"
23+
}
24+
}

0 commit comments

Comments
 (0)