chore: Update form components to handle pasted files

src/components/Option/Knowledge/SelectedKnwledge.tsx

@@ -1,5 +1,6 @@
 import { Blocks, XIcon } from "lucide-react"
 import { useMessageOption } from "@/hooks/useMessageOption"
+import { Tooltip } from "antd"
 
 export const SelectedKnowledge = () => {
   const { selectedKnowledge: knowledge, setSelectedKnowledge } =
@@ -8,17 +9,21 @@ export const SelectedKnowledge = () => {
   if (!knowledge) return <></>
 
   return (
-    <div className="flex flex-row items-center gap-3">
+    <div className="flex  flex-row items-center gap-3">
       <span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
         {"/"}
       </span>
-      <div className="border flex justify-between items-center rounded-full px-2 py-1 gap-2 bg-gray-100 dark:bg-slate-800 dark:border-slate-700">
-        <div className="inline-flex items-center gap-2">
-          <Blocks className="h-5 w-5 text-gray-400" />
-          <span className="text-xs font-semibold dark:text-gray-100">
+      <div className="border flex  justify-between items-center rounded-full px-2 py-1 gap-2 bg-gray-100 dark:bg-slate-800 dark:border-slate-700">
+        <Tooltip
+        title={knowledge.title}
+        >
+        <div className="inline-flex truncate items-center gap-2">
+          <Blocks className="h-5  w-5 text-gray-400" />
+          <span className="text-xs hidden lg:inline-block  font-semibold dark:text-gray-100">
             {knowledge.title}
           </span>
         </div>
+        </Tooltip>
         <div>
           <button
             onClick={() => setSelectedKnowledge(null)}

src/components/Option/Models/index.tsx

@@ -91,7 +91,10 @@ export const ModelsBody = () => {
         {status === "pending" && <Skeleton paragraph={{ rows: 8 }} />}
 
         {status === "success" && (
-          <Table
+          <div
+          className="overflow-x-auto"
+          >
+            <Table
             columns={[
               {
                 title: t("manageModels.columns.name"),
@@ -207,6 +210,7 @@ export const ModelsBody = () => {
             dataSource={data}
             rowKey={(record) => `${record.model}-${record.digest}`}
           />
+          </div>
         )}
       </div>