rename class to className
This commit is contained in:
@@ -57,7 +57,7 @@ export function AddImage({
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
<span class="">
|
||||
<span className="">
|
||||
<button
|
||||
className="btn btn-secondary btn-sm disabled:btn-disabled"
|
||||
onClick={() => {
|
||||
@@ -121,7 +121,7 @@ export function AddImage({
|
||||
<input type="checkbox" checked={enableHighResolution} />
|
||||
</span>
|
||||
</span>
|
||||
<div class="divider"></div>
|
||||
<div className="divider"></div>
|
||||
{chatStore.image_gen_api && chatStore.image_gen_key && (
|
||||
<div className="flex flex-col">
|
||||
<h3>Generate Image</h3>
|
||||
@@ -138,7 +138,7 @@ export function AddImage({
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<label>Model: </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
className="select select-sm select-bordered"
|
||||
value={imageGenModel}
|
||||
onChange={(e: any) => {
|
||||
setImageGenModel(e.target.value);
|
||||
@@ -151,7 +151,7 @@ export function AddImage({
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<label>n: </label>
|
||||
<input
|
||||
class="input input-sm input-bordered"
|
||||
className="input input-sm input-bordered"
|
||||
value={imageGenN}
|
||||
type="number"
|
||||
min={1}
|
||||
@@ -162,7 +162,7 @@ export function AddImage({
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<label>Quality: </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
className="select select-sm select-bordered"
|
||||
value={imageGenQuality}
|
||||
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">
|
||||
<label>Response Format: </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
className="select select-sm select-bordered"
|
||||
value={imageGenResponseFormat}
|
||||
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">
|
||||
<label>Size: </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
className="select select-sm select-bordered"
|
||||
value={imageGenSize}
|
||||
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">
|
||||
<label>Style (only dall-e-3): </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
className="select select-sm select-bordered"
|
||||
value={imageGenStyle}
|
||||
onChange={(e: any) => setImageGenStyle(e.target.value)}
|
||||
>
|
||||
|
||||
@@ -412,7 +412,7 @@ export function App() {
|
||||
>
|
||||
{Tr("NEW")}
|
||||
</button>
|
||||
<ul class="pt-2">
|
||||
<ul className="pt-2">
|
||||
{(allChatStoreIndexes as number[])
|
||||
.slice()
|
||||
.reverse()
|
||||
|
||||
108
src/chatbox.tsx
108
src/chatbox.tsx
@@ -475,13 +475,13 @@ export default function ChatBOX(props: {
|
||||
/>
|
||||
)}
|
||||
|
||||
<div class="navbar bg-base-100 p-0">
|
||||
<div class="navbar-start">
|
||||
<div class="dropdown lg:hidden">
|
||||
<div tabindex={0} role="button" class="btn btn-ghost btn-circle">
|
||||
<div className="navbar bg-base-100 p-0">
|
||||
<div className="navbar-start">
|
||||
<div className="dropdown lg:hidden">
|
||||
<div tabindex={0} role="button" className="btn btn-ghost btn-circle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@@ -496,7 +496,7 @@ export default function ChatBOX(props: {
|
||||
</div>
|
||||
<ul
|
||||
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>
|
||||
<p>
|
||||
@@ -522,85 +522,85 @@ export default function ChatBOX(props: {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="navbar-center cursor-pointer py-1"
|
||||
className="navbar-center cursor-pointer py-1"
|
||||
onClick={() => {
|
||||
setShowSettings(true);
|
||||
}}
|
||||
>
|
||||
{/* the long staus bar */}
|
||||
<div class="stats shadow hidden lg:inline-grid">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<div className="stats shadow hidden lg:inline-grid">
|
||||
<div className="stat">
|
||||
<div className="stat-figure text-secondary">
|
||||
<CubeIcon className="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Model</div>
|
||||
<div class="stat-value text-base">{chatStore.model}</div>
|
||||
<div class="stat-desc">
|
||||
<div className="stat-title">Model</div>
|
||||
<div className="stat-value text-base">{chatStore.model}</div>
|
||||
<div className="stat-desc">
|
||||
{models[chatStore.model]?.price?.prompt * 1000 * 1000} $/M
|
||||
tokens
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<div className="stat">
|
||||
<div className="stat-figure text-secondary">
|
||||
<SwatchIcon className="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Mode</div>
|
||||
<div class="stat-value text-base">
|
||||
<div className="stat-title">Mode</div>
|
||||
<div className="stat-value text-base">
|
||||
{chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
|
||||
</div>
|
||||
<div class="stat-desc">STREAM/FETCH</div>
|
||||
<div className="stat-desc">STREAM/FETCH</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<div className="stat">
|
||||
<div className="stat-figure text-secondary">
|
||||
<ChatBubbleLeftEllipsisIcon className="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Tokens</div>
|
||||
<div class="stat-value text-base">{chatStore.totalTokens}</div>
|
||||
<div class="stat-desc">Max: {chatStore.maxTokens}</div>
|
||||
<div className="stat-title">Tokens</div>
|
||||
<div className="stat-value text-base">{chatStore.totalTokens}</div>
|
||||
<div className="stat-desc">Max: {chatStore.maxTokens}</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<div className="stat">
|
||||
<div className="stat-figure text-secondary">
|
||||
<ScissorsIcon className="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Cut</div>
|
||||
<div class="stat-value text-base">{chatStore.postBeginIndex}</div>
|
||||
<div class="stat-desc">
|
||||
<div className="stat-title">Cut</div>
|
||||
<div className="stat-value text-base">{chatStore.postBeginIndex}</div>
|
||||
<div className="stat-desc">
|
||||
Max: {chatStore.history.filter(({ hide }) => !hide).length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<div className="stat">
|
||||
<div className="stat-figure text-secondary">
|
||||
<BanknotesIcon className="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Cost</div>
|
||||
<div class="stat-value text-base">
|
||||
<div className="stat-title">Cost</div>
|
||||
<div className="stat-value text-base">
|
||||
${chatStore.cost.toFixed(4)}
|
||||
</div>
|
||||
<div class="stat-desc">
|
||||
<div className="stat-desc">
|
||||
Accumulated: ${getTotalCost().toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* the short status bar */}
|
||||
<div class="indicator lg:hidden">
|
||||
<div className="indicator lg:hidden">
|
||||
{chatStore.totalTokens !== 0 && (
|
||||
<span class="indicator-item badge badge-primary">
|
||||
<span className="indicator-item badge badge-primary">
|
||||
Tokens: {chatStore.totalTokens}
|
||||
</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" />
|
||||
{chatStore.model}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<div className="navbar-end">
|
||||
<button
|
||||
class="btn btn-ghost btn-circle"
|
||||
className="btn btn-ghost btn-circle"
|
||||
onClick={(event) => {
|
||||
// stop propagation to parent
|
||||
event.stopPropagation();
|
||||
@@ -610,7 +610,7 @@ export default function ChatBOX(props: {
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@@ -624,17 +624,17 @@ export default function ChatBOX(props: {
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-ghost btn-circle hidden sm:block"
|
||||
className="btn btn-ghost btn-circle hidden sm:block"
|
||||
onClick={() => setShowSettings(true)}
|
||||
>
|
||||
<div class="indicator">
|
||||
<div className="indicator">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="h-6 w-6"
|
||||
className="h-6 w-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
@@ -648,7 +648,7 @@ export default function ChatBOX(props: {
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span class="badge badge-xs badge-primary indicator-item"></span>
|
||||
<span className="badge badge-xs badge-primary indicator-item"></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
@@ -666,10 +666,10 @@ export default function ChatBOX(props: {
|
||||
setShowSearch(true);
|
||||
}}
|
||||
>
|
||||
<MagnifyingGlassIcon class="w-5 h-5" />
|
||||
<MagnifyingGlassIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<div class="hidden lg:inline-grid"></div>
|
||||
<div class="lg:hidden">
|
||||
<div className="hidden lg:inline-grid"></div>
|
||||
<div className="lg:hidden">
|
||||
<div>
|
||||
<button className="underline">
|
||||
{chatStore.systemMessageContent.length > 16
|
||||
@@ -684,16 +684,16 @@ export default function ChatBOX(props: {
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs">
|
||||
<span class="underline">{chatStore.model}</span>{" "}
|
||||
<span className="underline">{chatStore.model}</span>{" "}
|
||||
<span>
|
||||
Tokens:{" "}
|
||||
<span class="underline">
|
||||
<span className="underline">
|
||||
{chatStore.totalTokens}/{chatStore.maxTokens}
|
||||
</span>
|
||||
</span>{" "}
|
||||
<span>
|
||||
{Tr("Cut")}:{" "}
|
||||
<span class="underline">
|
||||
<span className="underline">
|
||||
{chatStore.postBeginIndex}/
|
||||
{chatStore.history.filter(({ hide }) => !hide).length}
|
||||
</span>{" "}
|
||||
@@ -789,7 +789,7 @@ export default function ChatBOX(props: {
|
||||
{Tr("Reset Current")}
|
||||
</button>
|
||||
</h2>
|
||||
<div class="divider"></div>
|
||||
<div className="divider"></div>
|
||||
<div className="flex flex-wrap">
|
||||
{templates.map((t, index) => (
|
||||
<div
|
||||
@@ -906,10 +906,10 @@ export default function ChatBOX(props: {
|
||||
</p>
|
||||
)}
|
||||
{chatStore.systemMessageContent.trim() && (
|
||||
<div class="chat chat-start">
|
||||
<div class="chat-header">Prompt</div>
|
||||
<div className="chat chat-start">
|
||||
<div className="chat-header">Prompt</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)}
|
||||
>
|
||||
{chatStore.systemMessageContent}
|
||||
@@ -1047,7 +1047,7 @@ export default function ChatBOX(props: {
|
||||
|
||||
{generatingMessage && (
|
||||
<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" }}
|
||||
onClick={() => {
|
||||
setFollow(!follow);
|
||||
|
||||
@@ -45,7 +45,7 @@ export function ListAPIs({
|
||||
<span className="w-full text-center">{t.name}</span>
|
||||
<span className="flex justify-between gap-x-2">
|
||||
<button
|
||||
class="link"
|
||||
className="link"
|
||||
onClick={() => {
|
||||
const name = prompt(`Give **${label}** template a name`);
|
||||
if (!name) {
|
||||
@@ -58,7 +58,7 @@ export function ListAPIs({
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
class="link"
|
||||
className="link"
|
||||
onClick={() => {
|
||||
if (
|
||||
!confirm(
|
||||
|
||||
@@ -44,7 +44,7 @@ export function ListToolsTempaltes({
|
||||
<span className="w-full text-center">{t.name}</span>
|
||||
<span className="flex justify-between gap-x-2">
|
||||
<button
|
||||
class="link"
|
||||
className="link"
|
||||
onClick={() => {
|
||||
const name = prompt(`Give **tools** template a name`);
|
||||
if (!name) {
|
||||
@@ -57,7 +57,7 @@ export function ListToolsTempaltes({
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
class="link"
|
||||
className="link"
|
||||
onClick={() => {
|
||||
if (
|
||||
!confirm(`Are you sure to delete this **tools** template?`)
|
||||
|
||||
@@ -56,12 +56,12 @@ export default function Message(props: Props) {
|
||||
</button>
|
||||
);
|
||||
const CopiedHint = () => (
|
||||
<div role="alert" class="alert">
|
||||
<div role="alert" className="alert">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="stroke-info h-6 w-6 shrink-0"
|
||||
className="stroke-info h-6 w-6 shrink-0"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
@@ -169,7 +169,7 @@ export default function Message(props: Props) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="chat-footer opacity-50 flex gap-x-2">
|
||||
<div className="chat-footer opacity-50 flex gap-x-2">
|
||||
<DeleteIcon />
|
||||
<button onClick={() => setShowEdit(true)}>Edit</button>
|
||||
<CopyIcon textToCopy={getMessageText(chat)} />
|
||||
@@ -194,7 +194,7 @@ export default function Message(props: Props) {
|
||||
{showCopiedHint && <CopiedHint />}
|
||||
{chatStore.develop_mode && (
|
||||
<div
|
||||
class={`gap-1 chat-end flex ${
|
||||
className={`gap-1 chat-end flex ${
|
||||
chat.role === "assistant" ? "justify-start" : "justify-end"
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -141,9 +141,9 @@ export default function Search(props: {
|
||||
</div>
|
||||
{searchResult.length > 0 && (
|
||||
<div className="flex justify-center my-2">
|
||||
<div class="join">
|
||||
<div className="join">
|
||||
<button
|
||||
class="join-item btn btn-sm"
|
||||
className="join-item btn btn-sm"
|
||||
disabled={pageIndex === 0}
|
||||
onClick={() => {
|
||||
if (pageIndex === 0) {
|
||||
@@ -154,12 +154,12 @@ export default function Search(props: {
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<button class="join-item btn btn-sm">
|
||||
<button className="join-item btn btn-sm">
|
||||
Page {pageIndex + 1} /{" "}
|
||||
{Math.floor(searchResult.length / 10) + 1}
|
||||
</button>
|
||||
<button
|
||||
class="join-item btn btn-sm"
|
||||
className="join-item btn btn-sm"
|
||||
disabled={pageIndex === Math.floor(searchResult.length / 10)}
|
||||
onClick={() => {
|
||||
if (pageIndex === Math.floor(searchResult.length / 10)) {
|
||||
|
||||
192
src/settings.tsx
192
src/settings.tsx
@@ -44,8 +44,8 @@ const TTS_FORMAT: string[] = ["mp3", "opus", "aac", "flac"];
|
||||
|
||||
const Help = (props: { children: any; help: string; field: string }) => {
|
||||
return (
|
||||
<div class="b-2">
|
||||
<label class="form-control w-full">{props.children}</label>
|
||||
<div className="b-2">
|
||||
<label className="form-control w-full">{props.children}</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -64,32 +64,32 @@ const SelectModel = (props: {
|
||||
const [useCustomModel, setUseCustomModel] = useState(shouldIUseCustomModel);
|
||||
return (
|
||||
<Help help={props.help} field="">
|
||||
<div class="label">
|
||||
<span class="flex gap-2 items-center">
|
||||
<ListBulletIcon class="w-4 h-4" />
|
||||
<div className="label">
|
||||
<span className="flex gap-2 items-center">
|
||||
<ListBulletIcon className="w-4 h-4" />
|
||||
Model
|
||||
</span>{" "}
|
||||
<div class="flex gap-3">
|
||||
<span class="label-text">
|
||||
<span class="label-text flex gap-2 items-center">
|
||||
<Cog6ToothIcon class="w-4 h-4" />
|
||||
<div className="flex gap-3">
|
||||
<span className="label-text">
|
||||
<span className="label-text flex gap-2 items-center">
|
||||
<Cog6ToothIcon className="w-4 h-4" />
|
||||
{Tr("Custom")}
|
||||
</span>
|
||||
</span>
|
||||
<span class="label-text-alt">
|
||||
<span className="label-text-alt">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useCustomModel}
|
||||
class="checkbox"
|
||||
className="checkbox"
|
||||
onClick={() => {
|
||||
setUseCustomModel(!useCustomModel);
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{/* <span class="label-text-alt">Top Right label</span> */}
|
||||
{/* <span className="label-text-alt">Top Right label</span> */}
|
||||
</div>
|
||||
<label class="form-control w-full">
|
||||
<label className="form-control w-full">
|
||||
{useCustomModel ? (
|
||||
<input
|
||||
className="input input-bordered"
|
||||
@@ -120,7 +120,7 @@ const SelectModel = (props: {
|
||||
</select>
|
||||
)}
|
||||
</label>
|
||||
<div class="pb-5"></div>
|
||||
<div className="pb-5"></div>
|
||||
</Help>
|
||||
);
|
||||
};
|
||||
@@ -133,10 +133,10 @@ const LongInput = (props: {
|
||||
help: string;
|
||||
}) => {
|
||||
return (
|
||||
<label class="form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{props.label}</span>
|
||||
<span class="label-text-alt">
|
||||
<label className="form-control">
|
||||
<div className="label">
|
||||
<span className="label-text">{props.label}</span>
|
||||
<span className="label-text-alt">
|
||||
<button
|
||||
onClick={() => {
|
||||
alert(props.help);
|
||||
@@ -179,9 +179,9 @@ const Input = (props: {
|
||||
const [hideInput, setHideInput] = useState(true);
|
||||
return (
|
||||
<Help field={props.field} help={props.help}>
|
||||
<div class="label">
|
||||
<span class="label-text">{props.field}</span>
|
||||
<span class="label-text-alt">
|
||||
<div className="label">
|
||||
<span className="label-text">{props.field}</span>
|
||||
<span className="label-text-alt">
|
||||
<button
|
||||
onClick={() => {
|
||||
alert(props.help);
|
||||
@@ -191,10 +191,10 @@ const Input = (props: {
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<label class="input input-bordered flex items-center gap-2 grow">
|
||||
<label className="input input-bordered flex items-center gap-2 grow">
|
||||
{hideInput ? (
|
||||
<EyeIcon
|
||||
class="w-4 h-4"
|
||||
className="w-4 h-4"
|
||||
onClick={() => {
|
||||
setHideInput(!hideInput);
|
||||
console.log("clicked", hideInput);
|
||||
@@ -202,7 +202,7 @@ const Input = (props: {
|
||||
/>
|
||||
) : (
|
||||
<KeyIcon
|
||||
class="w-4 h-4"
|
||||
className="w-4 h-4"
|
||||
onClick={() => {
|
||||
setHideInput(!hideInput);
|
||||
console.log("clicked", hideInput);
|
||||
@@ -212,7 +212,7 @@ const Input = (props: {
|
||||
|
||||
<input
|
||||
type={hideInput ? "password" : "text"}
|
||||
class="grow"
|
||||
className="grow"
|
||||
value={props.chatStore[props.field]}
|
||||
onChange={(event: any) => {
|
||||
props.chatStore[props.field] = event.target.value;
|
||||
@@ -252,10 +252,10 @@ const Slicer = (props: {
|
||||
};
|
||||
return (
|
||||
<Help help={props.help} field={props.field}>
|
||||
<span class="py-3">
|
||||
<div class="form-control">
|
||||
<label class="flex gap-2">
|
||||
<span class="label-text flex items-center gap-2">
|
||||
<span className="py-3">
|
||||
<div className="form-control">
|
||||
<label className="flex gap-2">
|
||||
<span className="label-text flex items-center gap-2">
|
||||
<AdjustmentsHorizontalIcon className="w-4 h-4" />
|
||||
{props.field}{" "}
|
||||
<button
|
||||
@@ -269,7 +269,7 @@ const Slicer = (props: {
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={props.chatStore[enable_filed_name]}
|
||||
class="checkbox"
|
||||
className="checkbox"
|
||||
onClick={() => {
|
||||
setEnabled(!enabled);
|
||||
}}
|
||||
@@ -278,7 +278,7 @@ const Slicer = (props: {
|
||||
</div>
|
||||
</span>
|
||||
{enabled ? (
|
||||
<div class="flex items-center">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
disabled={!enabled}
|
||||
className="range"
|
||||
@@ -330,7 +330,7 @@ const Number = (props: {
|
||||
<Help help={props.help} field="">
|
||||
<span>
|
||||
<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
|
||||
onClick={() => {
|
||||
alert(props.help);
|
||||
@@ -339,8 +339,8 @@ const Number = (props: {
|
||||
<InformationCircleIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{props.field === "maxGenTokens" && (
|
||||
<div class="form-control">
|
||||
<label class="label grow">
|
||||
<div className="form-control">
|
||||
<label className="label grow">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={props.chatStore.maxGenTokens_enabled}
|
||||
@@ -350,7 +350,7 @@ const Number = (props: {
|
||||
!newChatStore.maxGenTokens_enabled;
|
||||
props.setChatStore({ ...newChatStore });
|
||||
}}
|
||||
class="checkbox"
|
||||
className="checkbox"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@@ -385,10 +385,10 @@ const Choice = (props: {
|
||||
}) => {
|
||||
return (
|
||||
<Help help={props.help} field={props.field}>
|
||||
<div class="form-control">
|
||||
<label class="py-2 flex items-center gap-1">
|
||||
<CheckIcon class="h-4 w-4" />
|
||||
<span class="label-text">{props.field}</span>
|
||||
<div className="form-control">
|
||||
<label className="py-2 flex items-center gap-1">
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
<span className="label-text">{props.field}</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
alert(props.help);
|
||||
@@ -399,7 +399,7 @@ const Choice = (props: {
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={props.chatStore[props.field]}
|
||||
class="checkbox"
|
||||
className="checkbox"
|
||||
onChange={(event: any) => {
|
||||
props.chatStore[props.field] = event.target.checked;
|
||||
props.setChatStore({ ...props.chatStore });
|
||||
@@ -478,9 +478,9 @@ export default (props: {
|
||||
className="modal-box"
|
||||
>
|
||||
<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
|
||||
class="btn btn-secondary btn-sm"
|
||||
className="btn btn-secondary btn-sm"
|
||||
onClick={() => {
|
||||
props.setShow(false);
|
||||
}}
|
||||
@@ -488,15 +488,15 @@ export default (props: {
|
||||
{Tr("Close")}
|
||||
</button>
|
||||
</div>
|
||||
<div class="join join-vertical w-full">
|
||||
<div class="join-item collapse collapse-plus bg-base-200">
|
||||
<div className="join join-vertical w-full">
|
||||
<div className="join-item collapse collapse-plus bg-base-200">
|
||||
<input type="radio" name="setting-accordion" />
|
||||
<div class="collapse-title text-xl font-medium">Session</div>
|
||||
<div class="collapse-content">
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Session cost</div>
|
||||
<div class="stat-value">
|
||||
<div className="collapse-title text-xl font-medium">Session</div>
|
||||
<div className="collapse-content">
|
||||
<div className="stats shadow">
|
||||
<div className="stat">
|
||||
<div className="stat-title">Session cost</div>
|
||||
<div className="stat-value">
|
||||
{props.chatStore.cost.toFixed(4)} $
|
||||
</div>
|
||||
</div>
|
||||
@@ -550,18 +550,18 @@ export default (props: {
|
||||
</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" />
|
||||
<div class="collapse-title text-xl font-medium">System</div>
|
||||
<div class="collapse-content">
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Accumulated cost</div>
|
||||
<div class="stat-value">{totalCost.toFixed(4)} $</div>
|
||||
<div class="stat-desc">
|
||||
<div className="collapse-title text-xl font-medium">System</div>
|
||||
<div className="collapse-content">
|
||||
<div className="stats shadow">
|
||||
<div className="stat">
|
||||
<div className="stat-title">Accumulated cost</div>
|
||||
<div className="stat-value">{totalCost.toFixed(4)} $</div>
|
||||
<div className="stat-desc">
|
||||
in all sessions -{" "}
|
||||
<a
|
||||
class="btn btn-xs btn-primary"
|
||||
className="btn btn-xs btn-primary"
|
||||
onClick={() => {
|
||||
clearTotalCost();
|
||||
setTotalCost(getTotalCost());
|
||||
@@ -577,11 +577,11 @@ export default (props: {
|
||||
help="开发者模式，开启后会显示更多选项及功能"
|
||||
{...props}
|
||||
/>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">Theme Switch</span>
|
||||
<label className="form-control w-full">
|
||||
<div className="label">
|
||||
<span className="label-text">Theme Switch</span>
|
||||
</div>
|
||||
<select data-choose-theme class="select select-bordered">
|
||||
<select data-choose-theme className="select select-bordered">
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="cupcake">Cupcake</option>
|
||||
@@ -594,11 +594,11 @@ export default (props: {
|
||||
<option value="black">Black</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">Language</span>
|
||||
<label className="form-control w-full">
|
||||
<div className="label">
|
||||
<span className="label-text">Language</span>
|
||||
</div>
|
||||
<select class="select select-bordered">
|
||||
<select className="select select-bordered">
|
||||
{Object.keys(LANG_OPTIONS).map((opt) => (
|
||||
<option
|
||||
value={opt}
|
||||
@@ -613,13 +613,13 @@ export default (props: {
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">Quick Actions</span>
|
||||
<label className="form-control w-full">
|
||||
<div className="label">
|
||||
<span className="label-text">Quick Actions</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
className="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(link);
|
||||
alert(tr(`Copied link:`, langCode) + `${link}`);
|
||||
@@ -628,7 +628,7 @@ export default (props: {
|
||||
{Tr("Copy Setting Link")}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
className="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
if (
|
||||
!confirm(
|
||||
@@ -646,7 +646,7 @@ export default (props: {
|
||||
{Tr("Clear History")}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
className="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
let dataStr =
|
||||
"data:text/json;charset=utf-8," +
|
||||
@@ -667,7 +667,7 @@ export default (props: {
|
||||
{Tr("Export")}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
className="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
const name = prompt(
|
||||
tr("Give this template a name:", langCode)
|
||||
@@ -696,7 +696,7 @@ export default (props: {
|
||||
{Tr("As template")}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
className="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
if (
|
||||
!confirm(
|
||||
@@ -755,12 +755,12 @@ export default (props: {
|
||||
</label>
|
||||
</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" />
|
||||
<div class="collapse-title text-xl font-medium">Chat</div>
|
||||
<div class="collapse-content">
|
||||
<div className="collapse-title text-xl font-medium">Chat</div>
|
||||
<div className="collapse-content">
|
||||
<div>
|
||||
<h2 class="card-title">Chat API</h2>
|
||||
<h2 className="card-title">Chat API</h2>
|
||||
<p>
|
||||
<Input
|
||||
field="apiKey"
|
||||
@@ -780,7 +780,7 @@ export default (props: {
|
||||
tmps={props.templateAPIs}
|
||||
setTmps={props.setTemplateAPIs}
|
||||
/>
|
||||
<div class="divider" />
|
||||
<div className="divider" />
|
||||
</div>
|
||||
<SelectModel
|
||||
help="模型，默认 3.5。不同模型性能和定价也不同，请参考 API 文档。"
|
||||
@@ -851,14 +851,14 @@ export default (props: {
|
||||
/>
|
||||
</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" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
<div className="collapse-title text-xl font-medium">
|
||||
Speech Recognition
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div className="collapse-content">
|
||||
<div>
|
||||
<h2 class="card-title">Whisper API</h2>
|
||||
<h2 className="card-title">Whisper API</h2>
|
||||
<p>
|
||||
<Input
|
||||
field="whisper_key"
|
||||
@@ -878,16 +878,16 @@ export default (props: {
|
||||
tmps={props.templateAPIsWhisper}
|
||||
setTmps={props.setTemplateAPIsWhisper}
|
||||
/>
|
||||
<div class="divider" />
|
||||
<div className="divider" />
|
||||
</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" />
|
||||
<div class="collapse-title text-xl font-medium">TTS</div>
|
||||
<div class="collapse-content">
|
||||
<div className="collapse-title text-xl font-medium">TTS</div>
|
||||
<div className="collapse-content">
|
||||
<div>
|
||||
<h2 class="card-title">TTS API</h2>
|
||||
<h2 className="card-title">TTS API</h2>
|
||||
<p>
|
||||
<Input
|
||||
field="tts_key"
|
||||
@@ -907,7 +907,7 @@ export default (props: {
|
||||
tmps={props.templateAPIsTTS}
|
||||
setTmps={props.setTemplateAPIsTTS}
|
||||
/>
|
||||
<div class="divider" />
|
||||
<div className="divider" />
|
||||
</div>
|
||||
<Help help="tts voice style" field="AAAAA">
|
||||
<label className="">TTS Voice</label>
|
||||
@@ -950,14 +950,14 @@ export default (props: {
|
||||
</Help>
|
||||
</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" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
<div className="collapse-title text-xl font-medium">
|
||||
Image Generation
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div className="collapse-content">
|
||||
<div>
|
||||
<h2 class="card-title">Image Gen API</h2>
|
||||
<h2 className="card-title">Image Gen API</h2>
|
||||
<p>
|
||||
<Input
|
||||
field="image_gen_key"
|
||||
@@ -977,7 +977,7 @@ export default (props: {
|
||||
tmps={props.templateAPIsImageGen}
|
||||
setTmps={props.setTemplateAPIsImageGen}
|
||||
/>
|
||||
<div class="divider" />
|
||||
<div className="divider" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -80,9 +80,9 @@ export default function TTSButton(props: TTSProps) {
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user