3 |
3 |
4 |
5 | 
6 |
7 |
8 | 
9 |
10 |
11 | 
12 |
13 |
14 | 
15 |
16 |
17 | 
18 |
19 |
20 | # Cheshire Cat Admin UI 🐱
21 |
22 | This is the source code to build the admin client for the Cheshire Cat AI.
23 |
24 | ## About the project
25 |
26 | The Cheshire Cat is a framework to build long-tail AIs:
27 |
28 | - Language model agnostic, allows compatibility with OpenAI, Cohere, HuggingFace, and custom models
29 | - Long-term memory storage capabilities
30 | - Seamless integration with external tools, such as APIs and other models
31 | - Ability to ingest various document formats, including PDFs and text files
32 | - 100% dockerized for simple and efficient deployment
33 | - Extensibility via plugins, offering unparalleled flexibility to users.
34 |
35 | ### Pre-requisites
36 |
37 | Make sure you have the following installed on your machine:
38 |
39 | ```bash
40 | node v18.15+
41 | ```
42 |
43 | ### Installation
44 |
45 | This project uses `pnpm` as the package manager. You can install it by running:
46 |
47 | ```bash
48 | npm install -g pnpm
49 | ```
50 |
51 | Then, install the dependencies:
52 |
53 | ```bash
54 | pnpm install
55 | ```
56 |
57 | ### Scripts
58 |
59 | Here's a list of scripts that you can run to get the app up and running
60 |
61 | #### Dev mode
62 |
63 | Run the app in dev mode with hot-reloading enabled and the browser automatically opening on port `3000` (default)
64 |
65 | ```bash
66 | pnpm run dev
67 | ```
68 |
69 | #### Build
70 |
71 | Build the app for production
72 |
73 | ```bash
74 | pnpm run build
75 | ```
76 |
77 | #### Start the app
78 |
79 | Runs the build and serves the built app on port `3000` (default)
80 |
81 | ```bash
82 | pnpm run preview
83 | ```
84 |
--------------------------------------------------------------------------------
/components.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // @ts-nocheck
3 | // Generated by unplugin-vue-components
4 | // Read more: https://github.com/vuejs/core/pull/3399
5 | export {}
6 |
7 | /* prettier-ignore */
8 | declare module 'vue' {
9 | export interface GlobalComponents {
10 | CheckBox: typeof import('./src/components/CheckBox.vue')['default']
11 | Dialog: typeof import('@headlessui/vue')['Dialog']
12 | DialogPanel: typeof import('@headlessui/vue')['DialogPanel']
13 | DialogTitle: typeof import('@headlessui/vue')['DialogTitle']
14 | DynamicForm: typeof import('./src/components/DynamicForm.vue')['default']
15 | ErrorBox: typeof import('./src/components/ErrorBox.vue')['default']
16 | Header: typeof import('./src/components/Header.vue')['default']
17 | HeroiconsAdjustmentsVertical: typeof import('~icons/heroicons/adjustments-vertical')['default']
18 | HeroiconsArrowDown20Solid: typeof import('~icons/heroicons/arrow-down20-solid')['default']
19 | HeroiconsArrowPath: typeof import('~icons/heroicons/arrow-path')['default']
20 | HeroiconsArrowRightOnRectangle: typeof import('~icons/heroicons/arrow-right-on-rectangle')['default']
21 | HeroiconsBars3Solid: typeof import('~icons/heroicons/bars3-solid')['default']
22 | HeroiconsBoltSolid: typeof import('~icons/heroicons/bolt-solid')['default']
23 | HeroiconsChevronUpDown20Solid: typeof import('~icons/heroicons/chevron-up-down20-solid')['default']
24 | HeroiconsClipboard: typeof import('~icons/heroicons/clipboard')['default']
25 | HeroiconsCloudArrowDownSolid: typeof import('~icons/heroicons/cloud-arrow-down-solid')['default']
26 | HeroiconsCog6Tooth20Solid: typeof import('~icons/heroicons/cog6-tooth20-solid')['default']
27 | HeroiconsDocumentTextSolid: typeof import('~icons/heroicons/document-text-solid')['default']
28 | HeroiconsGlobeAlt: typeof import('~icons/heroicons/globe-alt')['default']
29 | HeroiconsHome20Solid: typeof import('~icons/heroicons/home20-solid')['default']
30 | HeroiconsInformationCircleSolid: typeof import('~icons/heroicons/information-circle-solid')['default']
31 | HeroiconsLink20Solid: typeof import('~icons/heroicons/link20-solid')['default']
32 | HeroiconsMagnifyingGlass20Solid: typeof import('~icons/heroicons/magnifying-glass20-solid')['default']
33 | HeroiconsMicrophoneSolid: typeof import('~icons/heroicons/microphone-solid')['default']
34 | HeroiconsMoonSolid: typeof import('~icons/heroicons/moon-solid')['default']
35 | HeroiconsPaperAirplaneSolid: typeof import('~icons/heroicons/paper-airplane-solid')['default']
36 | HeroiconsSunSolid: typeof import('~icons/heroicons/sun-solid')['default']
37 | HeroiconsTrashSolid: typeof import('~icons/heroicons/trash-solid')['default']
38 | HeroiconsUserSolid: typeof import('~icons/heroicons/user-solid')['default']
39 | HeroiconsXMark20Solid: typeof import('~icons/heroicons/x-mark20-solid')['default']
40 | InputBox: typeof import('./src/components/InputBox.vue')['default']
41 | Listbox: typeof import('@headlessui/vue')['Listbox']
42 | ListboxButton: typeof import('@headlessui/vue')['ListboxButton']
43 | ListboxOption: typeof import('@headlessui/vue')['ListboxOption']
44 | ListboxOptions: typeof import('@headlessui/vue')['ListboxOptions']
45 | MemorySelect: typeof import('./src/components/MemorySelect.vue')['default']
46 | Menu: typeof import('@headlessui/vue')['Menu']
47 | MenuButton: typeof import('@headlessui/vue')['MenuButton']
48 | MenuItem: typeof import('@headlessui/vue')['MenuItem']
49 | MenuItems: typeof import('@headlessui/vue')['MenuItems']
50 | MessageBox: typeof import('./src/components/MessageBox.vue')['default']
51 | ModalBox: typeof import('./src/components/ModalBox.vue')['default']
52 | NotificationStack: typeof import('./src/components/NotificationStack.vue')['default']
53 | Pagination: typeof import('./src/components/Pagination.vue')['default']
54 | PhArrowCounterClockwiseBold: typeof import('~icons/ph/arrow-counter-clockwise-bold')['default']
55 | PhBrainFill: typeof import('~icons/ph/brain-fill')['default']
56 | PhCaretLeftFill: typeof import('~icons/ph/caret-left-fill')['default']
57 | PhCaretRightFill: typeof import('~icons/ph/caret-right-fill')['default']
58 | PhChatCenteredDots: typeof import('~icons/ph/chat-centered-dots')['default']
59 | PhChats: typeof import('~icons/ph/chats')['default']
60 | PhExportBold: typeof import('~icons/ph/export-bold')['default']
61 | PhFileFill: typeof import('~icons/ph/file-fill')['default']
62 | PhFiles: typeof import('~icons/ph/files')['default']
63 | PhFloppyDiskBold: typeof import('~icons/ph/floppy-disk-bold')['default']
64 | PhInfo: typeof import('~icons/ph/info')['default']
65 | PhLightbulbFilamentFill: typeof import('~icons/ph/lightbulb-filament-fill')['default']
66 | PhListMagnifyingGlass: typeof import('~icons/ph/list-magnifying-glass')['default']
67 | PhNut: typeof import('~icons/ph/nut')['default']
68 | PhPencilFill: typeof import('~icons/ph/pencil-fill')['default']
69 | PhPlugFill: typeof import('~icons/ph/plug-fill')['default']
70 | PhPlus: typeof import('~icons/ph/plus')['default']
71 | PhQuestionMark: typeof import('~icons/ph/question-mark')['default']
72 | PhTextbox: typeof import('~icons/ph/textbox')['default']
73 | PhToolbox: typeof import('~icons/ph/toolbox')['default']
74 | PhTrashFill: typeof import('~icons/ph/trash-fill')['default']
75 | RouterLink: typeof import('vue-router')['RouterLink']
76 | RouterView: typeof import('vue-router')['RouterView']
77 | SelectBox: typeof import('./src/components/SelectBox.vue')['default']
78 | SidePanel: typeof import('./src/components/SidePanel.vue')['default']
79 | TransitionChild: typeof import('@headlessui/vue')['TransitionChild']
80 | TransitionRoot: typeof import('@headlessui/vue')['TransitionRoot']
81 | UseImage: typeof import('@vueuse/components')['UseImage']
82 | UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.7'
2 |
3 | services:
4 | cheshire-cat-admin:
5 | build:
6 | context: .
7 | container_name: cheshire_cat_admin
8 | ports:
9 | - 3000:3000
10 | volumes:
11 | - ./:/app
12 | restart: unless-stopped
13 |
--------------------------------------------------------------------------------
/e2e/Example.spec.ts:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { test, expect } from '@playwright/test'
3 |
4 | test('has title', async ({ page }) => {
5 | await page.goto('https://playwright.dev/')
6 | await expect(page).toHaveTitle(/Playwright/)
7 | })
8 |
9 | test('get started link', async ({ page }) => {
10 | await page.goto('https://playwright.dev/')
11 | await page.getByRole('link', { name: 'Get started' }).click()
12 | await expect(page).toHaveURL(/.*intro/)
13 | })
14 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 
22 |
62 | 43 | {{ item.metadata.docstring ? `${item.metadata.docstring}` : item.page_content }} 44 |
45 |{{ item.metadata.source }} {{ item.metadata.name ? `(${item.metadata.name})` : '' }}
47 |{{ new Date(item.metadata.when * 1000).toLocaleString() }}
48 |69 | No {{ selectedCollection }} memories were used. 70 |
71 |Cheshire Cat is thinking...
71 |{{ file.name.substring(0, file.name.lastIndexOf('.')) }}
93 |{{ fileTypeSize }}
94 |{{ data[0][0] }}
118 |{{ data[0][1] }}
122 |{{ data[1] }}
129 |
6 | 404
7 |
8 | Cat Not Found
9 |
10 | You’ve stumbled down the wrong rabbit hole!
11 |
199 | Drop 200 | files 201 | to send to the Cheshire Cat, meow! 202 |
203 | 206 |220 | {{ messagesState.error }} 221 |
222 |225 | 226 | Cheshire Cat is thinking... 227 |
228 |Write down the URL you want the Cat to digest :
340 |220 | Are you sure you want to wipe 221 | 222 | {{ selectCollection?.selected.label.toLowerCase() }} 223 | 224 | the collections? 225 |
226 |227 | Are you sure you want to wipe the 228 | 229 | {{ selectCollection?.selected.label.toLowerCase() }} 230 | 231 | collection? 232 |
233 |377 | {{ callOutput.embedder }} 378 |
379 |Installed plugins: {{ pluginsState.data?.installed?.length ?? 0 }}
128 | 129 |162 | {{ item.name }} 163 | 168 | v{{ item.version }} 169 | ➡ {{ item.upgrade }} 170 | 171 |
172 |No plugins found with this name.
261 |- {{ name }}
270 |- {{ name }}
275 |286 | Are you sure you want to remove the 287 | 288 | {{ selectedPlugin?.name }} 289 | 290 | plugin? 291 |
292 |79 | Cheshire Cat AI - Version 80 | 81 | {{ cat ? cat.version : 'unknown' }} 82 | 83 |
84 | {{ cat.status }} 85 |Large Language Model
88 |Set and configure your favourite LLM from a list of supported providers
89 |Embedder
99 |Set a language embedder to help the Cat remember conversations and documents
100 |Auth Handler
110 |Set an auth handler to manage how your application authenticates with the Cat
111 |Users Management
123 | 139 || 144 | | ID | 145 |Name | 146 |Permissions | 147 |Actions | 148 |
|---|---|---|---|---|
| {{ index + 1 }} | 153 |{{ item.id }} | 154 |{{ item.username }} | 155 |156 | {{ 157 | Object.keys(item.permissions ?? {}) 158 | .filter(r => item.permissions?.[r]?.length) 159 | .map(r => startCase(lowerCase(r))) 160 | .join(' - ') 161 | }} 162 | | 163 |
164 |
165 |
170 |
197 |
171 |
182 |
183 |
184 |
195 |
196 | |
198 |
Are you sure you want to delete this user?
204 |205 | You are trying to delete 206 | {{ currentUser!.username }} 207 | . This action cannot be undone! 208 |
209 |Permissions
240 | 279 |Hello dear cat!
') 18 | 19 | expect(wrapper.find('.chat-footer button').exists()).toBe(false) 20 | 21 | expect(wrapper.findComponent({ name: 'SidePanel' }).exists()).toBe(false) 22 | }) 23 | it('renders properly for bot', () => { 24 | const wrapper = mount(MessageBox, { 25 | props: { 26 | sender: 'bot', 27 | text: 'Hello dear human!', 28 | when: new Date(), 29 | why: { 30 | input: 'Hello dear human!', 31 | intermediate_steps: [], 32 | memory: {}, 33 | }, 34 | }, 35 | }) 36 | 37 | expect(wrapper.find('.chat-image').text()).toContain('😺') 38 | 39 | expect(wrapper.find('.chat-bubble p').html()).toContain('Hello dear human!
') 40 | 41 | expect(wrapper.find('.chat-footer button').exists()).toBe(true) 42 | 43 | expect(wrapper.findComponent({ name: 'SidePanel' }).exists()).toBe(true) 44 | }) 45 | }) 46 | -------------------------------------------------------------------------------- /unit/ModalBox.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest' 2 | import { mount } from '@vue/test-utils' 3 | import ModalBox from '@components/ModalBox.vue' 4 | 5 | describe('ModalBox', () => { 6 | it('renders properly', () => { 7 | const wrapper = mount(ModalBox, { 8 | slots: { 9 | default: 'My slot content', 10 | }, 11 | }) 12 | 13 | expect(wrapper.exists()).toBe(true) 14 | 15 | // TODO: is empty (wtf?) 16 | console.log('Slot:', wrapper.html()) 17 | 18 | //expect(wrapper.getComponent({ name: 'DialogPanel' }).text()).toContain('All') 19 | }) 20 | }) 21 | -------------------------------------------------------------------------------- /unit/NotificationStack.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest' 2 | import { createTestingPinia } from '@pinia/testing' 3 | import { mount } from '@vue/test-utils' 4 | import { useNotifications } from '@stores/useNotifications' 5 | import NotificationStack from '@components/NotificationStack.vue' 6 | 7 | describe('NotificationStack', () => { 8 | it('renders properly', () => { 9 | const wrapper = mount(NotificationStack, { 10 | global: { 11 | plugins: [ 12 | createTestingPinia({ 13 | stubActions: false, 14 | fakeApp: true, 15 | }), 16 | ], 17 | }, 18 | }) 19 | 20 | const { showNotification } = useNotifications() 21 | 22 | showNotification({ 23 | text: 'Test', 24 | type: 'success', 25 | }) 26 | 27 | expect(showNotification).toHaveBeenCalledTimes(1) 28 | 29 | // TODO: Doesn't show the v-for generated div 30 | console.log('text:', wrapper.html()) 31 | //expect(wrapper.find(".alert[key='n_1']").text()).toContain('Test') 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /unit/SelectBox.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest' 2 | import { mount } from '@vue/test-utils' 3 | import SelectBox from '@components/SelectBox.vue' 4 | 5 | describe('SelectBox', () => { 6 | it('renders properly', () => { 7 | const wrapper = mount(SelectBox, { 8 | props: { 9 | list: [{ label: 'All', value: 'all' }], 10 | }, 11 | }) 12 | 13 | expect(wrapper.getComponent({ name: 'ListboxButton' }).text()).toContain('All') 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /vite.config.mts: -------------------------------------------------------------------------------- 1 | import tsconfigPaths from 'vite-tsconfig-paths' 2 | import { configDefaults, defineConfig } from 'vitest/config' 3 | import vue from '@vitejs/plugin-vue' 4 | import Icons from 'unplugin-icons/vite' 5 | import IconsResolver from 'unplugin-icons/resolver' 6 | import { HeadlessUiResolver, VueUseComponentsResolver } from 'unplugin-vue-components/resolvers' 7 | import Components from 'unplugin-vue-components/vite' 8 | import Unfonts from 'unplugin-fonts/vite' 9 | import AutoImport from 'unplugin-auto-import/vite' 10 | 11 | export default defineConfig({ 12 | plugins: [ 13 | vue(), 14 | AutoImport({ 15 | dts: true, 16 | imports: ['vue', 'vue-router', '@vueuse/core', 'pinia', 'vitest'], 17 | eslintrc: { 18 | enabled: true, 19 | }, 20 | dirs: ['./src/composables', './src/utils'], 21 | }), 22 | Components({ 23 | dts: true, 24 | resolvers: [HeadlessUiResolver({ prefix: '' }), IconsResolver({ prefix: '' }), VueUseComponentsResolver()], 25 | }), 26 | Icons({ autoInstall: true }), 27 | Unfonts({ 28 | custom: { 29 | families: [ 30 | { 31 | name: 'Rubik', 32 | local: 'Rubik', 33 | src: './src/assets/fonts/*.ttf', 34 | }, 35 | ], 36 | display: 'auto', 37 | preload: true, 38 | prefetch: false, 39 | }, 40 | }), 41 | tsconfigPaths(), 42 | { 43 | name: 'configure-token', 44 | configureServer(server) { 45 | return () => { 46 | server.middlewares.use(async (_, res, next) => { 47 | const output = await ( 48 | await fetch('http://localhost:1865/auth/token', { 49 | method: 'POST', 50 | headers: { 51 | 'Content-Type': 'application/json', 52 | }, 53 | body: JSON.stringify({ 54 | username: 'admin', 55 | password: 'admin', 56 | }), 57 | }) 58 | ).json() 59 | res.setHeader('Set-Cookie', `ccat_user_token=${output.access_token}`) 60 | next() 61 | }) 62 | } 63 | }, 64 | }, 65 | ], 66 | test: { 67 | environment: 'jsdom', 68 | globals: true, 69 | exclude: [...configDefaults.exclude, 'e2e/*'], 70 | }, 71 | server: { 72 | port: 3000, 73 | open: false, 74 | host: true, 75 | }, 76 | build: { 77 | outDir: 'dist', 78 | assetsDir: 'assets', 79 | cssCodeSplit: false, 80 | rollupOptions: { 81 | output: { 82 | minifyInternalExports: true, 83 | entryFileNames: 'assets/cat.js', 84 | assetFileNames: info => `assets/${info.name?.endsWith('css') ? 'cat' : '[name]'}[extname]`, 85 | chunkFileNames: 'chunk.js', 86 | manualChunks: () => 'chunk.js', 87 | generatedCode: { 88 | preset: 'es2015', 89 | constBindings: true, 90 | objectShorthand: true, 91 | }, 92 | }, 93 | }, 94 | }, 95 | }) 96 | --------------------------------------------------------------------------------