feat: enhance playground UI

Refine the Playground's UI to improve user experience:

- Streamline chat window layout for better message readability
- Introduce a knowledge selection dropdown for easier context setting
- Improve image upload integration for a smoother workflow
- Optimize spacing and styling for a more polished visual appearance

src/components/Common/CodeBlock.tsx

@@ -90,7 +90,11 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
           width="80%"
           zIndex={999999}
           centered
-          bodyStyle={{ padding: 0 }}>
+          styles={{
+            body: {
+              padding: 0
+            }
+          }}>
           <div className="relative  w-full h-[80vh]">
             <iframe
               srcDoc={value}

src/components/Common/Playground/Message.tsx

@@ -48,8 +48,8 @@ export const PlaygroundMessage = (props: Props) => {
 
   return (
     <div className="group w-full text-gray-800 dark:text-gray-100">
-      <div className="text-base  md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
-        <div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
+      <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl  flex lg:px-0 m-auto w-full">
+        <div className="flex flex-row gap-4 md:gap-6 p-4 md:py-6 lg:px-0 m-auto w-full">
           <div className="w-8 flex flex-col relative items-end">
             <div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center  text-opacity-100r">
               {props.isBot ? (