remove few components on frontend

src/components/playground/Playground.tsx

@@ -479,21 +479,34 @@ export default function Playground({
   ]);
 
   const instructionsContent = (
-    <ConfigurationPanelItem title="Instructions">
-      <textarea
-        className="w-full bg-gray-950 text-white text-sm p-3 rounded-md border border-gray-800 focus:border-gray-600 focus:outline-none transition-colors resize-none disabled:opacity-50 disabled:cursor-not-allowed"
-        style={{ minHeight: "80px" }}
-        rows={3}
-        placeholder="Enter system instructions for the agent..."
-        value={config.settings.instructions}
-        onChange={(e) => {
-          const newSettings = { ...config.settings };
-          newSettings.instructions = e.target.value;
-          setUserSettings(newSettings);
-        }}
-        disabled={roomState !== ConnectionState.Disconnected}
-      />
-    </ConfigurationPanelItem>
+    <>
+      <ConfigurationPanelItem title="Instructions">
+        <textarea
+          className="w-full bg-gray-950 text-white text-sm p-3 rounded-md border border-gray-800 focus:border-gray-600 focus:outline-none transition-colors resize-none disabled:opacity-50 disabled:cursor-not-allowed"
+          style={{ minHeight: "80px" }}
+          rows={3}
+          placeholder="Enter system instructions for the agent..."
+          value={config.settings.instructions}
+          onChange={(e) => {
+            const newSettings = { ...config.settings };
+            newSettings.instructions = e.target.value;
+            setUserSettings(newSettings);
+          }}
+          disabled={roomState !== ConnectionState.Disconnected}
+        />
+      </ConfigurationPanelItem>
+      <ConfigurationPanelItem title="Color">
+        <ColorPicker
+          colors={themeColors}
+          selectedColor={config.settings.theme_color}
+          onSelect={(color) => {
+            const userSettings = { ...config.settings };
+            userSettings.theme_color = color;
+            setUserSettings(userSettings);
+          }}
+        />
+      </ConfigurationPanelItem>
+    </>
   );
 
   const handleRpcCall = useCallback(async () => {
@@ -516,13 +529,13 @@ export default function Playground({
   const settingsTileContent = useMemo(() => {
     return (
       <div className="flex flex-col h-full w-full items-start overflow-y-auto">
-        {config.description && (
+        {/* {config.description && (
           <ConfigurationPanelItem title="Description">
             {config.description}
           </ConfigurationPanelItem>
-        )}
+        )} */}
 
-        <ConfigurationPanelItem title="Room">
+        {/* <ConfigurationPanelItem title="Room">
           <div className="flex flex-col gap-2">
             <EditableNameValueRow
               name="Room name"
@@ -556,9 +569,9 @@ export default function Playground({
               }
             />
           </div>
-        </ConfigurationPanelItem>
+        </ConfigurationPanelItem> */}
 
-        <ConfigurationPanelItem title="Agent">
+        {/* <ConfigurationPanelItem title="Agent">
           <div className="flex flex-col gap-2">
             <EditableNameValueRow
               name="Agent name"
@@ -621,9 +634,9 @@ export default function Playground({
               .
             </p>
           </div>
-        </ConfigurationPanelItem>
+        </ConfigurationPanelItem> */}
 
-        <ConfigurationPanelItem title="User">
+        {/* <ConfigurationPanelItem title="User">
           <div className="flex flex-col gap-2">
             <EditableNameValueRow
               name="Name"
@@ -675,7 +688,7 @@ export default function Playground({
               connectionState={roomState}
             />
           </div>
-        </ConfigurationPanelItem>
+        </ConfigurationPanelItem> */}
 
         {roomState === ConnectionState.Connected &&
           config.settings.inputs.screen && (
@@ -725,19 +738,6 @@ export default function Playground({
             <AudioInputTile trackRef={localMicTrack} />
           </ConfigurationPanelItem>
         )}
-        <div className="w-full">
-          <ConfigurationPanelItem title="Color">
-            <ColorPicker
-              colors={themeColors}
-              selectedColor={config.settings.theme_color}
-              onSelect={(color) => {
-                const userSettings = { ...config.settings };
-                userSettings.theme_color = color;
-                setUserSettings(userSettings);
-              }}
-            />
-          </ConfigurationPanelItem>
-        </div>
         {config.show_qr && (
           <div className="w-full">
             <ConfigurationPanelItem title="QR Code">
@@ -748,7 +748,6 @@ export default function Playground({
       </div>
     );
   }, [
-    config.description,
     config.settings,
     config.show_qr,
     localParticipant,
@@ -842,7 +841,7 @@ export default function Playground({
 
   return (
     <>
-      <PlaygroundHeader
+      {/* <PlaygroundHeader
         title={config.title}
         logo={logo}
         githubLink={config.github_link}
@@ -856,10 +855,10 @@ export default function Playground({
             handleDisconnect();
           }
         }}
-      />
+      /> */}
       <div
         className={`flex gap-4 py-4 grow w-full selection:bg-${config.settings.theme_color}-900`}
-        style={{ height: `calc(100% - ${headerHeight}px)` }}
+        style={{ height: `100%` }}
       >
         <div className="flex flex-col grow basis-1/2 gap-4 h-full lg:hidden">
           <PlaygroundTabbedTile
@@ -926,14 +925,14 @@ export default function Playground({
             </PlaygroundTile>
           </div>
         )}
-        <PlaygroundTile
+        {/* <PlaygroundTile
           padding={false}
           backgroundColor="gray-950"
           className="h-full w-full basis-1/4 items-start overflow-y-auto hidden max-w-[480px] lg:flex"
           childrenClassName="h-full grow items-start"
         >
           {settingsTileContent}
-        </PlaygroundTile>
+        </PlaygroundTile> */}
       </div>
     </>
   );