Skip to content

Commit 1bba7b6

Browse files
AhyoungRyuAhyoungRyu
authored
Merge pull request #114 from sendbird/feature/add-js-sample-directories
[AA-4170] Add JS basic sample projects
2 parents 6c271ea + 94f50fc commit 1bba7b6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+3279
-75
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
**/dist
33
**/.vite
44
**/deps
5+
**/.pnpm-store
6+
**/pnpm-lock.yaml
7+
**/playwright-report/**
8+
**/test-results
59
.idea
610
CLAUDE.md
711

‎README.md‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,36 @@ To integrate Sendbird AI Agent into your application, follow these steps:
3131

3232
## Repository Structure
3333

34-
This repository contains platform-specific implementations of the Sendbird AI Agent:
34+
This repository contains platform-specific implementations and customer guides for the Sendbird AI Agent:
3535

36-
- **iOS**: Located in the `ios` directory, this includes the Swift Package Manager (SPM) compatible SDK for integrating the AI agent into iOS applications.
36+
- **JavaScript**: Located in the `js` directory, includes:
37+
- Documentation guides for React and CDN integration
38+
- Interactive live examples
39+
- Downloadable sample projects for local development
3740

38-
- **Android**: Located in the `android` directory, this includes the necessary components for Android integration.
41+
- **iOS**: Located in the `ios` directory, includes Swift integration guides and sample applications.
3942

40-
- **Web**: Located in the `js` directory, this includes JavaScript components for web integration.
43+
- **Android**: Located in the `android` directory, includes Android integration documentation.
44+
45+
### JavaScript Sample Projects
46+
47+
Each JavaScript platform directory contains a ready-to-run sample project:
48+
49+
- **`js/react/sample/`**: Vite + TypeScript + React sample with full AI Agent integration
50+
- **`js/cdn/sample/`**: Vite + Vanilla JavaScript sample using CDN integration
51+
52+
Both samples demonstrate:
53+
- Basic AI Agent Messenger integration
54+
- User authentication and session handling
55+
- Context configuration
56+
- Manual messenger controls
57+
58+
To run the samples locally:
59+
```bash
60+
cd js/react/sample # or js/cdn/sample
61+
npm install
62+
npm run dev
63+
```
4164

4265
Each platform-specific directory contains its own README with detailed integration instructions.
4366

‎js/.eslintignore‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Dependencies
2+
node_modules
3+
.pnpm-store
4+
5+
# Build outputs
6+
dist
7+
build
8+
.vite
9+
10+
# Test outputs
11+
coverage
12+
playwright-report
13+
test-results
14+
15+
# Lock files
16+
pnpm-lock.yaml
17+
package-lock.json
18+
yarn.lock
19+
20+
# IDE
21+
.idea
22+
.vscode
23+
24+
# OS
25+
.DS_Store
26+
27+
# Temporary files
28+
*.log
29+
tmp
30+
temp

‎js/.eslintrc.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"root": true,
3+
"extends": [
4+
"eslint:recommended",
5+
"plugin:@typescript-eslint/recommended",
6+
"plugin:react/recommended",
7+
"plugin:react-hooks/recommended",
8+
"prettier"
9+
],
10+
"parser": "@typescript-eslint/parser",
11+
"parserOptions": {
12+
"ecmaVersion": "latest",
13+
"sourceType": "module",
14+
"ecmaFeatures": {
15+
"jsx": true
16+
}
17+
},
18+
"plugins": ["@typescript-eslint", "react", "react-hooks"],
19+
"rules": {
20+
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1, "maxBOF": 0 }],
21+
"eol-last": ["error", "always"],
22+
"react/react-in-jsx-scope": "off",
23+
"react/prop-types": "off",
24+
"@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
25+
"@typescript-eslint/no-explicit-any": "warn"
26+
},
27+
"settings": {
28+
"react": {
29+
"version": "detect"
30+
}
31+
},
32+
"env": {
33+
"browser": true,
34+
"es2022": true,
35+
"node": true
36+
},
37+
"ignorePatterns": [
38+
"node_modules",
39+
"dist",
40+
"build",
41+
".vite",
42+
"coverage",
43+
"*.config.js",
44+
"*.config.ts",
45+
"vite.config.ts",
46+
"vitest.config.ts",
47+
"playwright.config.ts"
48+
]
49+
}

‎js/.prettierignore‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Dependencies
2+
node_modules
3+
.pnpm-store
4+
5+
# Build outputs
6+
dist
7+
build
8+
.vite
9+
10+
# Test outputs
11+
coverage
12+
playwright-report
13+
test-results
14+
15+
# Lock files
16+
pnpm-lock.yaml
17+
package-lock.json
18+
yarn.lock
19+
20+
# IDE
21+
.idea
22+
.vscode
23+
24+
# OS
25+
.DS_Store
26+
27+
# Temporary files
28+
*.log
29+
tmp
30+
temp

‎js/cdn/MULTILANGUAGE.md‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -94,20 +94,20 @@ const customLanguageConfig = {
9494
stringSet: {
9595
// Override only specific keys
9696
MESSAGE_INPUT__PLACE_HOLDER: '¡Pregúntame cualquier cosa!', // original: 'Hacer una pregunta'
97-
CONVERSATION_LIST__HEADER_TITLE: 'Lista de conversaciones anteriores' // original: 'Historial de conversaciones'
98-
}
97+
CONVERSATION_LIST__HEADER_TITLE: 'Lista de conversaciones anteriores', // original: 'Historial de conversaciones'
98+
},
9999
};
100100

101101
// Apply during initialization
102102
messenger.initialize({
103103
appId: 'YOUR_APP_ID',
104104
aiAgentId: 'YOUR_AI_AGENT_ID',
105-
...customLanguageConfig
105+
...customLanguageConfig,
106106
});
107107

108108
// Or update at runtime (affects UI only)
109109
messenger.updateConfig({
110-
...customLanguageConfig
110+
...customLanguageConfig,
111111
});
112112
```
113113

@@ -147,7 +147,7 @@ messenger.initialize({
147147
RETRY: '重试',
148148

149149
// ... and all other required strings
150-
}
150+
},
151151
});
152152
```
153153

@@ -255,7 +255,7 @@ You can easily switch between different languages at runtime, allowing users to
255255
const switchToChinese = () => {
256256
messenger.updateConfig({
257257
language: 'zh-CN',
258-
stringSet: cnStringSet // Import from your Chinese translations file
258+
stringSet: cnStringSet, // Import from your Chinese translations file
259259
});
260260
};
261261
@@ -265,19 +265,18 @@ const switchToSpanish = () => {
265265
language: 'es-ES',
266266
stringSet: {
267267
MESSAGE_INPUT__PLACE_HOLDER: '¡Pregúntame cualquier cosa!',
268-
CONVERSATION_LIST__HEADER_TITLE: 'Lista de conversaciones anteriores'
269-
}
268+
CONVERSATION_LIST__HEADER_TITLE: 'Lista de conversaciones anteriores',
269+
},
270270
});
271271
};
272272
273273
// Add buttons to let users switch languages
274274
<div>
275275
<button onClick={switchToChinese}>Switch to Chinese</button>
276276
<button onClick={switchToSpanish}>Switch back to Spanish</button>
277-
</div>
277+
</div>;
278278
```
279279
280-
281280
**Dynamically Loading Language Files:**
282281
283282
For better performance, we recommend dynamically loading only the language string set files that your users actually need. This approach reduces the initial bundle size and improves load times:
@@ -307,10 +306,9 @@ async function loadLanguageStrings(language) {
307306
// Update the messenger configuration with the loaded strings
308307
messenger.updateConfig({
309308
language,
310-
stringSet
309+
stringSet,
311310
});
312311
}
313312
```
314313
315314
This approach ensures that only the language resources needed for the current user are loaded, which is particularly important when supporting multiple languages with large string sets.
316-

‎js/cdn/README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ The **Sendbird AI Agent Messenger** allows seamless integration of chatbot featu
1212
- [Custom Host Configuration](#custom-host-configuration)
1313
- [Running your application](#running-your-application)
1414
- [Manage user sessions](#manage-user-sessions)
15+
- [Session types](#session-types)
1516
- [Launch the messenger](#launch-the-messenger)
1617
- [Advanced Features](#advanced-features)
1718
- [Display messenger without launcher button](#display-messenger-without-launcher-button)
@@ -156,7 +157,7 @@ Once the authentication information has been successfully registered, you can la
156157

157158
To launch and display the messenger, implement the code below:
158159

159-
>__Note__: Replace `YOUR_APP_ID` AND `YOUR_AI_AGENT_ID` with your Application ID and AI agent ID which you can obtain from the Sendbird Dashboard. To learn how do to so, refer to the [prerequisites](#prerequisites) section.
160+
> **Note**: Replace `YOUR_APP_ID` AND `YOUR_AI_AGENT_ID` with your Application ID and AI agent ID which you can obtain from the Sendbird Dashboard. To learn how do to so, refer to the [prerequisites](#prerequisites) section.
160161
161162
```javascript
162163
const messenger = await loadMessenger();
@@ -177,7 +178,7 @@ messenger.onLoad(() => {
177178
});
178179

179180
// Close the messenger view by clicking a button
180-
<button onClick={() => messenger.close()}>Close</button>
181+
<button onClick={() => messenger.close()}>Close</button>;
181182
```
182183

183184
To update the configurations:
@@ -210,7 +211,7 @@ const messenger = await loadMessenger({
210211
react.createElement(messenger.Conversation),
211212
]);
212213
};
213-
}
214+
},
214215
});
215216
messenger.initialize({
216217
appId: 'APP_ID',

‎js/cdn/sample/.env‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
VITE_APP_ID=F7879BE3-A59C-4134-A04A-702A1E62A9C0
2+
VITE_AI_AGENT_ID=d771785d-0e83-48f3-84b8-5624b93812e0
3+
4+
VITE_NEW_APP_ID=F7879BE3-A59C-4134-A04A-702A1E62A9C0
5+
VITE_NEW_AI_AGENT_ID=9ec48481-26d4-41b3-a3d7-68f20c0aeb1c
6+
VITE_NEW_USER_ID=aiagent-test-user
7+
VITE_NEW_USER_AUTH_TOKEN=ee30a94f682cf6cd169e7254780e18368f3054fe

‎js/cdn/sample/README.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Sendbird AI Agent CDN Interactive Playground
2+
3+
This is an interactive HTML/TypeScript playground demonstrating how to integrate the Sendbird AI Agent Messenger using the CDN script.
4+
5+
## Features
6+
7+
- TypeScript + Vite setup
8+
- Interactive playground with live code generation
9+
- CDN-based AI Agent Messenger integration
10+
- Real-time configuration controls
11+
- Context configuration with custom JSON input
12+
- Runtime context updates via patchContext API
13+
- Multi-language support
14+
- Authentication examples
15+
- Code examples with syntax highlighting
16+
- Unit tests with Vitest
17+
- Environment variable support
18+
19+
## Getting Started
20+
21+
1. Install dependencies:
22+
23+
```bash
24+
npm install
25+
```
26+
27+
2. Start the development server:
28+
29+
```bash
30+
npm run dev
31+
```
32+
33+
3. Open your browser and navigate to http://localhost:5173
34+
35+
## Usage
36+
37+
### Interactive Playground Tab
38+
39+
- Configure messenger settings using the controls on the left:
40+
- **Authentication**: Toggle user session authentication
41+
- **Language**: Select from multiple supported languages
42+
- **Context**: Choose from presets or create custom JSON context
43+
- **Runtime Updates**: Enable real-time context patching without resetting
44+
- View dynamically generated HTML/JavaScript code based on your configuration
45+
- Click the messenger launcher (bottom-right) to interact with the AI agent
46+
- Monitor runtime context updates in real-time
47+
48+
### Code Examples Tab
49+
50+
- Browse various integration examples:
51+
- Basic CDN setup
52+
- Authenticated sessions
53+
- Context configuration
54+
- Runtime updates
55+
- Multi-language support
56+
- Copy code snippets for use in your own projects
57+
58+
## Environment Variables
59+
60+
Create a `.env` file for your own credentials:
61+
62+
```
63+
VITE_APP_ID=your_app_id
64+
VITE_AI_AGENT_ID=your_ai_agent_id
65+
```
66+
67+
## Testing
68+
69+
Run unit tests:
70+
71+
```bash
72+
npm run test
73+
```
74+
75+
## Build for Production
76+
77+
```bash
78+
npm run build
79+
```
80+
81+
The built files will be in the `dist` directory.
82+
83+
## Preview Production Build
84+
85+
```bash
86+
npm run preview
87+
```
88+
89+
## Key Differences from React Integration
90+
91+
- Uses CDN script loading instead of npm packages
92+
- Direct DOM manipulation approach
93+
- Can be embedded in any HTML page

0 commit comments

Comments
 (0)