Update dependencies and fix styling issues

src/components/Option/Playground/PlaygroundNewChat.tsx

@@ -0,0 +1,25 @@
+import { PencilSquareIcon } from "@heroicons/react/24/outline"
+import { useMessage } from "../../../hooks/useMessage"
+
+export const PlaygroundNewChat = () => {
+  const { setHistory, setMessages, setHistoryId } = useMessage()
+
+
+  const handleClick = () => {
+    setHistoryId(null)
+    setMessages([])
+    setHistory([])
+    // navigate(`/bot/${params.id}`);
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className="flex w-full border bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100 rounded-md p-2 dark:border-gray-800">
+      <PencilSquareIcon className="mx-3 h-5 w-5" aria-hidden="true" />
+      <span className="inline-flex font-semibol text-white text-sm">
+        New Chat
+      </span>
+    </button>
+  )
+}