feat: Add ModelSelect component to SidepanelForm

src/components/Sidepanel/Chat/empty.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { Select } from "antd"
 import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
@@ -15,6 +15,7 @@ import {
 export const EmptySidePanel = () => {
   const [ollamaURL, setOllamaURL] = useState<string>("")
   const { t } = useTranslation(["playground", "common"])
+  const queryClient = useQueryClient()
   const {
     data: ollamaInfo,
     status: ollamaStatus,
@@ -26,7 +27,9 @@ export const EmptySidePanel = () => {
       const ollamaURL = await getOllamaURL()
       const isOk = await isOllamaRunning()
       const models = await fetchChatModels({ returnEmpty: false })
-
+      queryClient.invalidateQueries({
+        queryKey: ["getAllModelsForSelect"]
+      })
       return {
         isOk,
         models,

src/components/Sidepanel/Chat/form.tsx

@@ -10,6 +10,7 @@ import { useWebUI } from "~/store/webui"
 import { defaultEmbeddingModelForRag } from "~/services/ollama"
 import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
 import { useTranslation } from "react-i18next"
+import { ModelSelect } from "@/components/Common/ModelSelect"
 
 type Props = {
   dropedFile: File | undefined
@@ -186,6 +187,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                 {...form.getInputProps("message")}
               />
               <div className="flex mt-4 justify-end gap-3">
+                <ModelSelect />
                 <Tooltip title={t("tooltip.speechToText")}>
                   <button
                     type="button"