Add @mantine/hooks dependency and update PlaygroundChat component

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