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>
   )
 }