Add @mantine/hooks dependency and update PlaygroundChat component

src/components/Common/Markdown.tsx

@@ -7,8 +7,7 @@ import ReactMarkdown from "react-markdown"
 import "property-information"
 import React from "react"
 import { Tooltip } from "antd"
-import { ClipboardIcon } from "~icons/ClipboardIcon"
-import { CheckIcon } from "~icons/CheckIcon"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
 
 export default function Markdown({ message }: { message: string }) {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)

src/components/Common/Playground/Message.tsx

@@ -18,6 +18,7 @@ type Props = {
   isProcessing: boolean
   webSearch?: {}
   isSearchingInternet?: boolean
+  sources?: any[]
 }
 
 export const PlaygroundMessage = (props: Props) => {
@@ -72,6 +73,20 @@ export const PlaygroundMessage = (props: Props) => {
                   ))}
               </div>
             )}
+
+            {props.isBot && (
+              <div className="mb-3 flex flex-wrap gap-2">
+                {props?.sources?.map((source, index) => (
+                  <a
+                    key={index}
+                    href={source?.url}
+                    target="_blank"
+                    className="inline-flex cursor-pointer transition-shadow duration-300 ease-in-out hover:shadow-lg  items-center rounded-md bg-gray-100 p-1 text-xs text-gray-800 border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 opacity-80 hover:opacity-100">
+                    <span className="text-xs">{source.name}</span>
+                  </a>
+                ))}
+              </div>
+            )}
             {props.isBot && !props.isProcessing && (
               <div className="flex space-x-2 gap-2">
                 {!props.hideCopy && (

src/components/Common/Playground/WebSearch.tsx

@@ -1,19 +1,12 @@
-import { useWebSearch } from "~store/web"
-import {
-  Globe,
-  MousePointer,
-  Boxes
-} from "lucide-react"
-
+import { Globe } from "lucide-react"
 
 export const WebSearch = () => {
-  const { state, text } = 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">
-        
+        <Globe className="w-6 h-6" />
       </div>
-      <div className="text-sm font-semibold">{text}</div>
+      <div className="text-sm font-semibold">Searching the web</div>
     </div>
   )
 }

src/components/Option/Playground/Playground.tsx

@@ -5,6 +5,7 @@ import { PlaygroundChat } from "./PlaygroundChat"
 export const Playground = () => {
   const drop = React.useRef<HTMLDivElement>(null)
   const [dropedFile, setDropedFile] = React.useState<File | undefined>()
+
   const [dropState, setDropState] = React.useState<
     "idle" | "dragging" | "error"
   >("idle")
@@ -70,14 +71,16 @@ export const Playground = () => {
       className={`${
         dropState === "dragging" ? "bg-gray-100 dark:bg-gray-800 z-10" : ""
       } min-h-screen`}>
-      <PlaygroundChat />
+      <PlaygroundChat  />
       <div className="flex flex-col items-center">
         <div className="flex-grow">
           <div className="w-full flex justify-center">
             <div className="bottom-0 w-full bg-transparent border-0 fixed pt-2">
               <div className="stretch mx-2 flex flex-row gap-3 md:mx-4 lg:mx-auto lg:max-w-2xl xl:max-w-3xl justify-center items-center">
                 <div className="relative h-full flex-1 items-center justify-center md:flex-col">
-                  <PlaygroundForm dropedFile={dropedFile} />
+                  <PlaygroundForm
+                    dropedFile={dropedFile}
+                  />
                 </div>
               </div>
             </div>

src/components/Option/Playground/PlaygroundChat.tsx

@@ -31,6 +31,7 @@ export const PlaygroundChat = () => {
           onRengerate={regenerateLastMessage}
           isProcessing={streaming}
           isSearchingInternet={isSearchingInternet}
+          sources={message.sources}
         />
       ))}
       {messages.length > 0 && (