Add lucide-react package and remove unused icons

src/components/Common/Playground/Message.tsx

@@ -1,9 +1,8 @@
 import Markdown from "../../Common/Markdown"
 import React from "react"
 import { Image, Tooltip } from "antd"
-import { ClipboardIcon } from "~icons/ClipboardIcon"
-import { CheckIcon } from "~icons/CheckIcon"
-import { ArrowPathIcon } from "~icons/ArrowPathIcon"
+import { WebSearch } from "./WebSearch"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
 
 type Props = {
   message: string
@@ -17,9 +16,8 @@ type Props = {
   totalMessages: number
   onRengerate: () => void
   isProcessing: boolean
-  webSearch?: {
-    
-  }
+  webSearch?: {}
+  isSearchingInternet?: boolean
 }
 
 export const PlaygroundMessage = (props: Props) => {
@@ -49,6 +47,12 @@ export const PlaygroundMessage = (props: Props) => {
               {props.isBot ? props.name : "You"}
             </span>
 
+            {props.isBot &&
+            props.isSearchingInternet &&
+            props.currentMessageIndex === props.totalMessages - 1 ? (
+              <WebSearch />
+            ) : null}
+
             <div className="flex flex-grow flex-col">
               <Markdown message={props.message} />
             </div>

src/components/Common/Playground/WebSearch.tsx

@@ -0,0 +1,25 @@
+import { useWebSearch } from "~store/web"
+
+export const WebSearch = () => {
+  const {} = useWebSearch()
+  return (
+    <div className="gradient-border mt-4 flex w-56 items-center gap-4 rounded-lg bg-neutral-100 p-1ccc text-slate-900 dark:bg-neutral-800 dark:text-slate-50">
+      <div className="rounded p-1">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-6 h-6">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
+          />
+        </svg>
+      </div>
+      <div className="text-sm font-semibold">Searching Web</div>
+    </div>
+  )
+}