redesign top stats with a navbar
This commit is contained in:
ecwu
182
src/chatbox.tsx
182
src/chatbox.tsx
@@ -43,6 +43,7 @@ import {
|
||||
ChatBubbleLeftEllipsisIcon,
|
||||
ScissorsIcon,
|
||||
SwatchIcon,
|
||||
SparklesIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
export interface TemplateChatStore extends ChatStore {
|
||||
@@ -473,7 +474,119 @@ export default function ChatBOX(props: {
|
||||
setShow={setShowSearch}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
<div class="navbar bg-base-100">
|
||||
<div class="navbar-start">
|
||||
<div class="dropdown">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
|
||||
>
|
||||
<li>
|
||||
<p>
|
||||
<ChatBubbleLeftEllipsisIcon class="h-4 w-4" />
|
||||
Tokens: {chatStore.totalTokens}/{chatStore.maxTokens}
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<ScissorsIcon class="h-4 w-4" />
|
||||
Cut:
|
||||
{chatStore.postBeginIndex}/
|
||||
{chatStore.history.filter(({ hide }) => !hide).length}
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<BanknotesIcon class="h-4 w-4" />
|
||||
Cost: ${chatStore.cost.toFixed(4)}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-center">
|
||||
<div class="indicator">
|
||||
<span class="indicator-item badge badge-primary">
|
||||
{chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
|
||||
</span>
|
||||
<a class="btn btn-ghost text-xl">
|
||||
<SparklesIcon class="h-4 w-4" />
|
||||
{chatStore.model}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<button
|
||||
class="btn btn-ghost btn-circle"
|
||||
onClick={(event) => {
|
||||
// stop propagation to parent
|
||||
event.stopPropagation();
|
||||
|
||||
setShowSearch(true);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-ghost btn-circle"
|
||||
onClick={() => setShowSettings(true)}
|
||||
>
|
||||
<div class="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"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span class="badge badge-xs badge-primary indicator-item"></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div
|
||||
className="relative cursor-pointer rounded p-2"
|
||||
onClick={() => setShowSettings(true)}
|
||||
>
|
||||
@@ -488,63 +601,7 @@ export default function ChatBOX(props: {
|
||||
>
|
||||
<MagnifyingGlassIcon class="w-5 h-5" />
|
||||
</button>
|
||||
<div class="stats shadow hidden lg:inline-grid">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<CubeIcon class="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Model</div>
|
||||
<div class="stat-value">{chatStore.model}</div>
|
||||
<div class="stat-desc">
|
||||
Prompt:{" "}
|
||||
{chatStore.systemMessageContent.length > 30
|
||||
? chatStore.systemMessageContent.slice(0, 30) + ".."
|
||||
: chatStore.systemMessageContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<SwatchIcon class="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Mode</div>
|
||||
<div class="stat-value">
|
||||
{chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
|
||||
</div>
|
||||
<div class="stat-desc">STREAM/FETCH</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<ChatBubbleLeftEllipsisIcon class="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Tokens</div>
|
||||
<div class="stat-value">{chatStore.totalTokens}</div>
|
||||
<div class="stat-desc">Max: {chatStore.maxTokens}</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<ScissorsIcon class="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Cut</div>
|
||||
<div class="stat-value">{chatStore.postBeginIndex}</div>
|
||||
<div class="stat-desc">
|
||||
Max: {chatStore.history.filter(({ hide }) => !hide).length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<BanknotesIcon class="h-10 w-10" />
|
||||
</div>
|
||||
<div class="stat-title">Cost</div>
|
||||
<div class="stat-value">${chatStore.cost.toFixed(4)}</div>
|
||||
<div class="stat-desc">
|
||||
Accumulated: ${getTotalCost().toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:inline-grid"></div>
|
||||
<div class="lg:hidden">
|
||||
<div>
|
||||
<button className="underline">
|
||||
@@ -580,7 +637,7 @@ export default function ChatBOX(props: {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="grow overflow-scroll">
|
||||
{!chatStore.apiKey && (
|
||||
<p className="bg-base-200 p-6 rounded my-3 text-left">
|
||||
@@ -781,6 +838,13 @@ export default function ChatBOX(props: {
|
||||
<br />
|
||||
</p>
|
||||
)}
|
||||
<div class="chat chat-start">
|
||||
<div class="chat-header">Prompt</div>
|
||||
<div class="chat-bubble chat-bubble-accent">
|
||||
{chatStore.systemMessageContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{chatStore.history.map((_, messageIndex) => (
|
||||
<Message
|
||||
chatStore={chatStore}
|
||||
|
||||
Reference in New Issue
Block a user