style: improve classname by clsx

app/components/chat.tsx

@@ -121,6 +121,7 @@ import { MsEdgeTTS, OUTPUT_FORMAT } from "../utils/ms_edge_tts";
 
 import { isEmpty } from "lodash-es";
 import { getModelProvider } from "../utils/model";
+import clsx from "clsx";
 
 const localStorage = safeLocalStorage();
 
@@ -211,7 +212,7 @@ function PromptToast(props: {
     <div className={styles["prompt-toast"]} key="prompt-toast">
       {props.showToast && context.length > 0 && (
         <div
-          className={styles["prompt-toast-inner"] + " clickable"}
+          className={clsx(styles["prompt-toast-inner"], "clickable")}
           role="button"
           onClick={() => props.setShowModal(true)}
         >
@@ -332,10 +333,9 @@ export function PromptHints(props: {
       {props.prompts.map((prompt, i) => (
         <div
           ref={i === selectIndex ? selectedRef : null}
-          className={
-            styles["prompt-hint"] +
-            ` ${i === selectIndex ? styles["prompt-hint-selected"] : ""}`
-          }
+          className={clsx(styles["prompt-hint"], {
+            [styles["prompt-hint-selected"]]: i === selectIndex,
+          })}
           key={prompt.title + i.toString()}
           onClick={() => props.onPromptSelect(prompt)}
           onMouseEnter={() => setSelectIndex(i)}
@@ -395,7 +395,7 @@ export function ChatAction(props: {
 
   return (
     <div
-      className={`${styles["chat-input-action"]} clickable`}
+      className={clsx(styles["chat-input-action"], "clickable")}
       onClick={() => {
         props.onClick();
         setTimeout(updateWidth, 1);
@@ -1596,9 +1596,12 @@ function _Chat() {
           </div>
         )}
 
-        <div className={`window-header-title ${styles["chat-body-title"]}`}>
+        <div className={clsx("window-header-title", styles["chat-body-title"])}>
           <div
-            className={`window-header-main-title ${styles["chat-body-main-title"]}`}
+            className={clsx(
+              "window-header-main-title",
+              styles["chat-body-main-title"],
+            )}
             onClickCapture={() => setIsEditingMessage(true)}
           >
             {!session.topic ? DEFAULT_TOPIC : session.topic}
@@ -1872,7 +1875,7 @@ function _Chat() {
                     )}
                     {getMessageImages(message).length > 1 && (
                       <div
-                        className={styles["chat-message-item-images"]}
+                        className={clsx(styles["chat-message-item-images"])}
                         style={
                           {
                             "--image-count": getMessageImages(message).length,
@@ -1934,11 +1937,10 @@ function _Chat() {
           setUserInput={setUserInput}
         />
         <label
-          className={`${styles["chat-input-panel-inner"]} ${
-            attachImages.length != 0
-              ? styles["chat-input-panel-inner-attach"]
-              : ""
-          }`}
+          className={clsx(styles["chat-input-panel-inner"], {
+            [styles["chat-input-panel-inner-attach"]]:
+              attachImages.length !== 0,
+          })}
           htmlFor="chat-input"
         >
           <textarea