generated from mujian/official-chat
Initial commit
This commit is contained in:
26
.gitignore
vendored
Normal file
26
.gitignore
vendored
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
# 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?
|
||||||
|
|
||||||
|
*.zip
|
||||||
326
biome.json
Normal file
326
biome.json
Normal file
@@ -0,0 +1,326 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
|
||||||
|
"vcs": {
|
||||||
|
"enabled": false,
|
||||||
|
"clientKind": "git",
|
||||||
|
"useIgnoreFile": false
|
||||||
|
},
|
||||||
|
"files": {
|
||||||
|
"ignoreUnknown": false
|
||||||
|
},
|
||||||
|
"formatter": {
|
||||||
|
"enabled": true,
|
||||||
|
"indentStyle": "space",
|
||||||
|
"indentWidth": 2
|
||||||
|
},
|
||||||
|
"linter": {
|
||||||
|
"enabled": true,
|
||||||
|
"rules": {
|
||||||
|
"recommended": false
|
||||||
|
},
|
||||||
|
"includes": ["**", "!dist"]
|
||||||
|
},
|
||||||
|
"javascript": {
|
||||||
|
"formatter": {
|
||||||
|
"quoteStyle": "single"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"css": {
|
||||||
|
"parser": {
|
||||||
|
"tailwindDirectives": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"includes": ["**/*.{ts,tsx,js,jsx}"],
|
||||||
|
"linter": {
|
||||||
|
"rules": {
|
||||||
|
"complexity": {
|
||||||
|
"noAdjacentSpacesInRegex": "error",
|
||||||
|
"noExtraBooleanCast": "error",
|
||||||
|
"noUselessCatch": "error",
|
||||||
|
"noUselessEscapeInRegex": "error"
|
||||||
|
},
|
||||||
|
"correctness": {
|
||||||
|
"noConstAssign": "error",
|
||||||
|
"noConstantCondition": "error",
|
||||||
|
"noEmptyCharacterClassInRegex": "error",
|
||||||
|
"noEmptyPattern": "error",
|
||||||
|
"noGlobalObjectCalls": "error",
|
||||||
|
"noInvalidBuiltinInstantiation": "error",
|
||||||
|
"noInvalidConstructorSuper": "error",
|
||||||
|
"noNonoctalDecimalEscape": "error",
|
||||||
|
"noPrecisionLoss": "error",
|
||||||
|
"noSelfAssign": "error",
|
||||||
|
"noSetterReturn": "error",
|
||||||
|
"noSwitchDeclarations": "error",
|
||||||
|
"noUndeclaredVariables": "error",
|
||||||
|
"noUnreachable": "error",
|
||||||
|
"noUnreachableSuper": "error",
|
||||||
|
"noUnsafeFinally": "error",
|
||||||
|
"noUnsafeOptionalChaining": "error",
|
||||||
|
"noUnusedLabels": "error",
|
||||||
|
"noUnusedPrivateClassMembers": "error",
|
||||||
|
"noUnusedVariables": "warn",
|
||||||
|
"useIsNan": "error",
|
||||||
|
"useValidForDirection": "error",
|
||||||
|
"useValidTypeof": "error",
|
||||||
|
"useYield": "error"
|
||||||
|
},
|
||||||
|
"suspicious": {
|
||||||
|
"noAsyncPromiseExecutor": "error",
|
||||||
|
"noCatchAssign": "error",
|
||||||
|
"noClassAssign": "error",
|
||||||
|
"noCompareNegZero": "error",
|
||||||
|
"noControlCharactersInRegex": "error",
|
||||||
|
"noDebugger": "error",
|
||||||
|
"noDuplicateCase": "error",
|
||||||
|
"noDuplicateClassMembers": "error",
|
||||||
|
"noDuplicateElseIf": "error",
|
||||||
|
"noDuplicateObjectKeys": "error",
|
||||||
|
"noDuplicateParameters": "error",
|
||||||
|
"noEmptyBlockStatements": "error",
|
||||||
|
"noFallthroughSwitchClause": "error",
|
||||||
|
"noFunctionAssign": "error",
|
||||||
|
"noGlobalAssign": "error",
|
||||||
|
"noImportAssign": "error",
|
||||||
|
"noIrregularWhitespace": "error",
|
||||||
|
"noMisleadingCharacterClass": "error",
|
||||||
|
"noPrototypeBuiltins": "error",
|
||||||
|
"noRedeclare": "error",
|
||||||
|
"noShadowRestrictedNames": "error",
|
||||||
|
"noSparseArray": "error",
|
||||||
|
"noUnsafeNegation": "error",
|
||||||
|
"noWith": "error",
|
||||||
|
"useGetterReturn": "error"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"includes": ["**/*.{ts,tsx,js,jsx}"],
|
||||||
|
"javascript": {
|
||||||
|
"globals": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"includes": ["**/*.{ts,tsx,js,jsx}"],
|
||||||
|
"linter": {
|
||||||
|
"rules": {
|
||||||
|
"complexity": {
|
||||||
|
"noArguments": "error"
|
||||||
|
},
|
||||||
|
"correctness": {
|
||||||
|
"noConstAssign": "off",
|
||||||
|
"noGlobalObjectCalls": "off",
|
||||||
|
"noInvalidBuiltinInstantiation": "off",
|
||||||
|
"noInvalidConstructorSuper": "off",
|
||||||
|
"noSetterReturn": "off",
|
||||||
|
"noUndeclaredVariables": "off",
|
||||||
|
"noUnreachable": "off",
|
||||||
|
"noUnreachableSuper": "off"
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"useConst": "error"
|
||||||
|
},
|
||||||
|
"suspicious": {
|
||||||
|
"noClassAssign": "off",
|
||||||
|
"noDuplicateClassMembers": "off",
|
||||||
|
"noDuplicateObjectKeys": "off",
|
||||||
|
"noDuplicateParameters": "off",
|
||||||
|
"noFunctionAssign": "off",
|
||||||
|
"noImportAssign": "off",
|
||||||
|
"noRedeclare": "off",
|
||||||
|
"noUnsafeNegation": "off",
|
||||||
|
"noVar": "error",
|
||||||
|
"noWith": "off",
|
||||||
|
"useGetterReturn": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"includes": ["**/*.{ts,tsx,js,jsx}"],
|
||||||
|
"linter": {
|
||||||
|
"rules": {
|
||||||
|
"complexity": {
|
||||||
|
"noUselessTypeConstraint": "error"
|
||||||
|
},
|
||||||
|
"correctness": {
|
||||||
|
"noUnusedVariables": "warn"
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"noCommonJs": "error",
|
||||||
|
"noNamespace": "error",
|
||||||
|
"useArrayLiterals": "error",
|
||||||
|
"useAsConstAssertion": "error"
|
||||||
|
},
|
||||||
|
"suspicious": {
|
||||||
|
"noExplicitAny": "error",
|
||||||
|
"noExtraNonNullAssertion": "error",
|
||||||
|
"noMisleadingInstantiator": "error",
|
||||||
|
"noUnsafeDeclarationMerging": "error",
|
||||||
|
"useNamespaceKeyword": "error"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"includes": ["**/*.{ts,tsx,js,jsx}"],
|
||||||
|
"linter": {
|
||||||
|
"rules": {
|
||||||
|
"correctness": {
|
||||||
|
"useExhaustiveDependencies": "warn",
|
||||||
|
"useHookAtTopLevel": "error"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"includes": ["**/*.{ts,tsx,js,jsx}"],
|
||||||
|
"linter": {
|
||||||
|
"rules": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"includes": ["**/*.{ts,tsx,js,jsx}"],
|
||||||
|
"javascript": {
|
||||||
|
"globals": [
|
||||||
|
"onanimationend",
|
||||||
|
"ongamepadconnected",
|
||||||
|
"onlostpointercapture",
|
||||||
|
"onanimationiteration",
|
||||||
|
"onkeyup",
|
||||||
|
"onmousedown",
|
||||||
|
"onanimationstart",
|
||||||
|
"onslotchange",
|
||||||
|
"onprogress",
|
||||||
|
"ontransitionstart",
|
||||||
|
"onpause",
|
||||||
|
"onended",
|
||||||
|
"onpointerover",
|
||||||
|
"onscrollend",
|
||||||
|
"onformdata",
|
||||||
|
"ontransitionrun",
|
||||||
|
"onanimationcancel",
|
||||||
|
"ondrag",
|
||||||
|
"onchange",
|
||||||
|
"onbeforeinstallprompt",
|
||||||
|
"onbeforexrselect",
|
||||||
|
"onmessage",
|
||||||
|
"ontransitioncancel",
|
||||||
|
"onpointerdown",
|
||||||
|
"onabort",
|
||||||
|
"onpointerout",
|
||||||
|
"oncuechange",
|
||||||
|
"ongotpointercapture",
|
||||||
|
"onscrollsnapchanging",
|
||||||
|
"onsearch",
|
||||||
|
"onsubmit",
|
||||||
|
"onstalled",
|
||||||
|
"onsuspend",
|
||||||
|
"onreset",
|
||||||
|
"onerror",
|
||||||
|
"onresize",
|
||||||
|
"onmouseenter",
|
||||||
|
"ongamepaddisconnected",
|
||||||
|
"ondragover",
|
||||||
|
"onbeforetoggle",
|
||||||
|
"onmouseover",
|
||||||
|
"onpagehide",
|
||||||
|
"onmousemove",
|
||||||
|
"onratechange",
|
||||||
|
"oncommand",
|
||||||
|
"onmessageerror",
|
||||||
|
"onwheel",
|
||||||
|
"ondevicemotion",
|
||||||
|
"onauxclick",
|
||||||
|
"ontransitionend",
|
||||||
|
"onpaste",
|
||||||
|
"onpageswap",
|
||||||
|
"ononline",
|
||||||
|
"ondeviceorientationabsolute",
|
||||||
|
"onkeydown",
|
||||||
|
"onclose",
|
||||||
|
"onselect",
|
||||||
|
"onpageshow",
|
||||||
|
"onpointercancel",
|
||||||
|
"onbeforematch",
|
||||||
|
"onpointerrawupdate",
|
||||||
|
"ondragleave",
|
||||||
|
"onscrollsnapchange",
|
||||||
|
"onseeked",
|
||||||
|
"onwaiting",
|
||||||
|
"onbeforeunload",
|
||||||
|
"onplaying",
|
||||||
|
"onvolumechange",
|
||||||
|
"ondragend",
|
||||||
|
"onstorage",
|
||||||
|
"onloadeddata",
|
||||||
|
"onfocus",
|
||||||
|
"onoffline",
|
||||||
|
"onplay",
|
||||||
|
"onafterprint",
|
||||||
|
"onclick",
|
||||||
|
"oncut",
|
||||||
|
"onmouseout",
|
||||||
|
"ondblclick",
|
||||||
|
"oncanplay",
|
||||||
|
"onloadstart",
|
||||||
|
"onappinstalled",
|
||||||
|
"onpointermove",
|
||||||
|
"ontoggle",
|
||||||
|
"oncontextmenu",
|
||||||
|
"onblur",
|
||||||
|
"oncancel",
|
||||||
|
"onbeforeprint",
|
||||||
|
"oncontextrestored",
|
||||||
|
"onloadedmetadata",
|
||||||
|
"onpointerup",
|
||||||
|
"onlanguagechange",
|
||||||
|
"oncopy",
|
||||||
|
"onselectstart",
|
||||||
|
"onscroll",
|
||||||
|
"onload",
|
||||||
|
"ondragstart",
|
||||||
|
"onbeforeinput",
|
||||||
|
"oncanplaythrough",
|
||||||
|
"oninput",
|
||||||
|
"oninvalid",
|
||||||
|
"ontimeupdate",
|
||||||
|
"ondurationchange",
|
||||||
|
"onselectionchange",
|
||||||
|
"onmouseup",
|
||||||
|
"location",
|
||||||
|
"onkeypress",
|
||||||
|
"onpointerleave",
|
||||||
|
"oncontextlost",
|
||||||
|
"ondrop",
|
||||||
|
"onsecuritypolicyviolation",
|
||||||
|
"oncontentvisibilityautostatechange",
|
||||||
|
"ondeviceorientation",
|
||||||
|
"onseeking",
|
||||||
|
"onrejectionhandled",
|
||||||
|
"onunload",
|
||||||
|
"onmouseleave",
|
||||||
|
"onhashchange",
|
||||||
|
"onpointerenter",
|
||||||
|
"onmousewheel",
|
||||||
|
"onunhandledrejection",
|
||||||
|
"ondragenter",
|
||||||
|
"onpopstate",
|
||||||
|
"onpagereveal",
|
||||||
|
"onemptied"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"assist": {
|
||||||
|
"enabled": true,
|
||||||
|
"actions": {
|
||||||
|
"source": {
|
||||||
|
"organizeImports": "on"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
index.html
Normal file
13
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="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>幕间官方Chat</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
49
package.json
Normal file
49
package.json
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
{
|
||||||
|
"name": "@mujian/official-chat",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=22.0.0",
|
||||||
|
"pnpm": ">=10.0.0"
|
||||||
|
},
|
||||||
|
"packageManager": "pnpm@10.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"build-without-tsc": "vite build",
|
||||||
|
"lint": "biome check --write ./src",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@heroui/react": "2.8.3",
|
||||||
|
"@heroui/theme": "2.4.21",
|
||||||
|
"@mujian/js-sdk": "0.0.6-beta.69",
|
||||||
|
"@tailwindcss/vite": "4.1.12",
|
||||||
|
"ahooks": "3.9.5",
|
||||||
|
"axios": "1.11.0",
|
||||||
|
"dayjs": "1.11.18",
|
||||||
|
"lodash-es": "4.17.21",
|
||||||
|
"lucide-react": "^0.546.0",
|
||||||
|
"motion": "12.23.12",
|
||||||
|
"react": "19.1.1",
|
||||||
|
"react-dom": "19.1.1",
|
||||||
|
"react-icons": "5.5.0",
|
||||||
|
"react-markdown": "10.1.0",
|
||||||
|
"react-router": "7.8.2",
|
||||||
|
"tailwindcss": "4.1.12",
|
||||||
|
"tailwindcss-animate": "1.0.7",
|
||||||
|
"zustand": "5.0.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@biomejs/biome": "^2.3.10",
|
||||||
|
"@types/lodash-es": "4.17.12",
|
||||||
|
"@types/node": "22.13.9",
|
||||||
|
"@types/react": "19.1.10",
|
||||||
|
"@types/react-dom": "19.1.7",
|
||||||
|
"@vitejs/plugin-react": "5.0.0",
|
||||||
|
"globals": "16.3.0",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"vite": "7.1.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
5949
pnpm-lock.yaml
generated
Normal file
5949
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
1
public/vite.svg
Normal file
1
public/vite.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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
1
src/assets/react.svg
Normal file
1
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 |
12
src/main.tsx
Normal file
12
src/main.tsx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import '@/styles/fonts.css';
|
||||||
|
import '@/styles/global.css';
|
||||||
|
import { MujianProvider } from '@mujian/js-sdk/react';
|
||||||
|
import { ReactRouterProvider } from './providers/RouterProvider.tsx';
|
||||||
|
import '@mujian/js-sdk/react.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<MujianProvider>
|
||||||
|
<ReactRouterProvider />
|
||||||
|
</MujianProvider>,
|
||||||
|
);
|
||||||
5
src/pages/.cursor/rules/pages_rules.mdc
Normal file
5
src/pages/.cursor/rules/pages_rules.mdc
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
description:
|
||||||
|
globs:
|
||||||
|
alwaysApply: false
|
||||||
|
---
|
||||||
61
src/pages/chat/MessageItem/components/EditActions.tsx
Normal file
61
src/pages/chat/MessageItem/components/EditActions.tsx
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import { Button, ButtonGroup, cn } from '@heroui/react';
|
||||||
|
import { mjChatCls } from '@/utils/cls';
|
||||||
|
|
||||||
|
export type EditActionsProps = {
|
||||||
|
isUser: boolean;
|
||||||
|
isEditing: boolean;
|
||||||
|
onSaveEdit: () => void;
|
||||||
|
onCancelEdit: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const EditActions = ({
|
||||||
|
isUser,
|
||||||
|
isEditing,
|
||||||
|
onSaveEdit,
|
||||||
|
onCancelEdit,
|
||||||
|
}: EditActionsProps) => {
|
||||||
|
if (!isEditing) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-edit-actions-wrapper'],
|
||||||
|
cn(
|
||||||
|
`flex w-full row-start-2 col-start-1 col-end-4`,
|
||||||
|
isUser ? 'justify-end' : 'justify-start',
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<ButtonGroup
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-edit-actions-button-group'],
|
||||||
|
'bg-white/15 text-default rounded-full',
|
||||||
|
)}
|
||||||
|
radius="full"
|
||||||
|
size="sm"
|
||||||
|
variant="light"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-edit-actions-button', 'msg-edit-actions-button-save'],
|
||||||
|
'text-default',
|
||||||
|
)}
|
||||||
|
size="sm"
|
||||||
|
onPress={onSaveEdit}
|
||||||
|
>
|
||||||
|
保存
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-edit-actions-button', 'msg-edit-actions-button-cancel'],
|
||||||
|
'text-default',
|
||||||
|
)}
|
||||||
|
size="sm"
|
||||||
|
onPress={onCancelEdit}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
204
src/pages/chat/MessageItem/components/MessageActions.tsx
Normal file
204
src/pages/chat/MessageItem/components/MessageActions.tsx
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
import {
|
||||||
|
Button,
|
||||||
|
ButtonGroup,
|
||||||
|
cn,
|
||||||
|
Dropdown,
|
||||||
|
DropdownItem,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownTrigger,
|
||||||
|
} from '@heroui/react';
|
||||||
|
import { type Message as BaseMessage } from '@mujian/js-sdk/react';
|
||||||
|
import { ChevronLeftIcon, ChevronRightIcon, Ellipsis } from 'lucide-react';
|
||||||
|
import React from 'react';
|
||||||
|
import { mjChatCls } from '@/utils/cls';
|
||||||
|
import { useMessageActions } from './useMessageActions';
|
||||||
|
|
||||||
|
export type LastMessageActionsProps = {
|
||||||
|
message: BaseMessage;
|
||||||
|
isUser: boolean;
|
||||||
|
isLastMsg: boolean;
|
||||||
|
isFirstMsg: boolean;
|
||||||
|
isStreaming: boolean;
|
||||||
|
isEditing: boolean;
|
||||||
|
swipes: string[];
|
||||||
|
activeSwipeId: number;
|
||||||
|
panicked?: boolean;
|
||||||
|
onRegenerate: (() => Promise<void>) | undefined;
|
||||||
|
onContinue: (() => Promise<void>) | undefined;
|
||||||
|
onEditButtonClick: () => void;
|
||||||
|
onCopyClick: () => void;
|
||||||
|
onSwipe: (direction: 'prev' | 'next') => void;
|
||||||
|
onMessageTextClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MessageActions = ({
|
||||||
|
// message,
|
||||||
|
isUser,
|
||||||
|
isLastMsg,
|
||||||
|
isFirstMsg,
|
||||||
|
isStreaming,
|
||||||
|
isEditing,
|
||||||
|
swipes,
|
||||||
|
activeSwipeId,
|
||||||
|
onRegenerate,
|
||||||
|
onContinue,
|
||||||
|
onEditButtonClick,
|
||||||
|
onCopyClick,
|
||||||
|
onSwipe,
|
||||||
|
onMessageTextClick,
|
||||||
|
onDelete,
|
||||||
|
}: LastMessageActionsProps) => {
|
||||||
|
const dropdownItems = useMessageActions({
|
||||||
|
isLastMsg,
|
||||||
|
onEditButtonClick,
|
||||||
|
onCopyClick,
|
||||||
|
onRegenerate,
|
||||||
|
onContinue,
|
||||||
|
onDelete,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isStreaming || isUser || isEditing) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-actions-wrapper'],
|
||||||
|
cn('flex justify-between row-start-2 col-start-1 col-end-4'),
|
||||||
|
)}
|
||||||
|
role="presentation"
|
||||||
|
onClick={onMessageTextClick} /* Stop propagation */
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-actions-dropdown-container'],
|
||||||
|
'flex items-start',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{!isFirstMsg && (
|
||||||
|
<Dropdown
|
||||||
|
placement="top-start"
|
||||||
|
className={mjChatCls(['msg-actions-dropdown'], 'dark')}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<DropdownTrigger>
|
||||||
|
<Button
|
||||||
|
variant="light"
|
||||||
|
size="sm"
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-actions-dropdown-button'],
|
||||||
|
'bg-white/15 text-default min-w-10',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Ellipsis
|
||||||
|
size={14}
|
||||||
|
className={mjChatCls(['msg-actions-dropdown-button-icon'])}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</DropdownTrigger>
|
||||||
|
<DropdownMenu
|
||||||
|
items={dropdownItems}
|
||||||
|
className={mjChatCls(['msg-actions-dropdown-menu'], 'text-white')}
|
||||||
|
// disabledKeys={
|
||||||
|
// message.id.startsWith('not_saved')
|
||||||
|
// ? ['edit', 'regenerate', 'continue']
|
||||||
|
// : []
|
||||||
|
// }
|
||||||
|
>
|
||||||
|
{(item) => (
|
||||||
|
<DropdownItem
|
||||||
|
key={item.key}
|
||||||
|
color={item.color}
|
||||||
|
className={mjChatCls(
|
||||||
|
[
|
||||||
|
'msg-actions-dropdown-menu-item',
|
||||||
|
`msg-actions-dropdown-menu-item-${item.key}`,
|
||||||
|
],
|
||||||
|
item.className || '',
|
||||||
|
)}
|
||||||
|
onPress={item.onPress}
|
||||||
|
isDisabled={item.disabled}
|
||||||
|
classNames={{
|
||||||
|
wrapper: mjChatCls(
|
||||||
|
[
|
||||||
|
'msg-actions-dropdown-menu-item-wrapper',
|
||||||
|
`msg-actions-dropdown-menu-item-${item.key}-wrapper`,
|
||||||
|
],
|
||||||
|
item.className || '',
|
||||||
|
),
|
||||||
|
base: mjChatCls(
|
||||||
|
[
|
||||||
|
'msg-actions-dropdown-menu-item-base',
|
||||||
|
`msg-actions-dropdown-menu-item-${item.key}-base`,
|
||||||
|
],
|
||||||
|
item.className || '',
|
||||||
|
),
|
||||||
|
title: mjChatCls(
|
||||||
|
[
|
||||||
|
'msg-actions-dropdown-menu-item-title',
|
||||||
|
`msg-actions-dropdown-menu-item-${item.key}-title`,
|
||||||
|
],
|
||||||
|
item.className || '',
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</DropdownItem>
|
||||||
|
)}
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={mjChatCls(['swipe-action-container'], 'flex items-end')}>
|
||||||
|
{isLastMsg && swipes.length > 1 && (
|
||||||
|
<ButtonGroup
|
||||||
|
className={mjChatCls(
|
||||||
|
['swipe-action-button-group'],
|
||||||
|
'bg-white/15 rounded-full backdrop-blur-sm text-default',
|
||||||
|
)}
|
||||||
|
radius="full"
|
||||||
|
size="sm"
|
||||||
|
variant="light"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
className={mjChatCls(
|
||||||
|
['swipe-action-prev'],
|
||||||
|
'min-w-8 px-2 text-default',
|
||||||
|
)}
|
||||||
|
isDisabled={swipes.length <= 1}
|
||||||
|
size="sm"
|
||||||
|
onPress={() => onSwipe('prev')}
|
||||||
|
>
|
||||||
|
<ChevronLeftIcon
|
||||||
|
className={mjChatCls(['swipe-action-prev-icon'], 'w-4 h-4')}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['swipe-action-index'],
|
||||||
|
'flex items-center px-1 text-xs',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{swipes.length > 0
|
||||||
|
? `${activeSwipeId + 1}/${swipes.length}`
|
||||||
|
: '1/1'}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
className={mjChatCls(
|
||||||
|
['swipe-action-next'],
|
||||||
|
'min-w-8 px-2 text-default',
|
||||||
|
)}
|
||||||
|
isDisabled={swipes.length <= 1}
|
||||||
|
size="sm"
|
||||||
|
onPress={() => onSwipe('next')}
|
||||||
|
>
|
||||||
|
<ChevronRightIcon
|
||||||
|
className={mjChatCls(['swipe-action-next-icon'], 'w-4 h-4')}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
150
src/pages/chat/MessageItem/components/MessageBubble.tsx
Normal file
150
src/pages/chat/MessageItem/components/MessageBubble.tsx
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
import {
|
||||||
|
cn,
|
||||||
|
Dropdown,
|
||||||
|
DropdownItem,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownTrigger,
|
||||||
|
Spinner,
|
||||||
|
} from '@heroui/react';
|
||||||
|
import { type Message as BaseMessage, MdRenderer } from '@mujian/js-sdk/react';
|
||||||
|
import { mjChatCls } from '@/utils/cls';
|
||||||
|
import { MessageEditArea } from './MessageEditArea';
|
||||||
|
import { useMessageActions } from './useMessageActions';
|
||||||
|
|
||||||
|
export type MessageBubbleProps = {
|
||||||
|
message: BaseMessage;
|
||||||
|
isUser: boolean;
|
||||||
|
isEditing: boolean;
|
||||||
|
editedMessage: string;
|
||||||
|
onEditChange: (content: string) => void;
|
||||||
|
isStreaming: boolean;
|
||||||
|
currentMessage: string;
|
||||||
|
onEditButtonClick: () => void;
|
||||||
|
onCopyClick: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
onEditAreaShow: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MessageBubble = ({
|
||||||
|
message,
|
||||||
|
isUser,
|
||||||
|
isEditing,
|
||||||
|
editedMessage,
|
||||||
|
onEditChange,
|
||||||
|
isStreaming,
|
||||||
|
currentMessage,
|
||||||
|
onEditButtonClick,
|
||||||
|
onCopyClick,
|
||||||
|
onDelete,
|
||||||
|
onEditAreaShow,
|
||||||
|
}: MessageBubbleProps) => {
|
||||||
|
const dropdownItems = useMessageActions({
|
||||||
|
isLastMsg: false,
|
||||||
|
onEditButtonClick,
|
||||||
|
onCopyClick,
|
||||||
|
onDelete,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
[
|
||||||
|
'msg-container-wrapper',
|
||||||
|
isUser
|
||||||
|
? 'msg-container-wrapper-user'
|
||||||
|
: 'msg-container-wrapper-assistant',
|
||||||
|
],
|
||||||
|
cn(
|
||||||
|
'row-start-1 col-start-1 col-end-4 flex flex-col size-full min-w-0 py-3',
|
||||||
|
isUser ? 'items-end' : 'items-stretch',
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{!isEditing ? (
|
||||||
|
isUser ? (
|
||||||
|
<Dropdown
|
||||||
|
placement="top-end"
|
||||||
|
className={mjChatCls(['msg-edit-dropdown'], 'dark')}
|
||||||
|
>
|
||||||
|
<DropdownTrigger>
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-edit-trigger', 'msg-content'],
|
||||||
|
cn(
|
||||||
|
'h-full rounded-xl dark:prose-invert text-blue-100 p-4 bg-black/50',
|
||||||
|
{
|
||||||
|
'rounded-br-sm': isUser,
|
||||||
|
},
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
role="presentation"
|
||||||
|
>
|
||||||
|
<MdRenderer
|
||||||
|
content={currentMessage}
|
||||||
|
extra={{
|
||||||
|
messageId: message.id,
|
||||||
|
swipeId: message.activeSwipeId,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</DropdownTrigger>
|
||||||
|
<DropdownMenu
|
||||||
|
items={dropdownItems}
|
||||||
|
className={mjChatCls(['msg-edit-dropdown-menu'], 'text-white')}
|
||||||
|
// disabledKeys={
|
||||||
|
// message.id.startsWith('not_saved')
|
||||||
|
// ? ['edit', 'regenerate', 'continue']
|
||||||
|
// : []
|
||||||
|
// }
|
||||||
|
>
|
||||||
|
{(item) => (
|
||||||
|
<DropdownItem
|
||||||
|
key={item.key}
|
||||||
|
color={item.color}
|
||||||
|
className={mjChatCls(
|
||||||
|
[
|
||||||
|
'msg-edit-dropdown-menu-item',
|
||||||
|
`msg-edit-dropdown-menu-item-${item.key}`,
|
||||||
|
],
|
||||||
|
item.className || '',
|
||||||
|
)}
|
||||||
|
onPress={item.onPress}
|
||||||
|
isDisabled={item.disabled}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</DropdownItem>
|
||||||
|
)}
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
) : (
|
||||||
|
<div className={mjChatCls(['msg-content'], 'py-4')}>
|
||||||
|
<MdRenderer
|
||||||
|
content={currentMessage}
|
||||||
|
extra={{
|
||||||
|
messageId: message.id,
|
||||||
|
swipeId: message.activeSwipeId,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<MessageEditArea
|
||||||
|
isUser={isUser}
|
||||||
|
editedMessage={editedMessage}
|
||||||
|
onEditChange={onEditChange}
|
||||||
|
onEditAreaShow={onEditAreaShow}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{isStreaming && !currentMessage?.length && (
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-container-message-spinner'],
|
||||||
|
'flex w-full items-center',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Spinner variant="dots" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
73
src/pages/chat/MessageItem/components/MessageEditArea.tsx
Normal file
73
src/pages/chat/MessageItem/components/MessageEditArea.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import { cn } from '@heroui/react';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { mjChatCls } from '@/utils/cls';
|
||||||
|
|
||||||
|
export type MessageEditAreaProps = {
|
||||||
|
isUser: boolean;
|
||||||
|
editedMessage: string;
|
||||||
|
onEditChange: (content: string) => void;
|
||||||
|
onEditAreaShow: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MessageEditArea = ({
|
||||||
|
isUser,
|
||||||
|
editedMessage,
|
||||||
|
onEditChange,
|
||||||
|
onEditAreaShow,
|
||||||
|
}: MessageEditAreaProps) => {
|
||||||
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
const [wrapHeight, setWrapHeight] = useState(0);
|
||||||
|
|
||||||
|
// biome-ignore lint/correctness/useExhaustiveDependencies: useMount
|
||||||
|
useEffect(() => {
|
||||||
|
const t = textareaRef.current;
|
||||||
|
if (t) {
|
||||||
|
const parent = t.parentElement;
|
||||||
|
|
||||||
|
t.style.height = 'auto';
|
||||||
|
t.style.height = t.scrollHeight + 'px';
|
||||||
|
if (parent) {
|
||||||
|
parent.style.height = t?.scrollHeight + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
t.focus();
|
||||||
|
// 光标移到最后
|
||||||
|
const length = t.value.length;
|
||||||
|
t.setSelectionRange(length, length);
|
||||||
|
onEditAreaShow();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-edit-textarea-wrapper'],
|
||||||
|
'w-full max-h-[70vh] overflow-auto rounded-xl border-2 border-white/30',
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
height: wrapHeight,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
ref={textareaRef}
|
||||||
|
className={mjChatCls(
|
||||||
|
[
|
||||||
|
'msg-edit-textarea',
|
||||||
|
isUser ? 'msg-edit-textarea-user' : 'msg-edit-textarea-assistant',
|
||||||
|
],
|
||||||
|
cn(
|
||||||
|
'w-full outline-none resize-none h-fit overflow-hidden p-4 bg-background rounded-xl text-[16px]',
|
||||||
|
isUser ? 'rounded-br-sm' : 'rounded-bl-sm',
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
value={editedMessage}
|
||||||
|
onChange={(e) => {
|
||||||
|
onEditChange(e.target.value);
|
||||||
|
e.target.style.height = '5px';
|
||||||
|
e.target.style.height = `${e.target.scrollHeight}px`;
|
||||||
|
setWrapHeight(e.target.scrollHeight);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
77
src/pages/chat/MessageItem/components/useMessageActions.ts
Normal file
77
src/pages/chat/MessageItem/components/useMessageActions.ts
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import { PanicContext } from '../../PanicContext';
|
||||||
|
|
||||||
|
export type DropdownItem = {
|
||||||
|
key: string;
|
||||||
|
label: string;
|
||||||
|
onPress: () => void | Promise<void>;
|
||||||
|
color?:
|
||||||
|
| 'default'
|
||||||
|
| 'primary'
|
||||||
|
| 'secondary'
|
||||||
|
| 'success'
|
||||||
|
| 'warning'
|
||||||
|
| 'danger';
|
||||||
|
className?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type UseDropdownItemsProps = {
|
||||||
|
isLastMsg: boolean;
|
||||||
|
onEditButtonClick: () => void;
|
||||||
|
onCopyClick: () => void;
|
||||||
|
onRegenerate?: (() => Promise<void>) | undefined;
|
||||||
|
onContinue?: (() => Promise<void>) | undefined;
|
||||||
|
onDelete: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useMessageActions = ({
|
||||||
|
isLastMsg,
|
||||||
|
onEditButtonClick,
|
||||||
|
onCopyClick,
|
||||||
|
onRegenerate,
|
||||||
|
onContinue,
|
||||||
|
onDelete,
|
||||||
|
}: UseDropdownItemsProps): DropdownItem[] => {
|
||||||
|
const { panicked } = useContext(PanicContext);
|
||||||
|
|
||||||
|
const dropdownItems: DropdownItem[] = [
|
||||||
|
{
|
||||||
|
key: 'edit',
|
||||||
|
label: '编辑',
|
||||||
|
onPress: onEditButtonClick,
|
||||||
|
disabled: panicked,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'copy',
|
||||||
|
label: '复制',
|
||||||
|
onPress: onCopyClick,
|
||||||
|
},
|
||||||
|
...(isLastMsg
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: 'regenerate',
|
||||||
|
label: '重说',
|
||||||
|
onPress: async () => await onRegenerate?.(),
|
||||||
|
disabled: panicked,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'continue',
|
||||||
|
label: '继续',
|
||||||
|
onPress: async () => await onContinue?.(),
|
||||||
|
disabled: panicked,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
{
|
||||||
|
key: 'delete',
|
||||||
|
label: '删除',
|
||||||
|
onPress: onDelete,
|
||||||
|
color: 'danger',
|
||||||
|
className: 'text-danger',
|
||||||
|
disabled: panicked,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return dropdownItems;
|
||||||
|
};
|
||||||
241
src/pages/chat/MessageItem/index.tsx
Normal file
241
src/pages/chat/MessageItem/index.tsx
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
import { addToast, cn } from '@heroui/react';
|
||||||
|
import { type Message as BaseMessage, useMujian } from '@mujian/js-sdk/react';
|
||||||
|
import React, { type MouseEventHandler } from 'react';
|
||||||
|
import { mjChatCls } from '@/utils/cls';
|
||||||
|
import { EditActions } from './components/EditActions';
|
||||||
|
import { MessageActions } from './components/MessageActions';
|
||||||
|
import { MessageBubble } from './components/MessageBubble';
|
||||||
|
|
||||||
|
export type MessageItemProps = {
|
||||||
|
message: BaseMessage;
|
||||||
|
originalMessage: BaseMessage;
|
||||||
|
|
||||||
|
index: number;
|
||||||
|
avatar: string;
|
||||||
|
name: string;
|
||||||
|
isLastMsg?: boolean;
|
||||||
|
isFirstMsg?: boolean;
|
||||||
|
|
||||||
|
onRegenerate?: () => Promise<void>;
|
||||||
|
onContinue?: () => Promise<void>;
|
||||||
|
onDelete: (messageId: string) => Promise<void>;
|
||||||
|
onEdit: (messageId: string, content: string) => Promise<void>;
|
||||||
|
onSwipe: (messageId: string, swipeId: number) => Promise<void>;
|
||||||
|
sendMessage?: (message: string) => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add comparison function for React.memo
|
||||||
|
const arePropsEqual = (
|
||||||
|
prevProps: MessageItemProps,
|
||||||
|
nextProps: MessageItemProps,
|
||||||
|
) => {
|
||||||
|
// 如果 swipes 长度不同，直接返回 false
|
||||||
|
if (prevProps.message.swipes?.length !== nextProps.message.swipes?.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// 如果 swipes 内容不同，直接返回 false
|
||||||
|
if (
|
||||||
|
prevProps.message.swipes?.some(
|
||||||
|
(swipe, index) => swipe !== nextProps.message.swipes[index],
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 其他属性比较
|
||||||
|
return (
|
||||||
|
prevProps.avatar === nextProps.avatar &&
|
||||||
|
prevProps.message.content === nextProps.message.content &&
|
||||||
|
prevProps.message.role === nextProps.message.role &&
|
||||||
|
prevProps.message.isStreaming === nextProps.message.isStreaming &&
|
||||||
|
prevProps.name === nextProps.name &&
|
||||||
|
prevProps.isLastMsg === nextProps.isLastMsg &&
|
||||||
|
prevProps.message.sendAt === nextProps.message.sendAt &&
|
||||||
|
prevProps.message.activeSwipeId === nextProps.message.activeSwipeId &&
|
||||||
|
prevProps.message.id === nextProps.message.id &&
|
||||||
|
prevProps.index === nextProps.index
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MessageItem = React.memo((props: MessageItemProps) => {
|
||||||
|
const {
|
||||||
|
message,
|
||||||
|
originalMessage,
|
||||||
|
|
||||||
|
// index,
|
||||||
|
// avatar,
|
||||||
|
// name,
|
||||||
|
isLastMsg,
|
||||||
|
isFirstMsg,
|
||||||
|
onRegenerate,
|
||||||
|
onContinue,
|
||||||
|
onDelete,
|
||||||
|
onEdit,
|
||||||
|
onSwipe,
|
||||||
|
} = props;
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
|
||||||
|
role,
|
||||||
|
isStreaming,
|
||||||
|
|
||||||
|
content,
|
||||||
|
swipes = [],
|
||||||
|
activeSwipeId,
|
||||||
|
|
||||||
|
mjv,
|
||||||
|
|
||||||
|
// sendAt,
|
||||||
|
} = message;
|
||||||
|
const isUser = role === 'user';
|
||||||
|
|
||||||
|
const messageRef = React.useRef<HTMLDivElement>(null); // 使用 useRef 获取当前组件的引用
|
||||||
|
const [isEditing, setIsEditing] = React.useState(false); // State to toggle edit mode
|
||||||
|
const [editedMessage, setEditedMessage] = React.useState(content);
|
||||||
|
const mujian = useMujian();
|
||||||
|
|
||||||
|
const renderedMessage = isUser ? content : swipes[activeSwipeId];
|
||||||
|
|
||||||
|
// 滚动到消息可见位置的通用函数
|
||||||
|
const scrollMessageIntoView = (
|
||||||
|
alignToBlock: ScrollLogicalPosition = 'end',
|
||||||
|
behavior: ScrollBehavior = 'instant',
|
||||||
|
) => {
|
||||||
|
if (messageRef.current) {
|
||||||
|
messageRef.current.scrollIntoView({
|
||||||
|
behavior: behavior,
|
||||||
|
block: alignToBlock,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveEdit = async () => {
|
||||||
|
if (id && activeSwipeId !== undefined) {
|
||||||
|
await onEdit(id, editedMessage);
|
||||||
|
setIsEditing(false);
|
||||||
|
|
||||||
|
setTimeout(() => scrollMessageIntoView('end', 'smooth'), 100);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopy = async () => {
|
||||||
|
try {
|
||||||
|
await mujian.utils.clipboard.writeText(originalMessage.content);
|
||||||
|
addToast({
|
||||||
|
color: 'success',
|
||||||
|
description: '复制成功',
|
||||||
|
timeout: 2000,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
addToast({
|
||||||
|
description: '复制失败，请重试。',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Separate function to handle message deletion
|
||||||
|
const handleDeleteMessage = async () => {
|
||||||
|
if (id) {
|
||||||
|
onDelete(id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// console.log("content", index, content);
|
||||||
|
|
||||||
|
// 确保 currentSwipeId 在有效范围内
|
||||||
|
const validSwipeId = Math.min(Math.max(0, activeSwipeId), swipes.length - 1);
|
||||||
|
|
||||||
|
const handleSwipe = async (direction: 'prev' | 'next') => {
|
||||||
|
if (swipes.length <= 1) return;
|
||||||
|
|
||||||
|
// 简化计算逻辑，直接使用模运算确保能够循环浏览所有页面
|
||||||
|
const newSwipeId =
|
||||||
|
direction === 'prev'
|
||||||
|
? (activeSwipeId - 1 + swipes.length) % swipes.length
|
||||||
|
: (activeSwipeId + 1) % swipes.length;
|
||||||
|
|
||||||
|
await onSwipe(id, newSwipeId);
|
||||||
|
|
||||||
|
scrollMessageIntoView();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Stop propagation for message text clicks
|
||||||
|
const handleMessageTextClick: MouseEventHandler<HTMLDivElement> = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditButtonClick = async () => {
|
||||||
|
setIsEditing(true);
|
||||||
|
if (isUser) {
|
||||||
|
setEditedMessage(originalMessage.content);
|
||||||
|
} else {
|
||||||
|
setEditedMessage(originalMessage.swipes[validSwipeId]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`message-${activeSwipeId}`}
|
||||||
|
ref={messageRef} // 将 ref 绑定到根容器
|
||||||
|
className={mjChatCls(
|
||||||
|
['msg-item-wrapper'],
|
||||||
|
cn('grid items-end gap-2 mb-2 w-full grid-cols-[32px_1fr_32px]'),
|
||||||
|
)}
|
||||||
|
onContextMenu={(event) => {
|
||||||
|
// 按ctrl点击时打印ID
|
||||||
|
if (event.ctrlKey) {
|
||||||
|
event.preventDefault();
|
||||||
|
console.log('Official Chat Message ID:', id, mjv);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MessageBubble
|
||||||
|
message={message}
|
||||||
|
isUser={isUser}
|
||||||
|
isEditing={isEditing}
|
||||||
|
editedMessage={editedMessage}
|
||||||
|
onEditChange={setEditedMessage}
|
||||||
|
onCopyClick={handleCopy}
|
||||||
|
isStreaming={isStreaming}
|
||||||
|
currentMessage={renderedMessage}
|
||||||
|
onEditButtonClick={handleEditButtonClick}
|
||||||
|
onDelete={handleDeleteMessage}
|
||||||
|
onEditAreaShow={() => scrollMessageIntoView()}
|
||||||
|
/>
|
||||||
|
<EditActions
|
||||||
|
isUser={isUser}
|
||||||
|
isEditing={isEditing}
|
||||||
|
onSaveEdit={handleSaveEdit}
|
||||||
|
onCancelEdit={() => {
|
||||||
|
setIsEditing(false);
|
||||||
|
setEditedMessage(
|
||||||
|
isUser
|
||||||
|
? originalMessage.content
|
||||||
|
: originalMessage.swipes[activeSwipeId],
|
||||||
|
);
|
||||||
|
// 滚动到消息位置
|
||||||
|
setTimeout(() => scrollMessageIntoView('end', 'smooth'), 100);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<MessageActions
|
||||||
|
message={message}
|
||||||
|
isUser={isUser}
|
||||||
|
isLastMsg={Boolean(isLastMsg)}
|
||||||
|
isFirstMsg={Boolean(isFirstMsg)}
|
||||||
|
isStreaming={isStreaming}
|
||||||
|
isEditing={isEditing}
|
||||||
|
swipes={swipes}
|
||||||
|
activeSwipeId={activeSwipeId}
|
||||||
|
onRegenerate={onRegenerate}
|
||||||
|
onContinue={onContinue}
|
||||||
|
onEditButtonClick={handleEditButtonClick}
|
||||||
|
onCopyClick={handleCopy}
|
||||||
|
onSwipe={handleSwipe}
|
||||||
|
onMessageTextClick={handleMessageTextClick}
|
||||||
|
onDelete={handleDeleteMessage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}, arePropsEqual);
|
||||||
|
|
||||||
|
MessageItem.displayName = 'Message';
|
||||||
159
src/pages/chat/MessageList.tsx
Normal file
159
src/pages/chat/MessageList.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
import type { Message as MessageType } from '@mujian/js-sdk/react';
|
||||||
|
import { Thread, type VListHandle } from '@mujian/js-sdk/react';
|
||||||
|
import { useThrottleFn } from 'ahooks';
|
||||||
|
import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import { useGlobalStore } from '@/store/global';
|
||||||
|
import { MessageItem } from './MessageItem/';
|
||||||
|
|
||||||
|
export type MsgProps = {
|
||||||
|
data: MessageType[];
|
||||||
|
onRegenerate?: () => Promise<void>;
|
||||||
|
sendMessage?: (message: string) => Promise<void>;
|
||||||
|
onContinue?: () => Promise<void>;
|
||||||
|
onDelete: (messageId: string) => Promise<void>;
|
||||||
|
onEdit: (messageId: string, content: string) => Promise<void>;
|
||||||
|
onSwipe: (messageId: string, swipeId: number) => Promise<void>;
|
||||||
|
onNeedMore: () => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const OVERSCAN = 10;
|
||||||
|
|
||||||
|
export const MessageList = React.memo(
|
||||||
|
({
|
||||||
|
data,
|
||||||
|
onRegenerate,
|
||||||
|
sendMessage,
|
||||||
|
onContinue,
|
||||||
|
onDelete,
|
||||||
|
onEdit,
|
||||||
|
onSwipe,
|
||||||
|
onNeedMore,
|
||||||
|
}: MsgProps) => {
|
||||||
|
const prevDataLength = useRef(0);
|
||||||
|
const prevLastMsgId = useRef('');
|
||||||
|
const { activePersona, projectInfo } = useGlobalStore();
|
||||||
|
const vListRef = useRef<VListHandle>(null);
|
||||||
|
const [visibleRange, setVisibleRange] = useState<[number, number]>([0, 0]);
|
||||||
|
const [shifting, setShifting] = useState(false);
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
const vl = vListRef.current;
|
||||||
|
if (!vl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const isScrolledBottom = () =>
|
||||||
|
vl.viewportSize + vl.scrollOffset + 16 >= vl.scrollSize;
|
||||||
|
|
||||||
|
const lastMessage = data[data.length - 1];
|
||||||
|
const shouldScrollToBottom = [
|
||||||
|
data.length !== prevDataLength.current &&
|
||||||
|
prevLastMsgId.current !== lastMessage?.id, // 新消息
|
||||||
|
lastMessage?.isStreaming && isScrolledBottom(),
|
||||||
|
].some(Boolean);
|
||||||
|
|
||||||
|
if (shouldScrollToBottom) {
|
||||||
|
vl.scrollTo(prevDataLength.current ? vl.scrollSize : 9999999);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 因为最后一条消息的ID会在生成完毕后改变，会导致最后一条消息被滚动出去。这里进行滚动位置恢复
|
||||||
|
const shouldRecoverScroll =
|
||||||
|
prevDataLength.current === data.length &&
|
||||||
|
prevLastMsgId.current !== lastMessage?.id;
|
||||||
|
if (shouldRecoverScroll) {
|
||||||
|
vl.scrollTo(vl.scrollOffset);
|
||||||
|
}
|
||||||
|
|
||||||
|
prevDataLength.current = data.length;
|
||||||
|
prevLastMsgId.current = lastMessage?.id;
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const { run: onScroll } = useThrottleFn(
|
||||||
|
() => {
|
||||||
|
const vl = vListRef.current;
|
||||||
|
if (!vl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startIndex = vl.findStartIndex();
|
||||||
|
const endIndex = vl.findEndIndex();
|
||||||
|
setVisibleRange([startIndex, endIndex]);
|
||||||
|
|
||||||
|
if (startIndex === 0) {
|
||||||
|
// 让VList计算元素相对底部的距离，加载完毕后再切回顶部距离
|
||||||
|
setShifting(true);
|
||||||
|
onNeedMore().finally(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setShifting(false);
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
wait: 300,
|
||||||
|
leading: false,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const keepMountedList = useMemo(() => {
|
||||||
|
if (visibleRange[0] === 0 && visibleRange[1] === 0) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const overscan = 10;
|
||||||
|
const from = Math.max(visibleRange[0] - overscan, 0);
|
||||||
|
const to = Math.min(visibleRange[1] + overscan, data.length - 1);
|
||||||
|
const array = [];
|
||||||
|
for (let i = from; i <= to; i++) {
|
||||||
|
array.push(i);
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}, [visibleRange[0], visibleRange[1], data.length]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Thread.MessageList
|
||||||
|
ref={vListRef}
|
||||||
|
messages={data}
|
||||||
|
vListProps={{
|
||||||
|
reverse: false,
|
||||||
|
overscan: OVERSCAN,
|
||||||
|
keepMounted: keepMountedList,
|
||||||
|
onScroll,
|
||||||
|
shift: shifting,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{(props) => (
|
||||||
|
<Thread.MessageItem key={props.message.id} {...props}>
|
||||||
|
{(msg, originalMessage) => (
|
||||||
|
<MessageItem
|
||||||
|
key={msg.id}
|
||||||
|
message={msg}
|
||||||
|
originalMessage={originalMessage}
|
||||||
|
avatar={
|
||||||
|
msg.role === 'user'
|
||||||
|
? activePersona?.avatarUrl || ''
|
||||||
|
: projectInfo?.coverImageUrl || ''
|
||||||
|
}
|
||||||
|
name={
|
||||||
|
msg.role === 'user'
|
||||||
|
? activePersona?.name || ''
|
||||||
|
: projectInfo?.title || ''
|
||||||
|
}
|
||||||
|
index={props.index}
|
||||||
|
isFirstMsg={props.index === 0}
|
||||||
|
isLastMsg={props.depth === 0}
|
||||||
|
sendMessage={sendMessage}
|
||||||
|
onContinue={onContinue}
|
||||||
|
onDelete={onDelete}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onSwipe={onSwipe}
|
||||||
|
onRegenerate={onRegenerate}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Thread.MessageItem>
|
||||||
|
)}
|
||||||
|
</Thread.MessageList>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
MessageList.displayName = 'MessageList';
|
||||||
140
src/pages/chat/MsgSend.tsx
Normal file
140
src/pages/chat/MsgSend.tsx
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
import { Button, Textarea } from '@heroui/react';
|
||||||
|
import { CircleStopIcon, SendIcon } from 'lucide-react';
|
||||||
|
import { mjChatCls } from '@/utils/cls';
|
||||||
|
import { useContext } from 'react';
|
||||||
|
import { PanicContext } from './PanicContext';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
onSend: (query: string) => void;
|
||||||
|
onStop: () => void;
|
||||||
|
running?: boolean;
|
||||||
|
value: string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const isMobile = ((): boolean => {
|
||||||
|
const userAgent =
|
||||||
|
typeof window !== 'undefined'
|
||||||
|
? window?.navigator?.userAgent?.toLowerCase()
|
||||||
|
: '';
|
||||||
|
const mobileRegex =
|
||||||
|
/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|tablet/i;
|
||||||
|
|
||||||
|
return mobileRegex.test(userAgent);
|
||||||
|
})();
|
||||||
|
|
||||||
|
export const MsgSend = ({
|
||||||
|
onSend,
|
||||||
|
onStop,
|
||||||
|
running = false,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
}: Props) => {
|
||||||
|
const { panicked } = useContext(PanicContext);
|
||||||
|
|
||||||
|
const isEmptyInput = value.trim().length === 0;
|
||||||
|
|
||||||
|
const handleSend = () => {
|
||||||
|
if (value) {
|
||||||
|
onSend(value);
|
||||||
|
onChange(''); // 发送后清空输入框
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Textarea
|
||||||
|
className={mjChatCls(['input-textarea'], 'dark')}
|
||||||
|
classNames={{
|
||||||
|
label: mjChatCls(
|
||||||
|
['input-textarea-label'],
|
||||||
|
'text-black/50 dark:text-white/90',
|
||||||
|
),
|
||||||
|
input: mjChatCls(
|
||||||
|
['input-textarea-input'],
|
||||||
|
[
|
||||||
|
'bg-transparent',
|
||||||
|
'text-black/90 dark:text-white/90',
|
||||||
|
'placeholder:text-default-700/50 dark:placeholder:text-white/60',
|
||||||
|
].join(' '),
|
||||||
|
),
|
||||||
|
innerWrapper: mjChatCls(
|
||||||
|
['input-textarea-innerWrapper'],
|
||||||
|
'bg-transparent items-center',
|
||||||
|
),
|
||||||
|
inputWrapper: mjChatCls(
|
||||||
|
['input-textarea-inputWrapper'],
|
||||||
|
'shadow-xl bg-dark/40 dark:bg-black/40',
|
||||||
|
),
|
||||||
|
mainWrapper: mjChatCls(['input-textarea-mainWrapper'], 'px-2'),
|
||||||
|
}}
|
||||||
|
disabled={running || panicked}
|
||||||
|
endContent={
|
||||||
|
running ? (
|
||||||
|
<Button
|
||||||
|
className={mjChatCls(
|
||||||
|
['input-textarea-stop-button'],
|
||||||
|
'bg-primary',
|
||||||
|
)}
|
||||||
|
isIconOnly
|
||||||
|
radius="full"
|
||||||
|
size="sm"
|
||||||
|
onPress={() => {
|
||||||
|
onStop();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CircleStopIcon
|
||||||
|
className={mjChatCls(
|
||||||
|
['input-textarea-stop-button-icon'],
|
||||||
|
'w-5 h-5',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
className={mjChatCls(
|
||||||
|
['input-textarea-send-button'],
|
||||||
|
'bg-primary',
|
||||||
|
)}
|
||||||
|
isIconOnly
|
||||||
|
radius="full"
|
||||||
|
size="sm"
|
||||||
|
onPress={handleSend}
|
||||||
|
isDisabled={isEmptyInput}
|
||||||
|
>
|
||||||
|
<SendIcon
|
||||||
|
className={mjChatCls(
|
||||||
|
['input-textarea-send-button-icon'],
|
||||||
|
'w-5 h-5',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
maxLength={50000}
|
||||||
|
maxRows={4}
|
||||||
|
minRows={1}
|
||||||
|
placeholder={running ? '正在生成...' : '按 Enter 发送'}
|
||||||
|
radius="lg"
|
||||||
|
size="lg"
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (
|
||||||
|
e.key === 'Enter' &&
|
||||||
|
!isMobile &&
|
||||||
|
!e.ctrlKey &&
|
||||||
|
!e.shiftKey &&
|
||||||
|
!e.altKey &&
|
||||||
|
!e.metaKey &&
|
||||||
|
!e.nativeEvent.isComposing &&
|
||||||
|
!isEmptyInput
|
||||||
|
) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSend();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
3
src/pages/chat/PanicContext.tsx
Normal file
3
src/pages/chat/PanicContext.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { createContext } from 'react';
|
||||||
|
|
||||||
|
export const PanicContext = createContext({ panicked: false });
|
||||||
117
src/pages/chat/QuickReply.tsx
Normal file
117
src/pages/chat/QuickReply.tsx
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import { Chip, ScrollShadow } from '@heroui/react';
|
||||||
|
import type { QuickReply as QuickReplyType } from '@mujian/js-sdk/types';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { mjChatCls } from '@/utils/cls';
|
||||||
|
|
||||||
|
export interface QuickReplyProps {
|
||||||
|
quickReplies: Array<QuickReplyType>;
|
||||||
|
onSend: (query: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const QuickReply = (props: QuickReplyProps) => {
|
||||||
|
const { quickReplies, onSend } = props;
|
||||||
|
|
||||||
|
const scrollShadowRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleWheel = (e: WheelEvent) => {
|
||||||
|
if (Math.abs(e.deltaY) > 0 && scrollShadowRef.current) {
|
||||||
|
e.preventDefault();
|
||||||
|
scrollShadowRef.current.scrollLeft += e.deltaY;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
scrollShadowRef?.current?.addEventListener('wheel', handleWheel, {
|
||||||
|
passive: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return () =>
|
||||||
|
scrollShadowRef?.current?.removeEventListener('wheel', handleWheel);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const lastDragTime = useRef(0);
|
||||||
|
|
||||||
|
const onmousedown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
// 防止文字选择
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// 禁用页面文字选择
|
||||||
|
document.body.style.userSelect = 'none';
|
||||||
|
document.body.style.webkitUserSelect = 'none';
|
||||||
|
|
||||||
|
lastDragTime.current = 0;
|
||||||
|
let dragged = false;
|
||||||
|
// biome-ignore lint/suspicious/noExplicitAny: 抄来的代码
|
||||||
|
const mouseMove: EventListener = (e: any) => {
|
||||||
|
dragged = true;
|
||||||
|
if (scrollShadowRef.current) {
|
||||||
|
scrollShadowRef.current.scrollLeft += e.movementX * -2;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const mouseUp: EventListener = () => {
|
||||||
|
// 恢复文字选择
|
||||||
|
document.body.style.userSelect = '';
|
||||||
|
document.body.style.webkitUserSelect = '';
|
||||||
|
|
||||||
|
document.removeEventListener('mousemove', mouseMove);
|
||||||
|
document.removeEventListener('mouseup', mouseUp);
|
||||||
|
if (dragged) {
|
||||||
|
lastDragTime.current = Date.now();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', mouseMove);
|
||||||
|
document.addEventListener('mouseup', mouseUp);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollShadow
|
||||||
|
ref={scrollShadowRef}
|
||||||
|
hideScrollBar
|
||||||
|
className={mjChatCls(
|
||||||
|
['input-quickreply-container'],
|
||||||
|
'flex w-full overflow-auto gap-2',
|
||||||
|
)}
|
||||||
|
orientation="horizontal"
|
||||||
|
style={{
|
||||||
|
userSelect: 'none',
|
||||||
|
WebkitUserSelect: 'none',
|
||||||
|
MozUserSelect: 'none',
|
||||||
|
msUserSelect: 'none',
|
||||||
|
}}
|
||||||
|
onMouseDown={onmousedown}
|
||||||
|
>
|
||||||
|
{quickReplies
|
||||||
|
.filter((qr) => !qr.isHidden)
|
||||||
|
.map((qr, index) => (
|
||||||
|
<Chip
|
||||||
|
key={index}
|
||||||
|
className={mjChatCls(
|
||||||
|
['input-quickreply-chip', `input-quickreply-chip-${index + 1}`],
|
||||||
|
'bg-white/15 text-default shrink-0 cursor-pointer',
|
||||||
|
)}
|
||||||
|
classNames={{
|
||||||
|
base: mjChatCls([
|
||||||
|
'input-quickreply-chip-base',
|
||||||
|
`input-quickreply-chip-${index + 1}-base`,
|
||||||
|
]),
|
||||||
|
content: mjChatCls([
|
||||||
|
'input-quickreply-chip-content',
|
||||||
|
`input-quickreply-chip-${index + 1}-content`,
|
||||||
|
]),
|
||||||
|
}}
|
||||||
|
radius="full"
|
||||||
|
variant="light"
|
||||||
|
onClick={() => {
|
||||||
|
const isClick = Date.now() - lastDragTime.current > 50;
|
||||||
|
if (isClick && qr.message) {
|
||||||
|
onSend(qr.message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{qr.label}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</ScrollShadow>
|
||||||
|
);
|
||||||
|
};
|
||||||
242
src/pages/chat/index.tsx
Normal file
242
src/pages/chat/index.tsx
Normal file
@@ -0,0 +1,242 @@
|
|||||||
|
import { Alert, ScrollShadow, Spinner, ToastProvider } from '@heroui/react';
|
||||||
|
import { useChat, useMjEngine, useMujian } from '@mujian/js-sdk/react';
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
import { useGlobalStore } from '@/store/global';
|
||||||
|
import { mjChatCls } from '@/utils/cls';
|
||||||
|
import { MessageList } from './MessageList';
|
||||||
|
import { MsgSend } from './MsgSend';
|
||||||
|
import { PanicContext } from './PanicContext';
|
||||||
|
import { QuickReply } from './QuickReply';
|
||||||
|
|
||||||
|
export const Chat = () => {
|
||||||
|
const { init, projectInfo, activePersona } = useGlobalStore();
|
||||||
|
const mujian = useMujian();
|
||||||
|
const [inputValue, setInputValue] = useState('');
|
||||||
|
const {
|
||||||
|
messages,
|
||||||
|
status,
|
||||||
|
error,
|
||||||
|
append,
|
||||||
|
continueGenerate,
|
||||||
|
regenerate,
|
||||||
|
stop,
|
||||||
|
deleteMessage,
|
||||||
|
editMessage,
|
||||||
|
setSwipe,
|
||||||
|
loadMoreMessage,
|
||||||
|
} = useChat({
|
||||||
|
onError: (e) => {
|
||||||
|
console.error(e);
|
||||||
|
},
|
||||||
|
pageSize: 20,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 自定义删除消息函数
|
||||||
|
const handleDeleteMessage = async (messageId: string) => {
|
||||||
|
// 找到要删除的消息
|
||||||
|
const messageIndex = messages.findIndex((msg) => msg.id === messageId);
|
||||||
|
if (messageIndex === -1) return;
|
||||||
|
|
||||||
|
let deletedUserMessageContent = '';
|
||||||
|
|
||||||
|
// 检查前一条消息是否是用户消息且被删除的消息是AI消息
|
||||||
|
if (messageIndex > 0 && messages[messageIndex].role === 'assistant') {
|
||||||
|
const prevMessage = messages[messageIndex - 1];
|
||||||
|
if (prevMessage.role === 'user') {
|
||||||
|
// 保存用户消息内容
|
||||||
|
deletedUserMessageContent = prevMessage.content;
|
||||||
|
// 同时删除前一条用户消息
|
||||||
|
deleteMessage(prevMessage.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除当前消息
|
||||||
|
await deleteMessage(messageId);
|
||||||
|
|
||||||
|
// 如果有删除的用户消息，将其内容填入发送框
|
||||||
|
if (deletedUserMessageContent) {
|
||||||
|
setInputValue(deletedUserMessageContent);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const paddingTop = useMemo(() => {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
return parseInt(params.get('insetTop') || '0', 10);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// biome-ignore lint/correctness/useExhaustiveDependencies: onMount ONLY
|
||||||
|
useEffect(() => {
|
||||||
|
init(mujian);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onSend = useCallback(
|
||||||
|
(query: string) => {
|
||||||
|
let _q = query;
|
||||||
|
|
||||||
|
const marcos = [
|
||||||
|
{
|
||||||
|
variable: 'user',
|
||||||
|
value: activePersona?.name || '',
|
||||||
|
},
|
||||||
|
{ variable: 'char', value: projectInfo?.title || '' },
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const macro of marcos) {
|
||||||
|
_q = _q.replace(new RegExp(`{{${macro.variable}}}`, 'g'), macro.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
return append(_q);
|
||||||
|
},
|
||||||
|
[append, projectInfo, activePersona],
|
||||||
|
);
|
||||||
|
|
||||||
|
useMjEngine({
|
||||||
|
projectInfo: projectInfo ?? undefined,
|
||||||
|
activePersona: activePersona ?? undefined,
|
||||||
|
onSend,
|
||||||
|
messages,
|
||||||
|
setSwipe,
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleInputChange = (value: string) => {
|
||||||
|
setInputValue(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (status === 'uninitialized') {
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full flex justify-center items-center">
|
||||||
|
<Spinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const errorMessage =
|
||||||
|
Boolean(error) &&
|
||||||
|
(typeof error === 'object' &&
|
||||||
|
error &&
|
||||||
|
'message' in error &&
|
||||||
|
typeof error.message === 'string'
|
||||||
|
? error.message
|
||||||
|
: '哎呀，发生了未知错误，刷新页面再试试吧~');
|
||||||
|
|
||||||
|
const toastStyle = `
|
||||||
|
.toast-region {
|
||||||
|
margin-top: ${paddingTop}px;
|
||||||
|
}`;
|
||||||
|
|
||||||
|
const saveFailed =
|
||||||
|
status !== 'streaming' &&
|
||||||
|
messages.some((m) => m.id.startsWith('not_saved'));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanicContext.Provider
|
||||||
|
value={{ panicked: saveFailed || Boolean(errorMessage) }}
|
||||||
|
>
|
||||||
|
<div className={mjChatCls(['container'], 'size-full relative')}>
|
||||||
|
<style> {toastStyle} </style>
|
||||||
|
<ToastProvider
|
||||||
|
placement="top-center"
|
||||||
|
toastProps={{ color: 'danger' }}
|
||||||
|
disableAnimation={true}
|
||||||
|
regionProps={{
|
||||||
|
classNames: {
|
||||||
|
base: 'toast-region',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['container-background'],
|
||||||
|
'h-full opacity-30 blur-xs object-cover absolute top-0 left-1/2 w-[min(640px,100%)] -translate-x-1/2 bg-cover bg-top bg-no-repeat [mask-image:linear-gradient(to_right,transparent,black_100px,black_calc(100%-100px),transparent)]',
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
backgroundImage: projectInfo
|
||||||
|
? `url(${projectInfo.coverImageUrl})`
|
||||||
|
: undefined,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['container-content'],
|
||||||
|
'size-full z-10 p-3 flex flex-col',
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
paddingTop,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ScrollShadow
|
||||||
|
hideScrollBar
|
||||||
|
className={mjChatCls(
|
||||||
|
['container-content-scroll-shadow'],
|
||||||
|
'h-full pb-2',
|
||||||
|
)}
|
||||||
|
size={20}
|
||||||
|
>
|
||||||
|
<MessageList
|
||||||
|
data={messages}
|
||||||
|
sendMessage={async (q) => {
|
||||||
|
await onSend(q);
|
||||||
|
}}
|
||||||
|
onContinue={continueGenerate}
|
||||||
|
onDelete={handleDeleteMessage}
|
||||||
|
onEdit={editMessage}
|
||||||
|
onSwipe={setSwipe}
|
||||||
|
onRegenerate={regenerate}
|
||||||
|
onNeedMore={loadMoreMessage}
|
||||||
|
/>
|
||||||
|
{saveFailed && (
|
||||||
|
<Alert
|
||||||
|
hideIcon
|
||||||
|
title="最近一次保存消息失败，请刷新页面后重试"
|
||||||
|
className="opacity-30"
|
||||||
|
classNames={{
|
||||||
|
mainWrapper: 'min-h-4 ml-0 text-white',
|
||||||
|
}}
|
||||||
|
color="default"
|
||||||
|
variant="bordered"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{errorMessage && (
|
||||||
|
<Alert
|
||||||
|
hideIcon
|
||||||
|
className={mjChatCls(['error-message'], 'mt-2 mb-6')}
|
||||||
|
classNames={{
|
||||||
|
mainWrapper: mjChatCls(
|
||||||
|
['error-message-mainWrapper'],
|
||||||
|
'min-h-4 ml-0',
|
||||||
|
),
|
||||||
|
description: 'opacity-80 text-xs',
|
||||||
|
}}
|
||||||
|
color="danger"
|
||||||
|
title="出错啦，请刷新页面后重试"
|
||||||
|
description={errorMessage}
|
||||||
|
variant="bordered"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</ScrollShadow>
|
||||||
|
<div
|
||||||
|
className={mjChatCls(
|
||||||
|
['input-container'],
|
||||||
|
'flex flex-col gap-4 mt-2',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{projectInfo?.config?.qrConfig?.qrList &&
|
||||||
|
projectInfo?.config?.qrConfig?.qrList.length > 0 && (
|
||||||
|
<QuickReply
|
||||||
|
quickReplies={projectInfo?.config?.qrConfig.qrList}
|
||||||
|
onSend={onSend}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<MsgSend
|
||||||
|
running={status === 'streaming'}
|
||||||
|
onSend={onSend}
|
||||||
|
onStop={stop}
|
||||||
|
value={inputValue}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PanicContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
14
src/providers/RouterProvider.tsx
Normal file
14
src/providers/RouterProvider.tsx
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { createBrowserRouter } from 'react-router';
|
||||||
|
import { RouterProvider } from 'react-router/dom';
|
||||||
|
import { Chat } from '@/pages/chat';
|
||||||
|
|
||||||
|
const router = createBrowserRouter([
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <Chat />,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const ReactRouterProvider = () => {
|
||||||
|
return <RouterProvider router={router} />;
|
||||||
|
};
|
||||||
5
src/store/.cursor/rules/store_rules.mdc
Normal file
5
src/store/.cursor/rules/store_rules.mdc
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
description:
|
||||||
|
globs:
|
||||||
|
alwaysApply: false
|
||||||
|
---
|
||||||
23
src/store/global.tsx
Normal file
23
src/store/global.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import type { MujianSdk } from '@mujian/js-sdk';
|
||||||
|
import type { PersonaInfo, ProjectInfo } from '@mujian/js-sdk/types';
|
||||||
|
import { create } from 'zustand';
|
||||||
|
|
||||||
|
type GlobalState = {
|
||||||
|
projectInfo: ProjectInfo | null;
|
||||||
|
activePersona: PersonaInfo | null;
|
||||||
|
init: (mujian: MujianSdk) => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useGlobalStore = create<GlobalState>((set) => ({
|
||||||
|
count: 0,
|
||||||
|
projectInfo: null,
|
||||||
|
activePersona: null,
|
||||||
|
|
||||||
|
init: async (mujian: MujianSdk) => {
|
||||||
|
const [projectInfo, persona] = await Promise.all([
|
||||||
|
mujian.ai.chat.project.getInfo(),
|
||||||
|
mujian.ai.chat.settings.persona.getActive(),
|
||||||
|
]);
|
||||||
|
set({ projectInfo, activePersona: persona });
|
||||||
|
},
|
||||||
|
}));
|
||||||
0
src/styles/fonts.css
Normal file
0
src/styles/fonts.css
Normal file
33
src/styles/global.css
Normal file
33
src/styles/global.css
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@config "../../tailwind.config.js";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--breakpoint-xs: 30rem;
|
||||||
|
--breakpoint-2xs: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
background: #18181b;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root,
|
||||||
|
body,
|
||||||
|
#root {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mes_text > :last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
9
src/utils/cls.ts
Normal file
9
src/utils/cls.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
const PREFIX = 'mj-chat';
|
||||||
|
|
||||||
|
export const mjChatCls = (classNames: string[], defaultClassNames?: string) => {
|
||||||
|
return (
|
||||||
|
classNames.map((cls) => `${PREFIX}-${cls}`).join(' ') +
|
||||||
|
' ' +
|
||||||
|
(defaultClassNames || '')
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
46
tailwind.config.js
Normal file
46
tailwind.config.js
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import { heroui } from '@heroui/theme';
|
||||||
|
import animate from 'tailwindcss-animate';
|
||||||
|
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['var(--font-sans)'],
|
||||||
|
mono: ['var(--font-mono)'],
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
modalMark:
|
||||||
|
'linear-gradient(to top, rgba(0, 0, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.8) 68%, rgba(255, 255, 255, 0.65) 82%, rgba(255, 255, 255, 0) 100%)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
darkMode: ['class'],
|
||||||
|
plugins: [
|
||||||
|
heroui({
|
||||||
|
addCommonColors: true,
|
||||||
|
// defaultTheme: "light", // default theme from the themes object
|
||||||
|
// defaultExtendTheme: "light", // default theme to extend on custom themes
|
||||||
|
themes: {
|
||||||
|
light: {
|
||||||
|
colors: {
|
||||||
|
primary: { DEFAULT: '#EC4342' },
|
||||||
|
background: { DEFAULT: '#18181B' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
colors: {
|
||||||
|
primary: { DEFAULT: '#EC4342' },
|
||||||
|
background: { DEFAULT: '#18181B' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
animate,
|
||||||
|
],
|
||||||
|
};
|
||||||
31
tsconfig.app.json
Normal file
31
tsconfig.app.json
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
25
tsconfig.node.json
Normal file
25
tsconfig.node.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
15
vite.config.ts
Normal file
15
vite.config.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import path from 'path';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tailwindcss()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, './src'),
|
||||||
|
},
|
||||||
|
// dedupe: ['react', 'react-dom'],
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user