Add @mantine/hooks dependency and update PlaygroundChat component

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 && (