change icon

Author: JYC0413

components/Chat/ChatInput.tsx

@@ -1,12 +1,4 @@
-import {
-    IconArrowDown,
-    IconBolt,
-    IconCircleSquare,
-    IconSend,
-    IconSendOff,
-    IconUpload,
-    IconWriting
-} from '@tabler/icons-react';
+import {IconArrowDown, IconBolt, IconSend, IconUpload, IconWriting} from '@tabler/icons-react';
 import React, {KeyboardEvent, MutableRefObject, useCallback, useContext, useEffect, useRef, useState,} from 'react';
 
 import {useTranslation} from 'next-i18next';
@@ -466,16 +458,22 @@ export const ChatInput = ({
                         onClick={messageIsStreaming ? stopSend : handleSend}
                     >
                         {messageIsStreaming ? (
-                            <IconCircleSquare size={18}/>
-                        ) : (
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
+                                     fill="currentColor"
+                                     className="icon icon-tabler icons-tabler-filled icon-tabler-circle-rectangle">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                    <path
+                                        d="M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m0 5.66h-10a1 1 0 0 0 -1 1v4a1 1 0 0 0 1 1h10a1 1 0 0 0 1 -1v-4a1 1 0 0 0 -1 -1"/>
+                                </svg>
+                            ) : (
                             <IconSend size={18}/>
-                        )}
-                    </button>
+                    )}
+                </button>
 
-                    {showScrollDownButton && (
-                        <div className="absolute bottom-12 right-0 lg:bottom-0 lg:-right-10">
-                            <button
-                                className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
+                {showScrollDownButton && (
+                    <div className="absolute bottom-12 right-0 lg:bottom-0 lg:-right-10">
+                        <button
+                            className="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-300 text-gray-800 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-neutral-200"
                                 onClick={onScrollDownClick}
                             >
                                 <IconArrowDown size={18}/>

package-lock.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@dqbd/tiktoken": "^1.0.2",
-    "@tabler/icons-react": "^2.9.0",
+    "@tabler/icons-react": "^2.47.0",
     "eventsource-parser": "^0.1.0",
     "i18next": "^22.4.13",
     "next": "13.2.4",

package.json

@@ -439,18 +439,18 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tabler/icons-react@^2.9.0":
-  version "2.10.0"
-  resolved "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.10.0.tgz"
-  integrity sha512-cWJPhPv7QG89OByVaMc3cs0mY9yIHf4ctoRrjQ4+uXjna2xx0SkwfXAtgt8UhRnp/b47Pr3h59P8Vojw49d2jA==
+"@tabler/icons-react@^2.47.0":
+  version "2.47.0"
+  resolved "https://registry.npmmirror.com/@tabler/icons-react/-/icons-react-2.47.0.tgz"
+  integrity sha512-iqly2FvCF/qUbgmvS8E40rVeYY7laltc5GUjRxQj59DuX0x/6CpKHTXt86YlI2whg4czvd/c8Ce8YR08uEku0g==
   dependencies:
-    "@tabler/icons" "2.10.0"
+    "@tabler/icons" "2.47.0"
     prop-types "^15.7.2"
 
-"@tabler/icons@2.10.0":
-  version "2.10.0"
-  resolved "https://registry.npmjs.org/@tabler/icons/-/icons-2.10.0.tgz"
-  integrity sha512-rj9xrHTSw7bPpylx8g9xhhUgO9NYKX1wGnGrMaFS5CQ9KS+jhwhKFqbZaQKhXNhpvI0cLEEW6GaRXdrC3iBs1A==
+"@tabler/icons@2.47.0":
+  version "2.47.0"
+  resolved "https://registry.npmmirror.com/@tabler/icons/-/icons-2.47.0.tgz"
+  integrity sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==
 
 "@tailwindcss/typography@^0.5.9":
   version "0.5.9"