Skip to content

Commit 6b8b2c9

Browse files
aerovulpeaerovulpe
committed
demo(chatkitty): initialize project
1 parent f72b846 commit 6b8b2c9

File tree

11 files changed

+176
-0
lines changed

11 files changed

+176
-0
lines changed

‎README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -848,6 +848,34 @@ Example:
848848
<br>
849849

850850
## Using with ChatKitty
851+
ChatKitty provides a full-featured UI to customize vue-advanced-chat easily without having to write or manage any chat code — frontend or backend. You can find more information on how to use ChatKitty with vue-advanced-chat in the [ChatKitty documentation](https://chatkitty.com/docs).
852+
853+
- Create a free ChatKitty account here [https://console.chatkitty.com](https://console.chatkitty.com)
854+
- Create a project and get your widget ID
855+
- Install the ChatKitty Vue package: `npm install @chatkitty/vue`
856+
- Import and use the ChatKitty Vue component in your Vue app:
857+
858+
```vue
859+
<script setup>
860+
import {ChatUi} from '@chatkitty/vue'
861+
</script>
862+
863+
<template>
864+
<div style="width: 100vw; height: 100svh">
865+
<!-- Replace widgetId with your widget ID from console.chatkitty.com -->
866+
<!-- Remove mode="sandbox" in production environment -->
867+
<ChatUi
868+
widgetId="5IKgX7UHsLr1cWJ5"
869+
username=username
870+
mode="sandbox"/>
871+
</div>
872+
</template>
873+
```
874+
875+
You can find a full example in the `demo/chatkitty` folder.
876+
877+
Customize your vue-advanced-chat theme and features using the ChatKitty console, setting the feature schema version to `vue-advanced-chat@2` in your project settings:
878+
![ChatKitty Console](demo/chatkitty/assets/chatkitty-console.png)
851879

852880
## Using with Firestore
853881

‎demo/chatkitty/.gitignore‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?
29+
30+
*.tsbuildinfo

‎demo/chatkitty/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# chatkitty
2+
3+
This template should help get you started developing with Vue 3 in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
8+
9+
## Recommended Browser Setup
10+
11+
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
12+
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
13+
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
14+
- Firefox:
15+
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
16+
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
17+
18+
## Customize configuration
19+
20+
See [Vite Configuration Reference](https://vite.dev/config/).
21+
22+
## Project Setup
23+
24+
```sh
25+
npm install
26+
```
27+
28+
### Compile and Hot-Reload for Development
29+
30+
```sh
31+
npm run dev
32+
```
33+
34+
### Compile and Minify for Production
35+
36+
```sh
37+
npm run build
38+
```

‎demo/chatkitty/assets/chatkitty-console.png‎

80.8 KB
Loading

‎demo/chatkitty/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="/favicon.ico">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎demo/chatkitty/jsconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"paths": {
4+
"@/*": ["./src/*"]
5+
}
6+
},
7+
"exclude": ["node_modules", "dist"]
8+
}

‎demo/chatkitty/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "chatkitty",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"engines": {
7+
"node": "^20.19.0 || >=22.12.0"
8+
},
9+
"scripts": {
10+
"dev": "vite",
11+
"build": "vite build",
12+
"preview": "vite preview"
13+
},
14+
"dependencies": {
15+
"@chatkitty/vue": "^1.1.0",
16+
"vue": "^3.5.22"
17+
},
18+
"devDependencies": {
19+
"@vitejs/plugin-vue": "^6.0.1",
20+
"vite": "^7.1.7",
21+
"vite-plugin-vue-devtools": "^8.0.2"
22+
}
23+
}

‎demo/chatkitty/public/favicon.ico‎

4.19 KB
Binary file not shown.

‎demo/chatkitty/src/App.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup>
2+
import {ChatUi} from '@chatkitty/vue'
3+
</script>
4+
5+
<template>
6+
<div style="width: 100vw; height: 100svh">
7+
<!-- Replace widgetId with your widget ID from console.chatkitty.com -->
8+
<!-- Remove mode="sandbox" in production environment -->
9+
<ChatUi
10+
widgetId="5IKgX7UHsLr1cWJ5"
11+
username=username
12+
mode="sandbox"/>
13+
</div>
14+
</template>

‎demo/chatkitty/src/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

0 commit comments

Comments
 (0)