Examples: Add multimodal app (#2328)
This commit is contained in:
Dev Khant
2
examples/multimodal-demo/.gitattributes
vendored
Normal file
2
examples/multimodal-demo/.gitattributes
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# Auto detect text files and perform LF normalization
|
||||||
|
* text=auto
|
||||||
29
examples/multimodal-demo/.gitignore
vendored
Normal file
29
examples/multimodal-demo/.gitignore
vendored
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
**/.env
|
||||||
|
**/node_modules
|
||||||
|
**/dist
|
||||||
|
**/.DS_Store
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
20
examples/multimodal-demo/components.json
Normal file
20
examples/multimodal-demo/components.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "tailwind.config.js",
|
||||||
|
"css": "src/index.css",
|
||||||
|
"baseColor": "zinc",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/libs/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/libs",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
}
|
||||||
|
}
|
||||||
28
examples/multimodal-demo/eslint.config.js
Normal file
28
examples/multimodal-demo/eslint.config.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
13
examples/multimodal-demo/index.html
Normal file
13
examples/multimodal-demo/index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/mem0_logo.jpeg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>JustChat | Chat with AI</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -24,9 +24,11 @@
|
|||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"framer-motion": "^11.11.11",
|
"framer-motion": "^11.11.11",
|
||||||
"lucide-react": "^0.454.0",
|
"lucide-react": "^0.454.0",
|
||||||
|
"openai": "^4.86.2",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-markdown": "^9.0.1",
|
"react-markdown": "^9.0.1",
|
||||||
|
"mem0ai": "2.1.2",
|
||||||
"tailwind-merge": "^2.5.4",
|
"tailwind-merge": "^2.5.4",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"zod": "^3.23.8"
|
"zod": "^3.23.8"
|
||||||
@@ -46,6 +48,7 @@
|
|||||||
"tailwindcss": "^3.4.14",
|
"tailwindcss": "^3.4.14",
|
||||||
"typescript": "~5.6.2",
|
"typescript": "~5.6.2",
|
||||||
"typescript-eslint": "^8.11.0",
|
"typescript-eslint": "^8.11.0",
|
||||||
"vite": "^5.4.10"
|
"vite": "^6.2.1"
|
||||||
}
|
},
|
||||||
|
"packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
|
||||||
}
|
}
|
||||||
6
examples/multimodal-demo/postcss.config.js
Normal file
6
examples/multimodal-demo/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
examples/multimodal-demo/public/mem0_logo.jpeg
Normal file
BIN
examples/multimodal-demo/public/mem0_logo.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
13
examples/multimodal-demo/src/App.tsx
Normal file
13
examples/multimodal-demo/src/App.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import Home from "./page"
|
||||||
|
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Home />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
BIN
examples/multimodal-demo/src/assets/mem0_logo.jpeg
Normal file
BIN
examples/multimodal-demo/src/assets/mem0_logo.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
1
examples/multimodal-demo/src/assets/react.svg
Normal file
1
examples/multimodal-demo/src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
BIN
examples/multimodal-demo/src/assets/user.jpg
Normal file
BIN
examples/multimodal-demo/src/assets/user.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,91 @@
|
|||||||
|
import { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react'
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { Label } from "@/components/ui/label"
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||||||
|
import GlobalContext from '@/contexts/GlobalContext'
|
||||||
|
import { Provider } from '@/constants/messages'
|
||||||
|
export default function ApiSettingsPopup(props: { isOpen: boolean, setIsOpen: Dispatch<SetStateAction<boolean>> }) {
|
||||||
|
const {isOpen, setIsOpen} = props
|
||||||
|
const [mem0ApiKey, setMem0ApiKey] = useState('')
|
||||||
|
const [providerApiKey, setProviderApiKey] = useState('')
|
||||||
|
const [provider, setProvider] = useState('OpenAI')
|
||||||
|
const { selectorHandler, selectedOpenAIKey, selectedMem0Key, selectedProvider } = useContext(GlobalContext);
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
// Here you would typically save the settings to your backend or local storage
|
||||||
|
selectorHandler(mem0ApiKey, providerApiKey, provider as Provider);
|
||||||
|
setIsOpen(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedOpenAIKey) {
|
||||||
|
setProviderApiKey(selectedOpenAIKey);
|
||||||
|
}
|
||||||
|
if (selectedMem0Key) {
|
||||||
|
setMem0ApiKey(selectedMem0Key);
|
||||||
|
}
|
||||||
|
if (selectedProvider) {
|
||||||
|
setProvider(selectedProvider);
|
||||||
|
}
|
||||||
|
}, [selectedOpenAIKey, selectedMem0Key, selectedProvider]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||||
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>API Configuration Settings</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid gap-4 py-4">
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label htmlFor="mem0-api-key" className="text-right">
|
||||||
|
Mem0 API Key
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="mem0-api-key"
|
||||||
|
value={mem0ApiKey}
|
||||||
|
onChange={(e) => setMem0ApiKey(e.target.value)}
|
||||||
|
className="col-span-3 rounded-3xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label htmlFor="provider-api-key" className="text-right">
|
||||||
|
Provider API Key
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="provider-api-key"
|
||||||
|
value={providerApiKey}
|
||||||
|
onChange={(e) => setProviderApiKey(e.target.value)}
|
||||||
|
className="col-span-3 rounded-3xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label htmlFor="provider" className="text-right">
|
||||||
|
Provider
|
||||||
|
</Label>
|
||||||
|
<Select value={provider} onValueChange={setProvider}>
|
||||||
|
<SelectTrigger className="col-span-3 rounded-3xl">
|
||||||
|
<SelectValue placeholder="Select provider" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className='rounded-3xl'>
|
||||||
|
<SelectItem value="openai" className='rounded-3xl'>OpenAI</SelectItem>
|
||||||
|
<SelectItem value="anthropic" className='rounded-3xl'>Anthropic</SelectItem>
|
||||||
|
<SelectItem value="cohere" className='rounded-3xl'>Cohere</SelectItem>
|
||||||
|
<SelectItem value="groq" className='rounded-3xl'>Groq</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button className='rounded-3xl' variant="outline" onClick={() => setIsOpen(false)}>Cancel</Button>
|
||||||
|
<Button className='rounded-3xl' onClick={handleSave}>Save</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
35
examples/multimodal-demo/src/components/chevron-toggle.tsx
Normal file
35
examples/multimodal-demo/src/components/chevron-toggle.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const ChevronToggle = (props: {
|
||||||
|
isMemoriesExpanded: boolean;
|
||||||
|
setIsMemoriesExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
|
}) => {
|
||||||
|
const { isMemoriesExpanded, setIsMemoriesExpanded } = props;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="relaive">
|
||||||
|
<div className="flex items-center absolute top-1/2 z-10">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 border-y border rounded-lg relative right-10"
|
||||||
|
onClick={() => setIsMemoriesExpanded(!isMemoriesExpanded)}
|
||||||
|
aria-label={
|
||||||
|
isMemoriesExpanded ? "Collapse memories" : "Expand memories"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{isMemoriesExpanded ? (
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
) : (
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChevronToggle;
|
||||||
81
examples/multimodal-demo/src/components/header.tsx
Normal file
81
examples/multimodal-demo/src/components/header.tsx
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { ChevronRight, X, RefreshCcw, Settings } from "lucide-react";
|
||||||
|
import { Dispatch, SetStateAction, useContext, useEffect, useState } from "react";
|
||||||
|
import GlobalContext from "../contexts/GlobalContext";
|
||||||
|
import { Input } from "./ui/input";
|
||||||
|
|
||||||
|
const Header = (props: {
|
||||||
|
setIsSettingsOpen: Dispatch<SetStateAction<boolean>>;
|
||||||
|
}) => {
|
||||||
|
const { setIsSettingsOpen } = props;
|
||||||
|
const { selectUserHandler, clearUserHandler, selectedUser, clearConfiguration } = useContext(GlobalContext);
|
||||||
|
const [userId, setUserId] = useState<string>("");
|
||||||
|
|
||||||
|
const handleSelectUser = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setUserId(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClearUser = () => {
|
||||||
|
clearUserHandler();
|
||||||
|
setUserId("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
selectUserHandler(userId);
|
||||||
|
};
|
||||||
|
|
||||||
|
// New function to handle key down events
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault(); // Prevent form submission if it's in a form
|
||||||
|
handleSubmit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedUser) {
|
||||||
|
setUserId(selectedUser);
|
||||||
|
}
|
||||||
|
}, [selectedUser]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header className="border-b p-4 flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-xl font-semibold">Mem0 Assistant</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2 text-sm">
|
||||||
|
<div className="flex">
|
||||||
|
<Input
|
||||||
|
placeholder="UserId"
|
||||||
|
className="w-full rounded-3xl pr-6 pl-4"
|
||||||
|
value={userId}
|
||||||
|
onChange={handleSelectUser}
|
||||||
|
onKeyDown={handleKeyDown} // Attach the key down handler here
|
||||||
|
/>
|
||||||
|
<Button variant="ghost" size="icon" onClick={handleClearUser} className="relative hover:bg-transparent hover:text-neutral-400 right-8">
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="icon" onClick={handleSubmit} className="relative right-6">
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button variant="ghost" size="icon" onClick={clearConfiguration}>
|
||||||
|
<RefreshCcw className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setIsSettingsOpen(true)}
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
107
examples/multimodal-demo/src/components/input-area.tsx
Normal file
107
examples/multimodal-demo/src/components/input-area.tsx
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import GlobalContext from "@/contexts/GlobalContext";
|
||||||
|
import { FileInfo } from "@/types";
|
||||||
|
import { Images, Send, X } from "lucide-react";
|
||||||
|
import { useContext, useRef, useState } from "react";
|
||||||
|
|
||||||
|
const InputArea = () => {
|
||||||
|
const [inputValue, setInputValue] = useState("");
|
||||||
|
const { handleSend, selectedFile, setSelectedFile, setFile } = useContext(GlobalContext);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const ref = useRef<HTMLInputElement>(null);
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||||
|
|
||||||
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = event.target.files?.[0]
|
||||||
|
if (file) {
|
||||||
|
setSelectedFile({
|
||||||
|
name: file.name,
|
||||||
|
type: file.type,
|
||||||
|
size: file.size
|
||||||
|
})
|
||||||
|
setFile(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSendController = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setInputValue("");
|
||||||
|
await handleSend(inputValue);
|
||||||
|
setLoading(false);
|
||||||
|
|
||||||
|
// focus on input
|
||||||
|
setTimeout(() => {
|
||||||
|
ref.current?.focus();
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClosePopup = () => {
|
||||||
|
setSelectedFile(null)
|
||||||
|
if (fileInputRef.current) {
|
||||||
|
fileInputRef.current.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="border-t p-4">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="relative bottom-3 left-5">
|
||||||
|
<div className="absolute">
|
||||||
|
<Input
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
ref={fileInputRef}
|
||||||
|
className="sr-only"
|
||||||
|
id="file-upload"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="file-upload"
|
||||||
|
className="flex items-center justify-center w-6 h-6 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 cursor-pointer"
|
||||||
|
>
|
||||||
|
<Images className="h-4 w-4" />
|
||||||
|
</label>
|
||||||
|
{selectedFile && <FileInfoPopup file={selectedFile} onClose={handleClosePopup} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
value={inputValue}
|
||||||
|
onChange={(e) => setInputValue(e.target.value)}
|
||||||
|
onKeyDown={(e) => e.key === "Enter" && handleSendController()}
|
||||||
|
placeholder="Type a message..."
|
||||||
|
className="flex-1 pl-10 rounded-3xl"
|
||||||
|
disabled={loading}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
<div className="relative right-14 bottom-5 flex">
|
||||||
|
<Button className="absolute rounded-full w-10 h-10 bg-transparent hover:bg-transparent cursor-pointer z-20 text-primary" onClick={handleSendController} disabled={!inputValue.trim() || loading}>
|
||||||
|
<Send className="h-8 w-8" size={50} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FileInfoPopup = ({ file, onClose }: { file: FileInfo, onClose: () => void }) => {
|
||||||
|
return (
|
||||||
|
<div className="relative bottom-36">
|
||||||
|
<div className="absolute top-full left-0 mt-1 bg-white dark:bg-gray-800 p-2 rounded-md shadow-md border border-gray-200 dark:border-gray-700 z-10 w-48">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<h3 className="font-semibold text-sm truncate">{file.name}</h3>
|
||||||
|
<Button variant="ghost" size="sm" onClick={onClose} className="h-5 w-5 p-0">
|
||||||
|
<X className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">Type: {file.type}</p>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400">Size: {(file.size / 1024).toFixed(2)} KB</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default InputArea;
|
||||||
84
examples/multimodal-demo/src/components/memories.tsx
Normal file
84
examples/multimodal-demo/src/components/memories.tsx
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { ScrollArea } from "@radix-ui/react-scroll-area";
|
||||||
|
import { Memory } from "../types";
|
||||||
|
import GlobalContext from "@/contexts/GlobalContext";
|
||||||
|
import { useContext } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const MemoryItem = ({ memory }: { memory: Memory; index: number }) => {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
layout
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -20 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
key={memory.id}
|
||||||
|
className="space-y-2"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<p className="text-sm font-medium">{memory.content}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2 text-xs text-muted-foreground">
|
||||||
|
<span>{new Date(memory.timestamp).toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{memory.tags.map((tag) => (
|
||||||
|
<Badge key={tag} variant="secondary" className="text-xs">
|
||||||
|
{tag}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Memories = (props: { isMemoriesExpanded: boolean }) => {
|
||||||
|
const { isMemoriesExpanded } = props;
|
||||||
|
const { memories } = useContext(GlobalContext);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={`border-l rounded-none flex flex-col transition-all duration-300 ${
|
||||||
|
isMemoriesExpanded ? "w-80" : "w-0 overflow-hidden"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="px-4 py-[22px] border-b">
|
||||||
|
<span className="font-semibold">
|
||||||
|
Relevant Memories ({memories.length})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{memories.length === 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="p-4 text-center"
|
||||||
|
>
|
||||||
|
<span className="font-semibold">No relevant memories found.</span>
|
||||||
|
<br />
|
||||||
|
Only the relevant memories will be displayed here.
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
<ScrollArea className="flex-1 p-4">
|
||||||
|
<motion.div
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
{/* <AnimatePresence mode="popLayout"> */}
|
||||||
|
{memories.map((memory: Memory, index: number) => (
|
||||||
|
<MemoryItem
|
||||||
|
key={memory.id}
|
||||||
|
memory={memory}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{/* </AnimatePresence> */}
|
||||||
|
</motion.div>
|
||||||
|
</ScrollArea>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Memories;
|
||||||
102
examples/multimodal-demo/src/components/messages.tsx
Normal file
102
examples/multimodal-demo/src/components/messages.tsx
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { Message } from "../types";
|
||||||
|
import { useContext, useEffect, useRef } from "react";
|
||||||
|
import GlobalContext from "@/contexts/GlobalContext";
|
||||||
|
import Markdown from "react-markdown";
|
||||||
|
import Mem00Logo from "../assets/mem0_logo.jpeg";
|
||||||
|
import UserLogo from "../assets/user.jpg";
|
||||||
|
|
||||||
|
const Messages = () => {
|
||||||
|
const { messages, thinking } = useContext(GlobalContext);
|
||||||
|
const scrollAreaRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// scroll to bottom
|
||||||
|
useEffect(() => {
|
||||||
|
if (scrollAreaRef.current) {
|
||||||
|
scrollAreaRef.current.scrollTop += 40; // Scroll down by 40 pixels
|
||||||
|
}
|
||||||
|
}, [messages, thinking]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ScrollArea ref={scrollAreaRef} className="flex-1 p-4 pr-10">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{messages.map((message: Message) => (
|
||||||
|
<div
|
||||||
|
key={message.id}
|
||||||
|
className={`flex ${
|
||||||
|
message.sender === "user" ? "justify-end" : "justify-start"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`flex items-start space-x-2 max-w-[80%] ${
|
||||||
|
message.sender === "user"
|
||||||
|
? "flex-row-reverse space-x-reverse"
|
||||||
|
: "flex-row"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="h-full flex flex-col items-center justify-end">
|
||||||
|
<Avatar className="h-8 w-8">
|
||||||
|
<AvatarImage
|
||||||
|
src={
|
||||||
|
message.sender === "assistant" ? Mem00Logo : UserLogo
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<AvatarFallback>
|
||||||
|
{message.sender === "assistant" ? "AI" : "U"}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`rounded-xl px-3 py-2 ${
|
||||||
|
message.sender === "user"
|
||||||
|
? "bg-blue-500 text-white rounded-br-none"
|
||||||
|
: "bg-muted text-muted-foreground rounded-bl-none"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{message.image && (
|
||||||
|
<div className="w-44 flex items-center justify-center overflow-hidden rounded-lg">
|
||||||
|
<img
|
||||||
|
src={message.image}
|
||||||
|
alt="Message attachment"
|
||||||
|
className="my-2 rounded-lg max-w-full h-auto w-44 mx-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Markdown>{message.content}</Markdown>
|
||||||
|
<span className="text-xs opacity-50 mt-1 block text-end relative bottom-1 -mb-2">
|
||||||
|
{message.timestamp}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{thinking && (
|
||||||
|
<div className={`flex justify-start`}>
|
||||||
|
<div
|
||||||
|
className={`flex items-start space-x-2 max-w-[80%] flex-row`}
|
||||||
|
>
|
||||||
|
<Avatar className="h-8 w-8">
|
||||||
|
<AvatarImage src={Mem00Logo} />
|
||||||
|
<AvatarFallback>{"AI"}</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div
|
||||||
|
className={`rounded-lg p-3 bg-muted text-muted-foreground`}
|
||||||
|
>
|
||||||
|
<div className="loader">
|
||||||
|
<div className="ball"></div>
|
||||||
|
<div className="ball"></div>
|
||||||
|
<div className="ball"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Messages;
|
||||||
50
examples/multimodal-demo/src/components/ui/avatar.tsx
Normal file
50
examples/multimodal-demo/src/components/ui/avatar.tsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||||
|
|
||||||
|
import { cn } from "@/libs/utils"
|
||||||
|
|
||||||
|
const Avatar = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Avatar.displayName = AvatarPrimitive.Root.displayName
|
||||||
|
|
||||||
|
const AvatarImage = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Image>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Image
|
||||||
|
ref={ref}
|
||||||
|
className={cn("aspect-square h-full w-full", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName
|
||||||
|
|
||||||
|
const AvatarFallback = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Fallback
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
|
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback }
|
||||||
36
examples/multimodal-demo/src/components/ui/badge.tsx
Normal file
36
examples/multimodal-demo/src/components/ui/badge.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/libs/utils"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
||||||
|
outline: "text-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
57
examples/multimodal-demo/src/components/ui/button.tsx
Normal file
57
examples/multimodal-demo/src/components/ui/button.tsx
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/libs/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||||
|
outline:
|
||||||
|
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||||
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2",
|
||||||
|
sm: "h-8 rounded-md px-3 text-xs",
|
||||||
|
lg: "h-10 rounded-md px-8",
|
||||||
|
icon: "h-9 w-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Button.displayName = "Button"
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
76
examples/multimodal-demo/src/components/ui/card.tsx
Normal file
76
examples/multimodal-demo/src/components/ui/card.tsx
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/libs/utils"
|
||||||
|
|
||||||
|
const Card = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl border bg-card text-card-foreground shadow",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Card.displayName = "Card"
|
||||||
|
|
||||||
|
const CardHeader = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardHeader.displayName = "CardHeader"
|
||||||
|
|
||||||
|
const CardTitle = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLHeadingElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<h3
|
||||||
|
ref={ref}
|
||||||
|
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardTitle.displayName = "CardTitle"
|
||||||
|
|
||||||
|
const CardDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardDescription.displayName = "CardDescription"
|
||||||
|
|
||||||
|
const CardContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||||
|
))
|
||||||
|
CardContent.displayName = "CardContent"
|
||||||
|
|
||||||
|
const CardFooter = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex items-center p-6 pt-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardFooter.displayName = "CardFooter"
|
||||||
|
|
||||||
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||||
120
examples/multimodal-demo/src/components/ui/dialog.tsx
Normal file
120
examples/multimodal-demo/src/components/ui/dialog.tsx
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { Cross2Icon } from "@radix-ui/react-icons"
|
||||||
|
|
||||||
|
import { cn } from "@/libs/utils"
|
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root
|
||||||
|
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger
|
||||||
|
|
||||||
|
const DialogPortal = DialogPrimitive.Portal
|
||||||
|
|
||||||
|
const DialogClose = DialogPrimitive.Close
|
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DialogPortal>
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||||
|
<Cross2Icon className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
))
|
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const DialogHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
DialogHeader.displayName = "DialogHeader"
|
||||||
|
|
||||||
|
const DialogFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
DialogFooter.displayName = "DialogFooter"
|
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"text-lg font-semibold leading-none tracking-tight",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogPortal,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogFooter,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
}
|
||||||
25
examples/multimodal-demo/src/components/ui/input.tsx
Normal file
25
examples/multimodal-demo/src/components/ui/input.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/libs/utils"
|
||||||
|
|
||||||
|
export interface InputProps
|
||||||
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Input.displayName = "Input"
|
||||||
|
|
||||||
|
export { Input }
|
||||||
24
examples/multimodal-demo/src/components/ui/label.tsx
Normal file
24
examples/multimodal-demo/src/components/ui/label.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/libs/utils"
|
||||||
|
|
||||||
|
const labelVariants = cva(
|
||||||
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
)
|
||||||
|
|
||||||
|
const Label = React.forwardRef<
|
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||||
|
VariantProps<typeof labelVariants>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(labelVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Label.displayName = LabelPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Label }
|
||||||
46
examples/multimodal-demo/src/components/ui/scroll-area.tsx
Normal file
46
examples/multimodal-demo/src/components/ui/scroll-area.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||||
|
|
||||||
|
import { cn } from "@/libs/utils"
|
||||||
|
|
||||||
|
const ScrollArea = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<ScrollAreaPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn("relative overflow-hidden", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||||
|
{children}
|
||||||
|
</ScrollAreaPrimitive.Viewport>
|
||||||
|
<ScrollBar />
|
||||||
|
<ScrollAreaPrimitive.Corner />
|
||||||
|
</ScrollAreaPrimitive.Root>
|
||||||
|
))
|
||||||
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
||||||
|
|
||||||
|
const ScrollBar = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
>(({ className, orientation = "vertical", ...props }, ref) => (
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||||
|
ref={ref}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"flex touch-none select-none transition-colors",
|
||||||
|
orientation === "vertical" &&
|
||||||
|
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
||||||
|
orientation === "horizontal" &&
|
||||||
|
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
||||||
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
))
|
||||||
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
||||||
|
|
||||||
|
export { ScrollArea, ScrollBar }
|
||||||
164
examples/multimodal-demo/src/components/ui/select.tsx
Normal file
164
examples/multimodal-demo/src/components/ui/select.tsx
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import {
|
||||||
|
CaretSortIcon,
|
||||||
|
CheckIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
} from "@radix-ui/react-icons"
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||||
|
|
||||||
|
import { cn } from "@/libs/utils"
|
||||||
|
|
||||||
|
const Select = SelectPrimitive.Root
|
||||||
|
|
||||||
|
const SelectGroup = SelectPrimitive.Group
|
||||||
|
|
||||||
|
const SelectValue = SelectPrimitive.Value
|
||||||
|
|
||||||
|
const SelectTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<CaretSortIcon className="h-4 w-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
))
|
||||||
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
||||||
|
|
||||||
|
const SelectScrollUpButton = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUpIcon />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
))
|
||||||
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
||||||
|
|
||||||
|
const SelectScrollDownButton = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
))
|
||||||
|
SelectScrollDownButton.displayName =
|
||||||
|
SelectPrimitive.ScrollDownButton.displayName
|
||||||
|
|
||||||
|
const SelectContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||||
|
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
position === "popper" &&
|
||||||
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectScrollUpButton />
|
||||||
|
<SelectPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
"p-1",
|
||||||
|
position === "popper" &&
|
||||||
|
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
))
|
||||||
|
SelectContent.displayName = SelectPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const SelectLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
||||||
|
|
||||||
|
const SelectItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
))
|
||||||
|
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||||
|
|
||||||
|
const SelectSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectGroup,
|
||||||
|
SelectValue,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectContent,
|
||||||
|
SelectLabel,
|
||||||
|
SelectItem,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
}
|
||||||
31
examples/multimodal-demo/src/constants/messages.ts
Normal file
31
examples/multimodal-demo/src/constants/messages.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
import { Message } from "@/types";
|
||||||
|
|
||||||
|
export const WELCOME_MESSAGE: Message = {
|
||||||
|
id: "1",
|
||||||
|
content: "👋 Hi there! I'm your personal assistant. How can I help you today? 😊",
|
||||||
|
sender: "assistant",
|
||||||
|
timestamp: new Date().toLocaleTimeString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const INVALID_CONFIG_MESSAGE: Message = {
|
||||||
|
id: "2",
|
||||||
|
content: "Invalid configuration. Please check your API keys, and add a user and try again.",
|
||||||
|
sender: "assistant",
|
||||||
|
timestamp: new Date().toLocaleTimeString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ERROR_MESSAGE: Message = {
|
||||||
|
id: "3",
|
||||||
|
content: "Something went wrong. Please try again.",
|
||||||
|
sender: "assistant",
|
||||||
|
timestamp: new Date().toLocaleTimeString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AI_MODELS = {
|
||||||
|
openai: "gpt-4o",
|
||||||
|
anthropic: "claude-3-haiku-20240307",
|
||||||
|
cohere: "command-r-plus",
|
||||||
|
groq: "gemma2-9b-it",
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export type Provider = keyof typeof AI_MODELS;
|
||||||
110
examples/multimodal-demo/src/contexts/GlobalContext.tsx
Normal file
110
examples/multimodal-demo/src/contexts/GlobalContext.tsx
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||||
|
import { createContext } from 'react';
|
||||||
|
import { Message, Memory, FileInfo } from '@/types';
|
||||||
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
|
import { useChat } from '@/hooks/useChat';
|
||||||
|
import { useFileHandler } from '@/hooks/useFileHandler';
|
||||||
|
import { Provider } from '@/constants/messages';
|
||||||
|
|
||||||
|
interface GlobalContextType {
|
||||||
|
selectedUser: string;
|
||||||
|
selectUserHandler: (user: string) => void;
|
||||||
|
clearUserHandler: () => void;
|
||||||
|
messages: Message[];
|
||||||
|
memories: Memory[];
|
||||||
|
handleSend: (content: string) => Promise<void>;
|
||||||
|
thinking: boolean;
|
||||||
|
selectedMem0Key: string;
|
||||||
|
selectedOpenAIKey: string;
|
||||||
|
selectedProvider: Provider;
|
||||||
|
selectorHandler: (mem0: string, openai: string, provider: Provider) => void;
|
||||||
|
clearConfiguration: () => void;
|
||||||
|
selectedFile: FileInfo | null;
|
||||||
|
setSelectedFile: (file: FileInfo | null) => void;
|
||||||
|
file: File | null;
|
||||||
|
setFile: (file: File | null) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const GlobalContext = createContext<GlobalContextType>({} as GlobalContextType);
|
||||||
|
|
||||||
|
const GlobalState = (props: { children: React.ReactNode }) => {
|
||||||
|
const {
|
||||||
|
mem0ApiKey: selectedMem0Key,
|
||||||
|
openaiApiKey: selectedOpenAIKey,
|
||||||
|
provider: selectedProvider,
|
||||||
|
user: selectedUser,
|
||||||
|
setAuth: selectorHandler,
|
||||||
|
setUser: selectUserHandler,
|
||||||
|
clearAuth: clearConfiguration,
|
||||||
|
clearUser: clearUserHandler,
|
||||||
|
} = useAuth();
|
||||||
|
|
||||||
|
const {
|
||||||
|
selectedFile,
|
||||||
|
file,
|
||||||
|
fileData,
|
||||||
|
setSelectedFile,
|
||||||
|
handleFile,
|
||||||
|
clearFile,
|
||||||
|
} = useFileHandler();
|
||||||
|
|
||||||
|
const {
|
||||||
|
messages,
|
||||||
|
memories,
|
||||||
|
thinking,
|
||||||
|
sendMessage,
|
||||||
|
} = useChat({
|
||||||
|
user: selectedUser,
|
||||||
|
mem0ApiKey: selectedMem0Key,
|
||||||
|
openaiApiKey: selectedOpenAIKey,
|
||||||
|
provider: selectedProvider,
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSend = async (content: string) => {
|
||||||
|
if (file) {
|
||||||
|
await sendMessage(content, {
|
||||||
|
type: file.type,
|
||||||
|
data: fileData!,
|
||||||
|
});
|
||||||
|
clearFile();
|
||||||
|
} else {
|
||||||
|
await sendMessage(content);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setFile = async (newFile: File | null) => {
|
||||||
|
if (newFile) {
|
||||||
|
await handleFile(newFile);
|
||||||
|
} else {
|
||||||
|
clearFile();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GlobalContext.Provider
|
||||||
|
value={{
|
||||||
|
selectedUser,
|
||||||
|
selectUserHandler,
|
||||||
|
clearUserHandler,
|
||||||
|
messages,
|
||||||
|
memories,
|
||||||
|
handleSend,
|
||||||
|
thinking,
|
||||||
|
selectedMem0Key,
|
||||||
|
selectedOpenAIKey,
|
||||||
|
selectedProvider,
|
||||||
|
selectorHandler,
|
||||||
|
clearConfiguration,
|
||||||
|
selectedFile,
|
||||||
|
setSelectedFile,
|
||||||
|
file,
|
||||||
|
setFile,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</GlobalContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GlobalContext;
|
||||||
|
export { GlobalState };
|
||||||
73
examples/multimodal-demo/src/hooks/useAuth.ts
Normal file
73
examples/multimodal-demo/src/hooks/useAuth.ts
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Provider } from '@/constants/messages';
|
||||||
|
|
||||||
|
interface UseAuthReturn {
|
||||||
|
mem0ApiKey: string;
|
||||||
|
openaiApiKey: string;
|
||||||
|
provider: Provider;
|
||||||
|
user: string;
|
||||||
|
setAuth: (mem0: string, openai: string, provider: Provider) => void;
|
||||||
|
setUser: (user: string) => void;
|
||||||
|
clearAuth: () => void;
|
||||||
|
clearUser: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useAuth = (): UseAuthReturn => {
|
||||||
|
const [mem0ApiKey, setMem0ApiKey] = useState<string>('');
|
||||||
|
const [openaiApiKey, setOpenaiApiKey] = useState<string>('');
|
||||||
|
const [provider, setProvider] = useState<Provider>('openai');
|
||||||
|
const [user, setUser] = useState<string>('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const mem0 = localStorage.getItem('mem0ApiKey');
|
||||||
|
const openai = localStorage.getItem('openaiApiKey');
|
||||||
|
const savedProvider = localStorage.getItem('provider') as Provider;
|
||||||
|
const savedUser = localStorage.getItem('user');
|
||||||
|
|
||||||
|
if (mem0 && openai && savedProvider) {
|
||||||
|
setAuth(mem0, openai, savedProvider);
|
||||||
|
}
|
||||||
|
if (savedUser) {
|
||||||
|
setUser(savedUser);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const setAuth = (mem0: string, openai: string, provider: Provider) => {
|
||||||
|
setMem0ApiKey(mem0);
|
||||||
|
setOpenaiApiKey(openai);
|
||||||
|
setProvider(provider);
|
||||||
|
localStorage.setItem('mem0ApiKey', mem0);
|
||||||
|
localStorage.setItem('openaiApiKey', openai);
|
||||||
|
localStorage.setItem('provider', provider);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearAuth = () => {
|
||||||
|
localStorage.removeItem('mem0ApiKey');
|
||||||
|
localStorage.removeItem('openaiApiKey');
|
||||||
|
localStorage.removeItem('provider');
|
||||||
|
setMem0ApiKey('');
|
||||||
|
setOpenaiApiKey('');
|
||||||
|
setProvider('openai');
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateUser = (user: string) => {
|
||||||
|
setUser(user);
|
||||||
|
localStorage.setItem('user', user);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearUser = () => {
|
||||||
|
localStorage.removeItem('user');
|
||||||
|
setUser('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
mem0ApiKey,
|
||||||
|
openaiApiKey,
|
||||||
|
provider,
|
||||||
|
user,
|
||||||
|
setAuth,
|
||||||
|
setUser: updateUser,
|
||||||
|
clearAuth,
|
||||||
|
clearUser,
|
||||||
|
};
|
||||||
|
};
|
||||||
220
examples/multimodal-demo/src/hooks/useChat.ts
Normal file
220
examples/multimodal-demo/src/hooks/useChat.ts
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { MemoryClient } from 'saket-test';
|
||||||
|
import { OpenAI } from 'openai';
|
||||||
|
import { Message, Memory } from '@/types';
|
||||||
|
import { WELCOME_MESSAGE, INVALID_CONFIG_MESSAGE, ERROR_MESSAGE, AI_MODELS, Provider } from '@/constants/messages';
|
||||||
|
|
||||||
|
interface UseChatProps {
|
||||||
|
user: string;
|
||||||
|
mem0ApiKey: string;
|
||||||
|
openaiApiKey: string;
|
||||||
|
provider: Provider;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UseChatReturn {
|
||||||
|
messages: Message[];
|
||||||
|
memories: Memory[];
|
||||||
|
thinking: boolean;
|
||||||
|
sendMessage: (content: string, fileData?: { type: string; data: string | Buffer }) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
type MessageContent = string | {
|
||||||
|
type: 'image_url';
|
||||||
|
image_url: {
|
||||||
|
url: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
interface PromptMessage {
|
||||||
|
role: string;
|
||||||
|
content: MessageContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useChat = ({ user, mem0ApiKey, openaiApiKey, provider }: UseChatProps): UseChatReturn => {
|
||||||
|
const [messages, setMessages] = useState<Message[]>([WELCOME_MESSAGE]);
|
||||||
|
const [memories, setMemories] = useState<Memory[]>([]);
|
||||||
|
const [thinking, setThinking] = useState(false);
|
||||||
|
|
||||||
|
const openai = new OpenAI({ apiKey: openaiApiKey});
|
||||||
|
const memoryClient = new MemoryClient({ apiKey: mem0ApiKey });
|
||||||
|
|
||||||
|
const updateMemories = async (messages: PromptMessage[]) => {
|
||||||
|
console.log(messages);
|
||||||
|
try {
|
||||||
|
await memoryClient.add(messages, {
|
||||||
|
user_id: user,
|
||||||
|
output_format: "v1.1",
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await memoryClient.getAll({
|
||||||
|
user_id: user,
|
||||||
|
page: 1,
|
||||||
|
page_size: 50,
|
||||||
|
});
|
||||||
|
|
||||||
|
const newMemories = response.results.map((memory: any) => ({
|
||||||
|
id: memory.id,
|
||||||
|
content: memory.memory,
|
||||||
|
timestamp: memory.updated_at,
|
||||||
|
tags: memory.categories || [],
|
||||||
|
}));
|
||||||
|
setMemories(newMemories);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in updateMemories:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatMessagesForPrompt = (messages: Message[]): PromptMessage[] => {
|
||||||
|
return messages.map((message) => {
|
||||||
|
if (message.image) {
|
||||||
|
return {
|
||||||
|
role: message.sender,
|
||||||
|
content: {
|
||||||
|
type: 'image_url',
|
||||||
|
image_url: {
|
||||||
|
url: message.image
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
role: message.sender,
|
||||||
|
content: message.content,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendMessage = async (content: string, fileData?: { type: string; data: string | Buffer }) => {
|
||||||
|
if (!content.trim() && !fileData) return;
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
const newMessage: Message = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
content,
|
||||||
|
sender: 'user',
|
||||||
|
timestamp: new Date().toLocaleTimeString(),
|
||||||
|
};
|
||||||
|
setMessages((prev) => [...prev, newMessage, INVALID_CONFIG_MESSAGE]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const userMessage: Message = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
content,
|
||||||
|
sender: 'user',
|
||||||
|
timestamp: new Date().toLocaleTimeString(),
|
||||||
|
...(fileData?.type.startsWith('image/') && { image: fileData.data.toString() }),
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages((prev) => [...prev, userMessage]);
|
||||||
|
setThinking(true);
|
||||||
|
|
||||||
|
// Get all messages for memory update
|
||||||
|
const allMessagesForMemory = formatMessagesForPrompt([...messages, userMessage]);
|
||||||
|
await updateMemories(allMessagesForMemory);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Get only the last assistant message (if exists) and the current user message
|
||||||
|
const lastAssistantMessage = messages.filter(msg => msg.sender === 'assistant').slice(-1)[0];
|
||||||
|
let messagesForLLM = lastAssistantMessage
|
||||||
|
? [
|
||||||
|
formatMessagesForPrompt([lastAssistantMessage])[0],
|
||||||
|
formatMessagesForPrompt([userMessage])[0]
|
||||||
|
]
|
||||||
|
: [formatMessagesForPrompt([userMessage])[0]];
|
||||||
|
|
||||||
|
// Check if any message has image content
|
||||||
|
const hasImage = messagesForLLM.some(msg => {
|
||||||
|
if (typeof msg.content === 'object' && msg.content !== null) {
|
||||||
|
const content = msg.content as any;
|
||||||
|
return content.type === 'image_url';
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// For image messages, only use the text content
|
||||||
|
if (hasImage) {
|
||||||
|
messagesForLLM = [{
|
||||||
|
role: 'user',
|
||||||
|
content: userMessage.content
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch relevant memories if there's an image
|
||||||
|
let relevantMemories = '';
|
||||||
|
if (hasImage) {
|
||||||
|
try {
|
||||||
|
const searchResponse = await memoryClient.getAll({
|
||||||
|
user_id: user,
|
||||||
|
page: 1,
|
||||||
|
page_size: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
relevantMemories = searchResponse.results
|
||||||
|
.map((memory: any) => `Previous context: ${memory.memory}`)
|
||||||
|
.join('\n');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching memories:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a system message with memories context if there are memories and image
|
||||||
|
if (relevantMemories.length > 0 && hasImage) {
|
||||||
|
messagesForLLM = [
|
||||||
|
{
|
||||||
|
role: 'system',
|
||||||
|
content: `Here are some relevant details about the user:\n${relevantMemories}\n\nPlease use this context when responding to the user's message.`
|
||||||
|
},
|
||||||
|
...messagesForLLM
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Messages for LLM:', messagesForLLM);
|
||||||
|
const completion = await openai.chat.completions.create({
|
||||||
|
model: "gpt-4",
|
||||||
|
messages: messagesForLLM.map(msg => ({
|
||||||
|
role: msg.role,
|
||||||
|
content: msg.content
|
||||||
|
})),
|
||||||
|
stream: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const assistantMessageId = Date.now() + 1;
|
||||||
|
const assistantMessage: Message = {
|
||||||
|
id: assistantMessageId.toString(),
|
||||||
|
content: '',
|
||||||
|
sender: 'assistant',
|
||||||
|
timestamp: new Date().toLocaleTimeString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages((prev) => [...prev, assistantMessage]);
|
||||||
|
|
||||||
|
for await (const chunk of completion) {
|
||||||
|
const textPart = chunk.choices[0]?.delta?.content || '';
|
||||||
|
assistantMessage.content += textPart;
|
||||||
|
setThinking(false);
|
||||||
|
|
||||||
|
setMessages((prev) =>
|
||||||
|
prev.map((msg) =>
|
||||||
|
msg.id === assistantMessageId.toString()
|
||||||
|
? { ...msg, content: assistantMessage.content }
|
||||||
|
: msg
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in sendMessage:', error);
|
||||||
|
setMessages((prev) => [...prev, ERROR_MESSAGE]);
|
||||||
|
} finally {
|
||||||
|
setThinking(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
messages,
|
||||||
|
memories,
|
||||||
|
thinking,
|
||||||
|
sendMessage,
|
||||||
|
};
|
||||||
|
};
|
||||||
45
examples/multimodal-demo/src/hooks/useFileHandler.ts
Normal file
45
examples/multimodal-demo/src/hooks/useFileHandler.ts
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { FileInfo } from '@/types';
|
||||||
|
import { convertToBase64, getFileBuffer } from '@/utils/fileUtils';
|
||||||
|
|
||||||
|
interface UseFileHandlerReturn {
|
||||||
|
selectedFile: FileInfo | null;
|
||||||
|
file: File | null;
|
||||||
|
fileData: string | Buffer | null;
|
||||||
|
setSelectedFile: (file: FileInfo | null) => void;
|
||||||
|
handleFile: (file: File) => Promise<void>;
|
||||||
|
clearFile: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useFileHandler = (): UseFileHandlerReturn => {
|
||||||
|
const [selectedFile, setSelectedFile] = useState<FileInfo | null>(null);
|
||||||
|
const [file, setFile] = useState<File | null>(null);
|
||||||
|
const [fileData, setFileData] = useState<string | Buffer | null>(null);
|
||||||
|
|
||||||
|
const handleFile = async (file: File) => {
|
||||||
|
setFile(file);
|
||||||
|
|
||||||
|
if (file.type.startsWith('image/')) {
|
||||||
|
const base64Data = await convertToBase64(file);
|
||||||
|
setFileData(base64Data);
|
||||||
|
} else if (file.type.startsWith('audio/')) {
|
||||||
|
const bufferData = await getFileBuffer(file);
|
||||||
|
setFileData(bufferData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearFile = () => {
|
||||||
|
setSelectedFile(null);
|
||||||
|
setFile(null);
|
||||||
|
setFileData(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
selectedFile,
|
||||||
|
file,
|
||||||
|
fileData,
|
||||||
|
setSelectedFile,
|
||||||
|
handleFile,
|
||||||
|
clearFile,
|
||||||
|
};
|
||||||
|
};
|
||||||
97
examples/multimodal-demo/src/index.css
Normal file
97
examples/multimodal-demo/src/index.css
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 240 10% 3.9%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 240 10% 3.9%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 240 10% 3.9%;
|
||||||
|
--primary: 240 5.9% 10%;
|
||||||
|
--primary-foreground: 0 0% 98%;
|
||||||
|
--secondary: 240 4.8% 95.9%;
|
||||||
|
--secondary-foreground: 240 5.9% 10%;
|
||||||
|
--muted: 240 4.8% 95.9%;
|
||||||
|
--muted-foreground: 240 3.8% 46.1%;
|
||||||
|
--accent: 240 4.8% 95.9%;
|
||||||
|
--accent-foreground: 240 5.9% 10%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 240 5.9% 90%;
|
||||||
|
--input: 240 5.9% 90%;
|
||||||
|
--ring: 240 10% 3.9%;
|
||||||
|
--chart-1: 12 76% 61%;
|
||||||
|
--chart-2: 173 58% 39%;
|
||||||
|
--chart-3: 197 37% 24%;
|
||||||
|
--chart-4: 43 74% 66%;
|
||||||
|
--chart-5: 27 87% 67%;
|
||||||
|
--radius: 0.5rem
|
||||||
|
}
|
||||||
|
.dark {
|
||||||
|
--background: 240 10% 3.9%;
|
||||||
|
--foreground: 0 0% 98%;
|
||||||
|
--card: 240 10% 3.9%;
|
||||||
|
--card-foreground: 0 0% 98%;
|
||||||
|
--popover: 240 10% 3.9%;
|
||||||
|
--popover-foreground: 0 0% 98%;
|
||||||
|
--primary: 0 0% 98%;
|
||||||
|
--primary-foreground: 240 5.9% 10%;
|
||||||
|
--secondary: 240 3.7% 15.9%;
|
||||||
|
--secondary-foreground: 0 0% 98%;
|
||||||
|
--muted: 240 3.7% 15.9%;
|
||||||
|
--muted-foreground: 240 5% 64.9%;
|
||||||
|
--accent: 240 3.7% 15.9%;
|
||||||
|
--accent-foreground: 0 0% 98%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 240 3.7% 15.9%;
|
||||||
|
--input: 240 3.7% 15.9%;
|
||||||
|
--ring: 240 4.9% 83.9%;
|
||||||
|
--chart-1: 220 70% 50%;
|
||||||
|
--chart-2: 160 60% 45%;
|
||||||
|
--chart-3: 30 80% 55%;
|
||||||
|
--chart-4: 280 65% 60%;
|
||||||
|
--chart-5: 340 75% 55%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ball {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background-color: #4e4e4e;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: bounce 0.6s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ball:nth-child(2) {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ball:nth-child(3) {
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
from {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
6
examples/multimodal-demo/src/libs/utils.ts
Normal file
6
examples/multimodal-demo/src/libs/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
10
examples/multimodal-demo/src/main.tsx
Normal file
10
examples/multimodal-demo/src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
14
examples/multimodal-demo/src/page.tsx
Normal file
14
examples/multimodal-demo/src/page.tsx
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
"use client";
|
||||||
|
import { GlobalState } from "./contexts/GlobalContext";
|
||||||
|
import Component from "./pages/home";
|
||||||
|
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<GlobalState>
|
||||||
|
<Component />
|
||||||
|
</GlobalState>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
41
examples/multimodal-demo/src/pages/home.tsx
Normal file
41
examples/multimodal-demo/src/pages/home.tsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import ApiSettingsPopup from "../components/api-settings-popup";
|
||||||
|
import Memories from "../components/memories";
|
||||||
|
import Header from "../components/header";
|
||||||
|
import Messages from "../components/messages";
|
||||||
|
import InputArea from "../components/input-area";
|
||||||
|
import ChevronToggle from "../components/chevron-toggle";
|
||||||
|
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const [isMemoriesExpanded, setIsMemoriesExpanded] = useState(true);
|
||||||
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ApiSettingsPopup isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
|
||||||
|
<div className="flex h-screen bg-background">
|
||||||
|
{/* Main Chat Area */}
|
||||||
|
<div className="flex-1 flex flex-col">
|
||||||
|
{/* Header */}
|
||||||
|
<Header setIsSettingsOpen={setIsSettingsOpen} />
|
||||||
|
|
||||||
|
{/* Messages */}
|
||||||
|
<Messages />
|
||||||
|
|
||||||
|
{/* Input Area */}
|
||||||
|
<InputArea />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chevron Toggle */}
|
||||||
|
<ChevronToggle
|
||||||
|
isMemoriesExpanded={isMemoriesExpanded}
|
||||||
|
setIsMemoriesExpanded={setIsMemoriesExpanded}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Memories Sidebar */}
|
||||||
|
<Memories isMemoriesExpanded={isMemoriesExpanded} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
22
examples/multimodal-demo/src/types.ts
Normal file
22
examples/multimodal-demo/src/types.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||||
|
export interface Memory {
|
||||||
|
id: string;
|
||||||
|
content: string;
|
||||||
|
timestamp: string;
|
||||||
|
tags: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Message {
|
||||||
|
id: string;
|
||||||
|
content: string;
|
||||||
|
sender: "user" | "assistant";
|
||||||
|
timestamp: string;
|
||||||
|
image?: string;
|
||||||
|
audio?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FileInfo {
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
size: number;
|
||||||
|
}
|
||||||
16
examples/multimodal-demo/src/utils/fileUtils.ts
Normal file
16
examples/multimodal-demo/src/utils/fileUtils.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { Buffer } from 'buffer';
|
||||||
|
|
||||||
|
export const convertToBase64 = (file: File): Promise<string> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onload = () => resolve(reader.result as string);
|
||||||
|
reader.onerror = error => reject(error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getFileBuffer = async (file: File): Promise<Buffer> => {
|
||||||
|
const response = await fetch(URL.createObjectURL(file));
|
||||||
|
const arrayBuffer = await response.arrayBuffer();
|
||||||
|
return Buffer.from(arrayBuffer);
|
||||||
|
};
|
||||||
1
examples/multimodal-demo/src/vite-env.d.ts
vendored
Normal file
1
examples/multimodal-demo/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
62
examples/multimodal-demo/tailwind.config.js
Normal file
62
examples/multimodal-demo/tailwind.config.js
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
// tailwind.config.js
|
||||||
|
/* eslint-env node */
|
||||||
|
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
import tailwindcssAnimate from 'tailwindcss-animate';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
darkMode: ["class"],
|
||||||
|
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
borderRadius: {
|
||||||
|
lg: 'var(--radius)',
|
||||||
|
md: 'calc(var(--radius) - 2px)',
|
||||||
|
sm: 'calc(var(--radius) - 4px)',
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
background: 'hsl(var(--background))',
|
||||||
|
foreground: 'hsl(var(--foreground))',
|
||||||
|
card: {
|
||||||
|
DEFAULT: 'hsl(var(--card))',
|
||||||
|
foreground: 'hsl(var(--card-foreground))',
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
DEFAULT: 'hsl(var(--popover))',
|
||||||
|
foreground: 'hsl(var(--popover-foreground))',
|
||||||
|
},
|
||||||
|
primary: {
|
||||||
|
DEFAULT: 'hsl(var(--primary))',
|
||||||
|
foreground: 'hsl(var(--primary-foreground))',
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: 'hsl(var(--secondary))',
|
||||||
|
foreground: 'hsl(var(--secondary-foreground))',
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
DEFAULT: 'hsl(var(--muted))',
|
||||||
|
foreground: 'hsl(var(--muted-foreground))',
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
DEFAULT: 'hsl(var(--accent))',
|
||||||
|
foreground: 'hsl(var(--accent-foreground))',
|
||||||
|
},
|
||||||
|
destructive: {
|
||||||
|
DEFAULT: 'hsl(var(--destructive))',
|
||||||
|
foreground: 'hsl(var(--destructive-foreground))',
|
||||||
|
},
|
||||||
|
border: 'hsl(var(--border))',
|
||||||
|
input: 'hsl(var(--input))',
|
||||||
|
ring: 'hsl(var(--ring))',
|
||||||
|
chart: {
|
||||||
|
'1': 'hsl(var(--chart-1))',
|
||||||
|
'2': 'hsl(var(--chart-2))',
|
||||||
|
'3': 'hsl(var(--chart-3))',
|
||||||
|
'4': 'hsl(var(--chart-4))',
|
||||||
|
'5': 'hsl(var(--chart-5))',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [tailwindcssAnimate],
|
||||||
|
};
|
||||||
32
examples/multimodal-demo/tsconfig.app.json
Normal file
32
examples/multimodal-demo/tsconfig.app.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
13
examples/multimodal-demo/tsconfig.json
Normal file
13
examples/multimodal-demo/tsconfig.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
examples/multimodal-demo/tsconfig.node.json
Normal file
24
examples/multimodal-demo/tsconfig.node.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
223
examples/multimodal-demo/useChat.ts
Normal file
223
examples/multimodal-demo/useChat.ts
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { MemoryClient, Memory as Mem0Memory } from 'mem0ai';
|
||||||
|
import { OpenAI } from 'openai';
|
||||||
|
import { Message, Memory } from '@/types';
|
||||||
|
import { WELCOME_MESSAGE, INVALID_CONFIG_MESSAGE, ERROR_MESSAGE, Provider } from '@/constants/messages';
|
||||||
|
|
||||||
|
interface UseChatProps {
|
||||||
|
user: string;
|
||||||
|
mem0ApiKey: string;
|
||||||
|
openaiApiKey: string;
|
||||||
|
provider: Provider;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UseChatReturn {
|
||||||
|
messages: Message[];
|
||||||
|
memories: Memory[];
|
||||||
|
thinking: boolean;
|
||||||
|
sendMessage: (content: string, fileData?: { type: string; data: string | Buffer }) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
type MessageContent = string | {
|
||||||
|
type: 'image_url';
|
||||||
|
image_url: {
|
||||||
|
url: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
interface PromptMessage {
|
||||||
|
role: string;
|
||||||
|
content: MessageContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useChat = ({ user, mem0ApiKey, openaiApiKey }: UseChatProps): UseChatReturn => {
|
||||||
|
const [messages, setMessages] = useState<Message[]>([WELCOME_MESSAGE]);
|
||||||
|
const [memories, setMemories] = useState<Memory[]>();
|
||||||
|
const [thinking, setThinking] = useState(false);
|
||||||
|
|
||||||
|
const openai = new OpenAI({ apiKey: openaiApiKey, dangerouslyAllowBrowser: true});
|
||||||
|
|
||||||
|
const updateMemories = async (messages: PromptMessage[]) => {
|
||||||
|
const memoryClient = new MemoryClient({ apiKey: mem0ApiKey || '' });
|
||||||
|
try {
|
||||||
|
await memoryClient.add(messages, {
|
||||||
|
user_id: user,
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await memoryClient.getAll({
|
||||||
|
user_id: user,
|
||||||
|
});
|
||||||
|
|
||||||
|
const newMemories = response.map((memory: Mem0Memory) => ({
|
||||||
|
id: memory.id || '',
|
||||||
|
content: memory.memory || '',
|
||||||
|
timestamp: String(memory.updated_at) || '',
|
||||||
|
tags: memory.categories || [],
|
||||||
|
}));
|
||||||
|
setMemories(newMemories);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in updateMemories:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatMessagesForPrompt = (messages: Message[]): PromptMessage[] => {
|
||||||
|
return messages.map((message) => {
|
||||||
|
if (message.image) {
|
||||||
|
return {
|
||||||
|
role: message.sender,
|
||||||
|
content: {
|
||||||
|
type: 'image_url',
|
||||||
|
image_url: {
|
||||||
|
url: message.image
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
role: message.sender,
|
||||||
|
content: message.content,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendMessage = async (content: string, fileData?: { type: string; data: string | Buffer }) => {
|
||||||
|
if (!content.trim() && !fileData) return;
|
||||||
|
|
||||||
|
const memoryClient = new MemoryClient({ apiKey: mem0ApiKey || '' });
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
const newMessage: Message = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
content,
|
||||||
|
sender: 'user',
|
||||||
|
timestamp: new Date().toLocaleTimeString(),
|
||||||
|
};
|
||||||
|
setMessages((prev) => [...prev, newMessage, INVALID_CONFIG_MESSAGE]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const userMessage: Message = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
content,
|
||||||
|
sender: 'user',
|
||||||
|
timestamp: new Date().toLocaleTimeString(),
|
||||||
|
...(fileData?.type.startsWith('image/') && { image: fileData.data.toString() }),
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages((prev) => [...prev, userMessage]);
|
||||||
|
setThinking(true);
|
||||||
|
|
||||||
|
// Get all messages for memory update
|
||||||
|
const allMessagesForMemory = formatMessagesForPrompt([...messages, userMessage]);
|
||||||
|
await updateMemories(allMessagesForMemory);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Get only the last assistant message (if exists) and the current user message
|
||||||
|
const lastAssistantMessage = messages.filter(msg => msg.sender === 'assistant').slice(-1)[0];
|
||||||
|
let messagesForLLM = lastAssistantMessage
|
||||||
|
? [
|
||||||
|
formatMessagesForPrompt([lastAssistantMessage])[0],
|
||||||
|
formatMessagesForPrompt([userMessage])[0]
|
||||||
|
]
|
||||||
|
: [formatMessagesForPrompt([userMessage])[0]];
|
||||||
|
|
||||||
|
// Check if any message has image content
|
||||||
|
const hasImage = messagesForLLM.some(msg => {
|
||||||
|
if (typeof msg.content === 'object' && msg.content !== null) {
|
||||||
|
const content = msg.content as MessageContent;
|
||||||
|
return typeof content === 'object' && content !== null && 'type' in content && content.type === 'image_url';
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// For image messages, only use the text content
|
||||||
|
if (hasImage) {
|
||||||
|
messagesForLLM = [
|
||||||
|
...messagesForLLM,
|
||||||
|
{
|
||||||
|
role: 'user',
|
||||||
|
content: userMessage.content
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch relevant memories if there's an image
|
||||||
|
let relevantMemories = '';
|
||||||
|
try {
|
||||||
|
const searchResponse = await memoryClient.getAll({
|
||||||
|
user_id: user
|
||||||
|
});
|
||||||
|
|
||||||
|
relevantMemories = searchResponse
|
||||||
|
.map((memory: Mem0Memory) => `Previous context: ${memory.memory}`)
|
||||||
|
.join('\n');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching memories:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a system message with memories context if there are memories and image
|
||||||
|
if (relevantMemories.length > 0 && hasImage) {
|
||||||
|
messagesForLLM = [
|
||||||
|
{
|
||||||
|
role: 'system',
|
||||||
|
content: `Here are some relevant details about the user:\n${relevantMemories}\n\nPlease use this context when responding to the user's message.`
|
||||||
|
},
|
||||||
|
...messagesForLLM
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
const generateRandomId = () => {
|
||||||
|
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
const completion = await openai.chat.completions.create({
|
||||||
|
model: "gpt-4o-mini",
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
messages: messagesForLLM.map(msg => ({
|
||||||
|
role: msg.role === 'user' ? 'user' : 'assistant',
|
||||||
|
content: typeof msg.content === 'object' && msg.content !== null ? [msg.content] : msg.content,
|
||||||
|
name: generateRandomId(),
|
||||||
|
})),
|
||||||
|
stream: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const assistantMessageId = Date.now() + 1;
|
||||||
|
const assistantMessage: Message = {
|
||||||
|
id: assistantMessageId.toString(),
|
||||||
|
content: '',
|
||||||
|
sender: 'assistant',
|
||||||
|
timestamp: new Date().toLocaleTimeString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages((prev) => [...prev, assistantMessage]);
|
||||||
|
|
||||||
|
for await (const chunk of completion) {
|
||||||
|
const textPart = chunk.choices[0]?.delta?.content || '';
|
||||||
|
assistantMessage.content += textPart;
|
||||||
|
setThinking(false);
|
||||||
|
|
||||||
|
setMessages((prev) =>
|
||||||
|
prev.map((msg) =>
|
||||||
|
msg.id === assistantMessageId.toString()
|
||||||
|
? { ...msg, content: assistantMessage.content }
|
||||||
|
: msg
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in sendMessage:', error);
|
||||||
|
setMessages((prev) => [...prev, ERROR_MESSAGE]);
|
||||||
|
} finally {
|
||||||
|
setThinking(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
messages,
|
||||||
|
memories: memories || [],
|
||||||
|
thinking,
|
||||||
|
sendMessage,
|
||||||
|
};
|
||||||
|
};
|
||||||
13
examples/multimodal-demo/vite.config.ts
Normal file
13
examples/multimodal-demo/vite.config.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import path from "path"
|
||||||
|
import react from "@vitejs/plugin-react"
|
||||||
|
import { defineConfig } from "vite"
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": path.resolve(__dirname, "./src"),
|
||||||
|
buffer: 'buffer'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user