Add @langchain/core dependency and update imports***

***Update SidepanelRouting to use dark mode***
***Add image support to PlaygroundMessage component

src/routes/index.tsx

@@ -1,14 +1,19 @@
 import { Route, Routes } from "react-router-dom"
 import { SidepanelChat } from "./sidepanel-chat"
 import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header"
+import { useDarkMode } from "~hooks/useDarkmode"
 
 export const Routing = () => <Routes></Routes>
 
-export const SidepanelRouting = () => (
-  <div className="dark">
-    <Routes>
-      <Route path="/" element={<SidepanelChat />} />
-      <Route path="/settings" element={<SidepanelSettingsHeader />} />  
-    </Routes>
-  </div>
-)
+export const SidepanelRouting = () => {
+  const { mode } = useDarkMode()
+
+  return (
+    <div className={mode === "dark" ? "dark" : "light"}>
+      <Routes>
+        <Route path="/" element={<SidepanelChat />} />
+        <Route path="/settings" element={<SidepanelSettingsHeader />} />
+      </Routes>
+    </div>
+  )
+}

src/routes/sidepanel-chat.tsx

@@ -1,10 +1,80 @@
+import React from "react"
 import { SidePanelBody } from "~components/Sidepanel/Chat/body"
 import { SidepanelForm } from "~components/Sidepanel/Chat/form"
 import { SidepanelHeader } from "~components/Sidepanel/Chat/header"
+import { useMessage } from "~hooks/useMessage"
 
 export const SidepanelChat = () => {
+  const drop = React.useRef<HTMLDivElement>(null)
+  const [dropedFile, setDropedFile] = React.useState<File | undefined>()
+  const [dropState, setDropState] = React.useState<
+    "idle" | "dragging" | "error"
+  >("idle")
+  const {chatMode} = useMessage()
+  React.useEffect(() => {
+    if (!drop.current) {
+      return
+    }
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    const handleDrop = (e: DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      setDropState("idle")
+
+      const files = Array.from(e.dataTransfer?.files || [])
+
+      const isImage = files.every((file) => file.type.startsWith("image/"))
+
+      if (!isImage) {
+        setDropState("error")
+        return
+      }
+
+      const newFiles = Array.from(e.dataTransfer?.files || []).slice(0, 1)
+      if (newFiles.length > 0) {
+        setDropedFile(newFiles[0])
+      }
+    }
+
+    const handleDragEnter = (e: DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDropState("dragging")
+    }
+
+    const handleDragLeave = (e: DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDropState("idle")
+    }
+
+    drop.current.addEventListener("dragover", handleDragOver)
+    drop.current.addEventListener("drop", handleDrop)
+    drop.current.addEventListener("dragenter", handleDragEnter)
+    drop.current.addEventListener("dragleave", handleDragLeave)
+
+    return () => {
+      if (drop.current) {
+        drop.current.removeEventListener("dragover", handleDragOver)
+        drop.current.removeEventListener("drop", handleDrop)
+        drop.current.removeEventListener("dragenter", handleDragEnter)
+        drop.current.removeEventListener("dragleave", handleDragLeave)
+      }
+    }
+  }, [])
   return (
-    <div className="flex bg-white dark:bg-black flex-col min-h-screen mx-auto max-w-7xl">
+    <div
+      ref={drop}
+      className={`flex ${
+        dropState === "dragging" && chatMode === "normal"
+          ? "bg-gray-100 dark:bg-gray-800 z-10"
+          : "bg-white dark:bg-black"
+      } flex-col min-h-screen mx-auto max-w-7xl`}>
       <div className="sticky top-0 z-10">
         <SidepanelHeader />
       </div>
@@ -13,7 +83,7 @@ export const SidepanelChat = () => {
       <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">
           <div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col">
-            <SidepanelForm />
+            <SidepanelForm dropedFile={dropedFile} />
           </div>
         </div>
       </div>