adding new stat panel

src/chatbox.tsx

@@ -14,6 +14,7 @@ import {
   TemplateAPI,
   TemplateTools,
   addTotalCost,
+  getTotalCost,
 } from "./app";
 import ChatGPT, {
   calculate_token_length,
@@ -34,7 +35,15 @@ import { ListToolsTempaltes } from "./listToolsTemplates";
 import { autoHeight } from "./textarea";
 import Search from "./search";
 import { IDBPDatabase } from "idb";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import {
+  MagnifyingGlassIcon,
+  CubeIcon,
+  BanknotesIcon,
+  DocumentTextIcon,
+  ChatBubbleLeftEllipsisIcon,
+  ScissorsIcon,
+  SwatchIcon,
+} from "@heroicons/react/24/outline";
 
 export interface TemplateChatStore extends ChatStore {
   name: string;
@@ -465,7 +474,7 @@ export default function ChatBOX(props: {
         />
       )}
       <div
-        className="relative cursor-pointer rounded p-2 bg-base-200"
+        className="relative cursor-pointer rounded p-2"
         onClick={() => setShowSettings(true)}
       >
         <button
@@ -479,38 +488,97 @@ export default function ChatBOX(props: {
         >
           <MagnifyingGlassIcon class="w-5 h-5" />
         </button>
-        <div>
-          <button className="underline">
-            {chatStore.systemMessageContent.length > 16
-              ? chatStore.systemMessageContent.slice(0, 16) + ".."
-              : chatStore.systemMessageContent}
-          </button>{" "}
-          <button className="underline">
-            {chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
-          </button>{" "}
-          {chatStore.toolsString.trim() && (
-            <button className="underline">TOOL</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 className="text-xs">
-          <span className="underline">{chatStore.model}</span>{" "}
-          <span>
-            Tokens:{" "}
-            <span className="underline">
-              {chatStore.totalTokens}/{chatStore.maxTokens}
-            </span>
-          </span>{" "}
-          <span>
-            {Tr("Cut")}:{" "}
-            <span className="underline">
-              {chatStore.postBeginIndex}/
-              {chatStore.history.filter(({ hide }) => !hide).length}
+        <div class="lg:hidden">
+          <div>
+            <button className="underline">
+              {chatStore.systemMessageContent.length > 16
+                ? chatStore.systemMessageContent.slice(0, 16) + ".."
+                : chatStore.systemMessageContent}
+            </button>{" "}
+            <button className="underline">
+              {chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
+            </button>{" "}
+            {chatStore.toolsString.trim() && (
+              <button className="underline">TOOL</button>
+            )}
+          </div>
+          <div className="text-xs">
+            <span class="underline">{chatStore.model}</span>{" "}
+            <span>
+              Tokens:{" "}
+              <span class="underline">
+                {chatStore.totalTokens}/{chatStore.maxTokens}
+              </span>
             </span>{" "}
-          </span>{" "}
-          <span>
-            {Tr("Cost")}:{" "}
-            <span className="underline">${chatStore.cost.toFixed(4)}</span>
-          </span>
+            <span>
+              {Tr("Cut")}:{" "}
+              <span class="underline">
+                {chatStore.postBeginIndex}/
+                {chatStore.history.filter(({ hide }) => !hide).length}
+              </span>{" "}
+            </span>{" "}
+            <span>
+              {Tr("Cost")}:{" "}
+              <span className="underline">${chatStore.cost.toFixed(4)}</span>
+            </span>
+          </div>
         </div>
       </div>
       <div className="grow overflow-scroll">
@@ -730,7 +798,7 @@ export default function ChatBOX(props: {
         <p className="text-center">
           {chatStore.history.length > 0 && (
             <button
-              className="btn btn-warning disabled:line-through disabled:btn-neutral disabled:text-white m-2 p-2"
+              className="btn btn-outline btn-sm btn-warning disabled:line-through disabled:btn-neutral disabled:text-white m-2 p-2"
               disabled={showGenerating}
               onClick={async () => {
                 const messageIndex = chatStore.history.length - 1;
@@ -1110,7 +1178,7 @@ export default function ChatBOX(props: {
               </span>
               <span className={`flex justify-between p-2`}>
                 <button
-                  className="rounded m-1 p-1 border-2 bg-red-400 hover:bg-red-600"
+                  className="btn btn-info m-1 p-1"
                   onClick={() => setShowAddToolMsg(false)}
                 >
                   {Tr("Cancle")}

src/listAPIs.tsx

@@ -20,7 +20,7 @@ export function ListAPIs({
   keyField,
 }: Props) {
   return (
-    <div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
+    <div className="break-all opacity-80 p-3 rounded base-200 my-3 text-left">
       <h2>{Tr(`Saved ${label} templates`)}</h2>
       <hr className="my-2" />
       <div className="flex flex-wrap">
@@ -31,8 +31,8 @@ export function ListAPIs({
               chatStore[apiField] === t.endpoint &&
               // @ts-ignore
               chatStore[keyField] === t.key
-                ? "bg-red-600"
-                : "bg-red-400"
+                ? "bg-info"
+                : "bg-base-300"
             } w-fit p-2 m-1 flex flex-col`}
             onClick={() => {
               // @ts-ignore
@@ -43,9 +43,9 @@ export function ListAPIs({
             }}
           >
             <span className="w-full text-center">{t.name}</span>
-            <hr className="mt-2" />
-            <span className="flex justify-between">
+            <span className="flex justify-between gap-x-2">
               <button
+                class="link"
                 onClick={() => {
                   const name = prompt(`Give **${label}** template a name`);
                   if (!name) {
@@ -55,9 +55,10 @@ export function ListAPIs({
                   setTmps(structuredClone(tmps));
                 }}
               >
-                🖋
+                Edit
               </button>
               <button
+                class="link"
                 onClick={() => {
                   if (
                     !confirm(
@@ -70,7 +71,7 @@ export function ListAPIs({
                   setTmps(structuredClone(tmps));
                 }}
               >
-                ❌
+                Delete
               </button>
             </span>
           </div>

src/listToolsTemplates.tsx

@@ -33,8 +33,8 @@ export function ListToolsTempaltes({
           <div
             className={`cursor-pointer rounded ${
               chatStore.toolsString === t.toolsString
-                ? "bg-red-600"
-                : "bg-red-400"
+                ? "bg-info"
+                : "bg-base-300"
             } w-fit p-2 m-1 flex flex-col`}
             onClick={() => {
               chatStore.toolsString = t.toolsString;
@@ -42,9 +42,9 @@ export function ListToolsTempaltes({
             }}
           >
             <span className="w-full text-center">{t.name}</span>
-            <hr className="mt-2" />
-            <span className="flex justify-between">
+            <span className="flex justify-between gap-x-2">
               <button
+                class="link"
                 onClick={() => {
                   const name = prompt(`Give **tools** template a name`);
                   if (!name) {
@@ -54,9 +54,10 @@ export function ListToolsTempaltes({
                   setTemplateTools(structuredClone(templateTools));
                 }}
               >
-                🖋
+                Edit
               </button>
               <button
+                class="link"
                 onClick={() => {
                   if (
                     !confirm(`Are you sure to delete this **tools** template?`)
@@ -67,7 +68,7 @@ export function ListToolsTempaltes({
                   setTemplateTools(structuredClone(templateTools));
                 }}
               >
-                ❌
+                Delete
               </button>
             </span>
           </div>

src/message.tsx

@@ -121,7 +121,9 @@ export default function Message(props: Props) {
             <div
               className={`chat-bubble ${
                 chat.role === "assistant"
-                  ? "chat-bubble-secondary"
+                  ? renderColor
+                    ? "chat-bubble-neutral"
+                    : "chat-bubble-secondary"
                   : "chat-bubble-primary"
               }`}
             >