heimoshuiyu/chatgpt-api-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

rename class to className

Browse Source
This commit is contained in:
黑墨水鱼
2024-10-14 17:50:55 +08:00
parent f5d43ec4b9
commit 1c3c94bae4
9 changed files with 173 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/addImage.tsx
View File

@@ -57,7 +57,7 @@ export function AddImage({
Done Done
</button> </button>
</div> </div>
<span class=""> <span className="">
<button <button
className="btn btn-secondary btn-sm disabled:btn-disabled" className="btn btn-secondary btn-sm disabled:btn-disabled"
onClick={() => { onClick={() => {
@@ -121,7 +121,7 @@ export function AddImage({
<input type="checkbox" checked={enableHighResolution} /> <input type="checkbox" checked={enableHighResolution} />
</span> </span>
</span> </span>
<div class="divider"></div> <div className="divider"></div>
{chatStore.image_gen_api && chatStore.image_gen_key && ( {chatStore.image_gen_api && chatStore.image_gen_key && (
<div className="flex flex-col"> <div className="flex flex-col">
<h3>Generate Image</h3> <h3>Generate Image</h3>
@@ -138,7 +138,7 @@ export function AddImage({
<span className="flex flex-row justify-between items-center m-1 p-1"> <span className="flex flex-row justify-between items-center m-1 p-1">
<label>Model: </label> <label>Model: </label>
<select <select
class="select select-sm select-bordered" className="select select-sm select-bordered"
value={imageGenModel} value={imageGenModel}
onChange={(e: any) => { onChange={(e: any) => {
setImageGenModel(e.target.value); setImageGenModel(e.target.value);
@@ -151,7 +151,7 @@ export function AddImage({
<span className="flex flex-row justify-between items-center m-1 p-1"> <span className="flex flex-row justify-between items-center m-1 p-1">
<label>n: </label> <label>n: </label>
<input <input
class="input input-sm input-bordered" className="input input-sm input-bordered"
value={imageGenN} value={imageGenN}
type="number" type="number"
min={1} min={1}
@@ -162,7 +162,7 @@ export function AddImage({
<span className="flex flex-row justify-between items-center m-1 p-1"> <span className="flex flex-row justify-between items-center m-1 p-1">
<label>Quality: </label> <label>Quality: </label>
<select <select
class="select select-sm select-bordered" className="select select-sm select-bordered"
value={imageGenQuality} value={imageGenQuality}
onChange={(e: any) => setImageGEnQuality(e.target.value)} onChange={(e: any) => setImageGEnQuality(e.target.value)}
> >
@@ -173,7 +173,7 @@ export function AddImage({
<span className="flex flex-row justify-between items-center m-1 p-1"> <span className="flex flex-row justify-between items-center m-1 p-1">
<label>Response Format: </label> <label>Response Format: </label>
<select <select
class="select select-sm select-bordered" className="select select-sm select-bordered"
value={imageGenResponseFormat} value={imageGenResponseFormat}
onChange={(e: any) => setImageGenResponseFormat(e.target.value)} onChange={(e: any) => setImageGenResponseFormat(e.target.value)}
> >
@@ -184,7 +184,7 @@ export function AddImage({
<span className="flex flex-row justify-between items-center m-1 p-1"> <span className="flex flex-row justify-between items-center m-1 p-1">
<label>Size: </label> <label>Size: </label>
<select <select
class="select select-sm select-bordered" className="select select-sm select-bordered"
value={imageGenSize} value={imageGenSize}
onChange={(e: any) => setImageGenSize(e.target.value)} onChange={(e: any) => setImageGenSize(e.target.value)}
> >
@@ -198,7 +198,7 @@ export function AddImage({
<span className="flex flex-row justify-between items-center m-1 p-1"> <span className="flex flex-row justify-between items-center m-1 p-1">
<label>Style (only dall-e-3): </label> <label>Style (only dall-e-3): </label>
<select <select
class="select select-sm select-bordered" className="select select-sm select-bordered"
value={imageGenStyle} value={imageGenStyle}
onChange={(e: any) => setImageGenStyle(e.target.value)} onChange={(e: any) => setImageGenStyle(e.target.value)}
> >

2
src/app.tsx
View File

@@ -412,7 +412,7 @@ export function App() {
> >
{Tr("NEW")} {Tr("NEW")}
</button> </button>
<ul class="pt-2"> <ul className="pt-2">
{(allChatStoreIndexes as number[]) {(allChatStoreIndexes as number[])
.slice() .slice()
.reverse() .reverse()

108
src/chatbox.tsx
View File

@@ -475,13 +475,13 @@ export default function ChatBOX(props: {
/> />
)} )}
<div class="navbar bg-base-100 p-0"> <div className="navbar bg-base-100 p-0">
<div class="navbar-start"> <div className="navbar-start">
<div class="dropdown lg:hidden"> <div className="dropdown lg:hidden">
<div tabindex={0} role="button" class="btn btn-ghost btn-circle"> <div tabindex={0} role="button" className="btn btn-ghost btn-circle">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" className="h-6 w-6"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@@ -496,7 +496,7 @@ export default function ChatBOX(props: {
</div> </div>
<ul <ul
tabindex={0} tabindex={0}
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow" className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
> >
<li> <li>
<p> <p>
@@ -522,85 +522,85 @@ export default function ChatBOX(props: {
</div> </div>
</div> </div>
<div <div
class="navbar-center cursor-pointer py-1" className="navbar-center cursor-pointer py-1"
onClick={() => { onClick={() => {
setShowSettings(true); setShowSettings(true);
}} }}
> >
{/* the long staus bar */} {/* the long staus bar */}
<div class="stats shadow hidden lg:inline-grid"> <div className="stats shadow hidden lg:inline-grid">
<div class="stat"> <div className="stat">
<div class="stat-figure text-secondary"> <div className="stat-figure text-secondary">
<CubeIcon className="h-10 w-10" /> <CubeIcon className="h-10 w-10" />
</div> </div>
<div class="stat-title">Model</div> <div className="stat-title">Model</div>
<div class="stat-value text-base">{chatStore.model}</div> <div className="stat-value text-base">{chatStore.model}</div>
<div class="stat-desc"> <div className="stat-desc">
{models[chatStore.model]?.price?.prompt * 1000 * 1000} $/M {models[chatStore.model]?.price?.prompt * 1000 * 1000} $/M
tokens tokens
</div> </div>
</div> </div>
<div class="stat"> <div className="stat">
<div class="stat-figure text-secondary"> <div className="stat-figure text-secondary">
<SwatchIcon className="h-10 w-10" /> <SwatchIcon className="h-10 w-10" />
</div> </div>
<div class="stat-title">Mode</div> <div className="stat-title">Mode</div>
<div class="stat-value text-base"> <div className="stat-value text-base">
{chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")} {chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
</div> </div>
<div class="stat-desc">STREAM/FETCH</div> <div className="stat-desc">STREAM/FETCH</div>
</div> </div>
<div class="stat"> <div className="stat">
<div class="stat-figure text-secondary"> <div className="stat-figure text-secondary">
<ChatBubbleLeftEllipsisIcon className="h-10 w-10" /> <ChatBubbleLeftEllipsisIcon className="h-10 w-10" />
</div> </div>
<div class="stat-title">Tokens</div> <div className="stat-title">Tokens</div>
<div class="stat-value text-base">{chatStore.totalTokens}</div> <div className="stat-value text-base">{chatStore.totalTokens}</div>
<div class="stat-desc">Max: {chatStore.maxTokens}</div> <div className="stat-desc">Max: {chatStore.maxTokens}</div>
</div> </div>
<div class="stat"> <div className="stat">
<div class="stat-figure text-secondary"> <div className="stat-figure text-secondary">
<ScissorsIcon className="h-10 w-10" /> <ScissorsIcon className="h-10 w-10" />
</div> </div>
<div class="stat-title">Cut</div> <div className="stat-title">Cut</div>
<div class="stat-value text-base">{chatStore.postBeginIndex}</div> <div className="stat-value text-base">{chatStore.postBeginIndex}</div>
<div class="stat-desc"> <div className="stat-desc">
Max: {chatStore.history.filter(({ hide }) => !hide).length} Max: {chatStore.history.filter(({ hide }) => !hide).length}
</div> </div>
</div> </div>
<div class="stat"> <div className="stat">
<div class="stat-figure text-secondary"> <div className="stat-figure text-secondary">
<BanknotesIcon className="h-10 w-10" /> <BanknotesIcon className="h-10 w-10" />
</div> </div>
<div class="stat-title">Cost</div> <div className="stat-title">Cost</div>
<div class="stat-value text-base"> <div className="stat-value text-base">
${chatStore.cost.toFixed(4)} ${chatStore.cost.toFixed(4)}
</div> </div>
<div class="stat-desc"> <div className="stat-desc">
Accumulated: ${getTotalCost().toFixed(2)} Accumulated: ${getTotalCost().toFixed(2)}
</div> </div>
</div> </div>
</div> </div>
{/* the short status bar */} {/* the short status bar */}
<div class="indicator lg:hidden"> <div className="indicator lg:hidden">
{chatStore.totalTokens !== 0 && ( {chatStore.totalTokens !== 0 && (
<span class="indicator-item badge badge-primary"> <span className="indicator-item badge badge-primary">
Tokens: {chatStore.totalTokens} Tokens: {chatStore.totalTokens}
</span> </span>
)} )}
<a class="btn btn-ghost text-base sm:text-xl p-0"> <a className="btn btn-ghost text-base sm:text-xl p-0">
<SparklesIcon className="h-4 w-4 hidden sm:block" /> <SparklesIcon className="h-4 w-4 hidden sm:block" />
{chatStore.model} {chatStore.model}
</a> </a>
</div> </div>
</div> </div>
<div class="navbar-end"> <div className="navbar-end">
<button <button
class="btn btn-ghost btn-circle" className="btn btn-ghost btn-circle"
onClick={(event) => { onClick={(event) => {
// stop propagation to parent // stop propagation to parent
event.stopPropagation(); event.stopPropagation();
@@ -610,7 +610,7 @@ export default function ChatBOX(props: {
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" className="h-6 w-6"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@@ -624,17 +624,17 @@ export default function ChatBOX(props: {
</svg> </svg>
</button> </button>
<button <button
class="btn btn-ghost btn-circle hidden sm:block" className="btn btn-ghost btn-circle hidden sm:block"
onClick={() => setShowSettings(true)} onClick={() => setShowSettings(true)}
> >
<div class="indicator"> <div className="indicator">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="h-6 w-6" className="h-6 w-6"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@@ -648,7 +648,7 @@ export default function ChatBOX(props: {
/> />
</svg> </svg>
<span class="badge badge-xs badge-primary indicator-item"></span> <span className="badge badge-xs badge-primary indicator-item"></span>
</div> </div>
</button> </button>
</div> </div>
@@ -666,10 +666,10 @@ export default function ChatBOX(props: {
setShowSearch(true); setShowSearch(true);
}} }}
> >
<MagnifyingGlassIcon class="w-5 h-5" /> <MagnifyingGlassIcon className="w-5 h-5" />
</button> </button>
<div class="hidden lg:inline-grid"></div> <div className="hidden lg:inline-grid"></div>
<div class="lg:hidden"> <div className="lg:hidden">
<div> <div>
<button className="underline"> <button className="underline">
{chatStore.systemMessageContent.length > 16 {chatStore.systemMessageContent.length > 16
@@ -684,16 +684,16 @@ export default function ChatBOX(props: {
)} )}
</div> </div>
<div className="text-xs"> <div className="text-xs">
<span class="underline">{chatStore.model}</span>{" "} <span className="underline">{chatStore.model}</span>{" "}
<span> <span>
Tokens:{" "} Tokens:{" "}
<span class="underline"> <span className="underline">
{chatStore.totalTokens}/{chatStore.maxTokens} {chatStore.totalTokens}/{chatStore.maxTokens}
</span> </span>
</span>{" "} </span>{" "}
<span> <span>
{Tr("Cut")}:{" "} {Tr("Cut")}:{" "}
<span class="underline"> <span className="underline">
{chatStore.postBeginIndex}/ {chatStore.postBeginIndex}/
{chatStore.history.filter(({ hide }) => !hide).length} {chatStore.history.filter(({ hide }) => !hide).length}
</span>{" "} </span>{" "}
@@ -789,7 +789,7 @@ export default function ChatBOX(props: {
{Tr("Reset Current")} {Tr("Reset Current")}
</button> </button>
</h2> </h2>
<div class="divider"></div> <div className="divider"></div>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
{templates.map((t, index) => ( {templates.map((t, index) => (
<div <div
@@ -906,10 +906,10 @@ export default function ChatBOX(props: {
</p> </p>
)} )}
{chatStore.systemMessageContent.trim() && ( {chatStore.systemMessageContent.trim() && (
<div class="chat chat-start"> <div className="chat chat-start">
<div class="chat-header">Prompt</div> <div className="chat-header">Prompt</div>
<div <div
class="chat-bubble chat-bubble-accent cursor-pointer message-content" className="chat-bubble chat-bubble-accent cursor-pointer message-content"
onClick={() => setShowSettings(true)} onClick={() => setShowSettings(true)}
> >
{chatStore.systemMessageContent} {chatStore.systemMessageContent}
@@ -1047,7 +1047,7 @@ export default function ChatBOX(props: {
{generatingMessage && ( {generatingMessage && (
<span <span
class="p-2 m-2 rounded bg-white dark:text-black dark:bg-white dark:bg-opacity-50" className="p-2 m-2 rounded bg-white dark:text-black dark:bg-white dark:bg-opacity-50"
style={{ textAlign: "right" }} style={{ textAlign: "right" }}
onClick={() => { onClick={() => {
setFollow(!follow); setFollow(!follow);

4
src/listAPIs.tsx
View File

@@ -45,7 +45,7 @@ export function ListAPIs({
<span className="w-full text-center">{t.name}</span> <span className="w-full text-center">{t.name}</span>
<span className="flex justify-between gap-x-2"> <span className="flex justify-between gap-x-2">
<button <button
class="link" className="link"
onClick={() => { onClick={() => {
const name = prompt(`Give **${label}** template a name`); const name = prompt(`Give **${label}** template a name`);
if (!name) { if (!name) {
@@ -58,7 +58,7 @@ export function ListAPIs({
Edit Edit
</button> </button>
<button <button
class="link" className="link"
onClick={() => { onClick={() => {
if ( if (
!confirm( !confirm(

4
src/listToolsTemplates.tsx
View File

@@ -44,7 +44,7 @@ export function ListToolsTempaltes({
<span className="w-full text-center">{t.name}</span> <span className="w-full text-center">{t.name}</span>
<span className="flex justify-between gap-x-2"> <span className="flex justify-between gap-x-2">
<button <button
class="link" className="link"
onClick={() => { onClick={() => {
const name = prompt(`Give **tools** template a name`); const name = prompt(`Give **tools** template a name`);
if (!name) { if (!name) {
@@ -57,7 +57,7 @@ export function ListToolsTempaltes({
Edit Edit
</button> </button>
<button <button
class="link" className="link"
onClick={() => { onClick={() => {
if ( if (
!confirm(`Are you sure to delete this **tools** template?`) !confirm(`Are you sure to delete this **tools** template?`)

8
src/message.tsx
View File

@@ -56,12 +56,12 @@ export default function Message(props: Props) {
</button> </button>
); );
const CopiedHint = () => ( const CopiedHint = () => (
<div role="alert" class="alert"> <div role="alert" className="alert">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="stroke-info h-6 w-6 shrink-0" className="stroke-info h-6 w-6 shrink-0"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@@ -169,7 +169,7 @@ export default function Message(props: Props) {
</div> </div>
)} )}
</div> </div>
<div class="chat-footer opacity-50 flex gap-x-2"> <div className="chat-footer opacity-50 flex gap-x-2">
<DeleteIcon /> <DeleteIcon />
<button onClick={() => setShowEdit(true)}>Edit</button> <button onClick={() => setShowEdit(true)}>Edit</button>
<CopyIcon textToCopy={getMessageText(chat)} /> <CopyIcon textToCopy={getMessageText(chat)} />
@@ -194,7 +194,7 @@ export default function Message(props: Props) {
{showCopiedHint && <CopiedHint />} {showCopiedHint && <CopiedHint />}
{chatStore.develop_mode && ( {chatStore.develop_mode && (
<div <div
class={`gap-1 chat-end flex ${ className={`gap-1 chat-end flex ${
chat.role === "assistant" ? "justify-start" : "justify-end" chat.role === "assistant" ? "justify-start" : "justify-end"
}`} }`}
> >

8
src/search.tsx
View File

@@ -141,9 +141,9 @@ export default function Search(props: {
</div> </div>
{searchResult.length > 0 && ( {searchResult.length > 0 && (
<div className="flex justify-center my-2"> <div className="flex justify-center my-2">
<div class="join"> <div className="join">
<button <button
class="join-item btn btn-sm" className="join-item btn btn-sm"
disabled={pageIndex === 0} disabled={pageIndex === 0}
onClick={() => { onClick={() => {
if (pageIndex === 0) { if (pageIndex === 0) {
@@ -154,12 +154,12 @@ export default function Search(props: {
> >
« «
</button> </button>
<button class="join-item btn btn-sm"> <button className="join-item btn btn-sm">
Page {pageIndex + 1} /{" "} Page {pageIndex + 1} /{" "}
{Math.floor(searchResult.length / 10) + 1} {Math.floor(searchResult.length / 10) + 1}
</button> </button>
<button <button
class="join-item btn btn-sm" className="join-item btn btn-sm"
disabled={pageIndex === Math.floor(searchResult.length / 10)} disabled={pageIndex === Math.floor(searchResult.length / 10)}
onClick={() => { onClick={() => {
if (pageIndex === Math.floor(searchResult.length / 10)) { if (pageIndex === Math.floor(searchResult.length / 10)) {

192
src/settings.tsx
View File

@@ -44,8 +44,8 @@ const TTS_FORMAT: string[] = ["mp3", "opus", "aac", "flac"];
const Help = (props: { children: any; help: string; field: string }) => { const Help = (props: { children: any; help: string; field: string }) => {
return ( return (
<div class="b-2"> <div className="b-2">
<label class="form-control w-full">{props.children}</label> <label className="form-control w-full">{props.children}</label>
</div> </div>
); );
}; };
@@ -64,32 +64,32 @@ const SelectModel = (props: {
const [useCustomModel, setUseCustomModel] = useState(shouldIUseCustomModel); const [useCustomModel, setUseCustomModel] = useState(shouldIUseCustomModel);
return ( return (
<Help help={props.help} field=""> <Help help={props.help} field="">
<div class="label"> <div className="label">
<span class="flex gap-2 items-center"> <span className="flex gap-2 items-center">
<ListBulletIcon class="w-4 h-4" /> <ListBulletIcon className="w-4 h-4" />
Model Model
</span>{" "} </span>{" "}
<div class="flex gap-3"> <div className="flex gap-3">
<span class="label-text"> <span className="label-text">
<span class="label-text flex gap-2 items-center"> <span className="label-text flex gap-2 items-center">
<Cog6ToothIcon class="w-4 h-4" /> <Cog6ToothIcon className="w-4 h-4" />
{Tr("Custom")} {Tr("Custom")}
</span> </span>
</span> </span>
<span class="label-text-alt"> <span className="label-text-alt">
<input <input
type="checkbox" type="checkbox"
checked={useCustomModel} checked={useCustomModel}
class="checkbox" className="checkbox"
onClick={() => { onClick={() => {
setUseCustomModel(!useCustomModel); setUseCustomModel(!useCustomModel);
}} }}
/> />
</span> </span>
</div> </div>
{/* <span class="label-text-alt">Top Right label</span> */} {/* <span className="label-text-alt">Top Right label</span> */}
</div> </div>
<label class="form-control w-full"> <label className="form-control w-full">
{useCustomModel ? ( {useCustomModel ? (
<input <input
className="input input-bordered" className="input input-bordered"
@@ -120,7 +120,7 @@ const SelectModel = (props: {
</select> </select>
)} )}
</label> </label>
<div class="pb-5"></div> <div className="pb-5"></div>
</Help> </Help>
); );
}; };
@@ -133,10 +133,10 @@ const LongInput = (props: {
help: string; help: string;
}) => { }) => {
return ( return (
<label class="form-control"> <label className="form-control">
<div class="label"> <div className="label">
<span class="label-text">{props.label}</span> <span className="label-text">{props.label}</span>
<span class="label-text-alt"> <span className="label-text-alt">
<button <button
onClick={() => { onClick={() => {
alert(props.help); alert(props.help);
@@ -179,9 +179,9 @@ const Input = (props: {
const [hideInput, setHideInput] = useState(true); const [hideInput, setHideInput] = useState(true);
return ( return (
<Help field={props.field} help={props.help}> <Help field={props.field} help={props.help}>
<div class="label"> <div className="label">
<span class="label-text">{props.field}</span> <span className="label-text">{props.field}</span>
<span class="label-text-alt"> <span className="label-text-alt">
<button <button
onClick={() => { onClick={() => {
alert(props.help); alert(props.help);
@@ -191,10 +191,10 @@ const Input = (props: {
</button> </button>
</span> </span>
</div> </div>
<label class="input input-bordered flex items-center gap-2 grow"> <label className="input input-bordered flex items-center gap-2 grow">
{hideInput ? ( {hideInput ? (
<EyeIcon <EyeIcon
class="w-4 h-4" className="w-4 h-4"
onClick={() => { onClick={() => {
setHideInput(!hideInput); setHideInput(!hideInput);
console.log("clicked", hideInput); console.log("clicked", hideInput);
@@ -202,7 +202,7 @@ const Input = (props: {
/> />
) : ( ) : (
<KeyIcon <KeyIcon
class="w-4 h-4" className="w-4 h-4"
onClick={() => { onClick={() => {
setHideInput(!hideInput); setHideInput(!hideInput);
console.log("clicked", hideInput); console.log("clicked", hideInput);
@@ -212,7 +212,7 @@ const Input = (props: {
<input <input
type={hideInput ? "password" : "text"} type={hideInput ? "password" : "text"}
class="grow" className="grow"
value={props.chatStore[props.field]} value={props.chatStore[props.field]}
onChange={(event: any) => { onChange={(event: any) => {
props.chatStore[props.field] = event.target.value; props.chatStore[props.field] = event.target.value;
@@ -252,10 +252,10 @@ const Slicer = (props: {
}; };
return ( return (
<Help help={props.help} field={props.field}> <Help help={props.help} field={props.field}>
<span class="py-3"> <span className="py-3">
<div class="form-control"> <div className="form-control">
<label class="flex gap-2"> <label className="flex gap-2">
<span class="label-text flex items-center gap-2"> <span className="label-text flex items-center gap-2">
<AdjustmentsHorizontalIcon className="w-4 h-4" /> <AdjustmentsHorizontalIcon className="w-4 h-4" />
{props.field}{" "} {props.field}{" "}
<button <button
@@ -269,7 +269,7 @@ const Slicer = (props: {
<input <input
type="checkbox" type="checkbox"
checked={props.chatStore[enable_filed_name]} checked={props.chatStore[enable_filed_name]}
class="checkbox" className="checkbox"
onClick={() => { onClick={() => {
setEnabled(!enabled); setEnabled(!enabled);
}} }}
@@ -278,7 +278,7 @@ const Slicer = (props: {
</div> </div>
</span> </span>
{enabled ? ( {enabled ? (
<div class="flex items-center"> <div className="flex items-center">
<input <input
disabled={!enabled} disabled={!enabled}
className="range" className="range"
@@ -330,7 +330,7 @@ const Number = (props: {
<Help help={props.help} field=""> <Help help={props.help} field="">
<span> <span>
<label className="py-2 flex items-center gap-1"> <label className="py-2 flex items-center gap-1">
<EllipsisHorizontalCircleIcon class="h-4 w-4" /> {props.field}{" "} <EllipsisHorizontalCircleIcon className="h-4 w-4" /> {props.field}{" "}
<button <button
onClick={() => { onClick={() => {
alert(props.help); alert(props.help);
@@ -339,8 +339,8 @@ const Number = (props: {
<InformationCircleIcon className="w-4 h-4" /> <InformationCircleIcon className="w-4 h-4" />
</button> </button>
{props.field === "maxGenTokens" && ( {props.field === "maxGenTokens" && (
<div class="form-control"> <div className="form-control">
<label class="label grow"> <label className="label grow">
<input <input
type="checkbox" type="checkbox"
checked={props.chatStore.maxGenTokens_enabled} checked={props.chatStore.maxGenTokens_enabled}
@@ -350,7 +350,7 @@ const Number = (props: {
!newChatStore.maxGenTokens_enabled; !newChatStore.maxGenTokens_enabled;
props.setChatStore({ ...newChatStore }); props.setChatStore({ ...newChatStore });
}} }}
class="checkbox" className="checkbox"
/> />
</label> </label>
</div> </div>
@@ -385,10 +385,10 @@ const Choice = (props: {
}) => { }) => {
return ( return (
<Help help={props.help} field={props.field}> <Help help={props.help} field={props.field}>
<div class="form-control"> <div className="form-control">
<label class="py-2 flex items-center gap-1"> <label className="py-2 flex items-center gap-1">
<CheckIcon class="h-4 w-4" /> <CheckIcon className="h-4 w-4" />
<span class="label-text">{props.field}</span> <span className="label-text">{props.field}</span>
<button <button
onClick={() => { onClick={() => {
alert(props.help); alert(props.help);
@@ -399,7 +399,7 @@ const Choice = (props: {
<input <input
type="checkbox" type="checkbox"
checked={props.chatStore[props.field]} checked={props.chatStore[props.field]}
class="checkbox" className="checkbox"
onChange={(event: any) => { onChange={(event: any) => {
props.chatStore[props.field] = event.target.checked; props.chatStore[props.field] = event.target.checked;
props.setChatStore({ ...props.chatStore }); props.setChatStore({ ...props.chatStore });
@@ -478,9 +478,9 @@ export default (props: {
className="modal-box" className="modal-box"
> >
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<h3 class="text-lg font-bold">{Tr("Settings")}</h3> <h3 className="text-lg font-bold">{Tr("Settings")}</h3>
<button <button
class="btn btn-secondary btn-sm" className="btn btn-secondary btn-sm"
onClick={() => { onClick={() => {
props.setShow(false); props.setShow(false);
}} }}
@@ -488,15 +488,15 @@ export default (props: {
{Tr("Close")} {Tr("Close")}
</button> </button>
</div> </div>
<div class="join join-vertical w-full"> <div className="join join-vertical w-full">
<div class="join-item collapse collapse-plus bg-base-200"> <div className="join-item collapse collapse-plus bg-base-200">
<input type="radio" name="setting-accordion" /> <input type="radio" name="setting-accordion" />
<div class="collapse-title text-xl font-medium">Session</div> <div className="collapse-title text-xl font-medium">Session</div>
<div class="collapse-content"> <div className="collapse-content">
<div class="stats shadow"> <div className="stats shadow">
<div class="stat"> <div className="stat">
<div class="stat-title">Session cost</div> <div className="stat-title">Session cost</div>
<div class="stat-value"> <div className="stat-value">
{props.chatStore.cost.toFixed(4)} $ {props.chatStore.cost.toFixed(4)} $
</div> </div>
</div> </div>
@@ -550,18 +550,18 @@ export default (props: {
</div> </div>
</div> </div>
</div> </div>
<div class="join-item collapse collapse-plus bg-base-200"> <div className="join-item collapse collapse-plus bg-base-200">
<input type="radio" name="setting-accordion" /> <input type="radio" name="setting-accordion" />
<div class="collapse-title text-xl font-medium">System</div> <div className="collapse-title text-xl font-medium">System</div>
<div class="collapse-content"> <div className="collapse-content">
<div class="stats shadow"> <div className="stats shadow">
<div class="stat"> <div className="stat">
<div class="stat-title">Accumulated cost</div> <div className="stat-title">Accumulated cost</div>
<div class="stat-value">{totalCost.toFixed(4)} $</div> <div className="stat-value">{totalCost.toFixed(4)} $</div>
<div class="stat-desc"> <div className="stat-desc">
in all sessions -{" "} in all sessions -{" "}
<a <a
class="btn btn-xs btn-primary" className="btn btn-xs btn-primary"
onClick={() => { onClick={() => {
clearTotalCost(); clearTotalCost();
setTotalCost(getTotalCost()); setTotalCost(getTotalCost());
@@ -577,11 +577,11 @@ export default (props: {
help="开发者模式，开启后会显示更多选项及功能" help="开发者模式，开启后会显示更多选项及功能"
{...props} {...props}
/> />
<label class="form-control w-full"> <label className="form-control w-full">
<div class="label"> <div className="label">
<span class="label-text">Theme Switch</span> <span className="label-text">Theme Switch</span>
</div> </div>
<select data-choose-theme class="select select-bordered"> <select data-choose-theme className="select select-bordered">
<option value="light">Light</option> <option value="light">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
<option value="cupcake">Cupcake</option> <option value="cupcake">Cupcake</option>
@@ -594,11 +594,11 @@ export default (props: {
<option value="black">Black</option> <option value="black">Black</option>
</select> </select>
</label> </label>
<label class="form-control w-full"> <label className="form-control w-full">
<div class="label"> <div className="label">
<span class="label-text">Language</span> <span className="label-text">Language</span>
</div> </div>
<select class="select select-bordered"> <select className="select select-bordered">
{Object.keys(LANG_OPTIONS).map((opt) => ( {Object.keys(LANG_OPTIONS).map((opt) => (
<option <option
value={opt} value={opt}
@@ -613,13 +613,13 @@ export default (props: {
))} ))}
</select> </select>
</label> </label>
<label class="form-control w-full"> <label className="form-control w-full">
<div class="label"> <div className="label">
<span class="label-text">Quick Actions</span> <span className="label-text">Quick Actions</span>
</div> </div>
<div class="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<button <button
class="btn btn-sm btn-outline btn-neural" className="btn btn-sm btn-outline btn-neural"
onClick={() => { onClick={() => {
navigator.clipboard.writeText(link); navigator.clipboard.writeText(link);
alert(tr(`Copied link:`, langCode) + `${link}`); alert(tr(`Copied link:`, langCode) + `${link}`);
@@ -628,7 +628,7 @@ export default (props: {
{Tr("Copy Setting Link")} {Tr("Copy Setting Link")}
</button> </button>
<button <button
class="btn btn-sm btn-outline btn-neural" className="btn btn-sm btn-outline btn-neural"
onClick={() => { onClick={() => {
if ( if (
!confirm( !confirm(
@@ -646,7 +646,7 @@ export default (props: {
{Tr("Clear History")} {Tr("Clear History")}
</button> </button>
<button <button
class="btn btn-sm btn-outline btn-neural" className="btn btn-sm btn-outline btn-neural"
onClick={() => { onClick={() => {
let dataStr = let dataStr =
"data:text/json;charset=utf-8," + "data:text/json;charset=utf-8," +
@@ -667,7 +667,7 @@ export default (props: {
{Tr("Export")} {Tr("Export")}
</button> </button>
<button <button
class="btn btn-sm btn-outline btn-neural" className="btn btn-sm btn-outline btn-neural"
onClick={() => { onClick={() => {
const name = prompt( const name = prompt(
tr("Give this template a name:", langCode) tr("Give this template a name:", langCode)
@@ -696,7 +696,7 @@ export default (props: {
{Tr("As template")} {Tr("As template")}
</button> </button>
<button <button
class="btn btn-sm btn-outline btn-neural" className="btn btn-sm btn-outline btn-neural"
onClick={() => { onClick={() => {
if ( if (
!confirm( !confirm(
@@ -755,12 +755,12 @@ export default (props: {
</label> </label>
</div> </div>
</div> </div>
<div class="join-item collapse collapse-plus bg-base-200"> <div className="join-item collapse collapse-plus bg-base-200">
<input type="radio" name="setting-accordion" /> <input type="radio" name="setting-accordion" />
<div class="collapse-title text-xl font-medium">Chat</div> <div className="collapse-title text-xl font-medium">Chat</div>
<div class="collapse-content"> <div className="collapse-content">
<div> <div>
<h2 class="card-title">Chat API</h2> <h2 className="card-title">Chat API</h2>
<p> <p>
<Input <Input
field="apiKey" field="apiKey"
@@ -780,7 +780,7 @@ export default (props: {
tmps={props.templateAPIs} tmps={props.templateAPIs}
setTmps={props.setTemplateAPIs} setTmps={props.setTemplateAPIs}
/> />
<div class="divider" /> <div className="divider" />
</div> </div>
<SelectModel <SelectModel
help="模型，默认 3.5。不同模型性能和定价也不同，请参考 API 文档。" help="模型，默认 3.5。不同模型性能和定价也不同，请参考 API 文档。"
@@ -851,14 +851,14 @@ export default (props: {
/> />
</div> </div>
</div> </div>
<div class="join-item collapse collapse-plus bg-base-200"> <div className="join-item collapse collapse-plus bg-base-200">
<input type="radio" name="setting-accordion" /> <input type="radio" name="setting-accordion" />
<div class="collapse-title text-xl font-medium"> <div className="collapse-title text-xl font-medium">
Speech Recognition Speech Recognition
</div> </div>
<div class="collapse-content"> <div className="collapse-content">
<div> <div>
<h2 class="card-title">Whisper API</h2> <h2 className="card-title">Whisper API</h2>
<p> <p>
<Input <Input
field="whisper_key" field="whisper_key"
@@ -878,16 +878,16 @@ export default (props: {
tmps={props.templateAPIsWhisper} tmps={props.templateAPIsWhisper}
setTmps={props.setTemplateAPIsWhisper} setTmps={props.setTemplateAPIsWhisper}
/> />
<div class="divider" /> <div className="divider" />
</div> </div>
</div> </div>
</div> </div>
<div class="join-item collapse collapse-plus bg-base-200"> <div className="join-item collapse collapse-plus bg-base-200">
<input type="radio" name="setting-accordion" /> <input type="radio" name="setting-accordion" />
<div class="collapse-title text-xl font-medium">TTS</div> <div className="collapse-title text-xl font-medium">TTS</div>
<div class="collapse-content"> <div className="collapse-content">
<div> <div>
<h2 class="card-title">TTS API</h2> <h2 className="card-title">TTS API</h2>
<p> <p>
<Input <Input
field="tts_key" field="tts_key"
@@ -907,7 +907,7 @@ export default (props: {
tmps={props.templateAPIsTTS} tmps={props.templateAPIsTTS}
setTmps={props.setTemplateAPIsTTS} setTmps={props.setTemplateAPIsTTS}
/> />
<div class="divider" /> <div className="divider" />
</div> </div>
<Help help="tts voice style" field="AAAAA"> <Help help="tts voice style" field="AAAAA">
<label className="">TTS Voice</label> <label className="">TTS Voice</label>
@@ -950,14 +950,14 @@ export default (props: {
</Help> </Help>
</div> </div>
</div> </div>
<div class="join-item collapse collapse-plus bg-base-200"> <div className="join-item collapse collapse-plus bg-base-200">
<input type="radio" name="setting-accordion" /> <input type="radio" name="setting-accordion" />
<div class="collapse-title text-xl font-medium"> <div className="collapse-title text-xl font-medium">
Image Generation Image Generation
</div> </div>
<div class="collapse-content"> <div className="collapse-content">
<div> <div>
<h2 class="card-title">Image Gen API</h2> <h2 className="card-title">Image Gen API</h2>
<p> <p>
<Input <Input
field="image_gen_key" field="image_gen_key"
@@ -977,7 +977,7 @@ export default (props: {
tmps={props.templateAPIsImageGen} tmps={props.templateAPIsImageGen}
setTmps={props.setTemplateAPIsImageGen} setTmps={props.setTemplateAPIsImageGen}
/> />
<div class="divider" /> <div className="divider" />
</div> </div>
</div> </div>
</div> </div>

4
src/tts.tsx
View File

@@ -80,9 +80,9 @@ export default function TTSButton(props: TTSProps) {
}} }}
> >
{generating ? ( {generating ? (
<span class="loading loading-dots loading-xs"></span> <span className="loading loading-dots loading-xs"></span>
) : ( ) : (
<SpeakerWaveIcon class="h-4 w-4" /> <SpeakerWaveIcon className="h-4 w-4" />
)} )}
</button> </button>
); );