feat: prototype of endpoint setting

client/src/components/Input/OpenAIOptions/index.jsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect, forwardRef } from 'react';
+import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import { Button } from '../../ui/Button.tsx';
+
+import store from '~/store';
+
+function OpenAIOptions({ conversation = {} }) {
+  const { endpoint } = conversation;
+  const { advancedMode, setAdvancedMode } = useState(false);
+
+  const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
+
+  if (endpoint !== 'openAI') return null;
+
+  const { model } = conversation;
+
+  const cardStyle =
+    'shadow-md px-4 h-[40px] rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
+
+  return (
+    <>
+      <div className="flex w-full items-center justify-center gap-2">
+        <Button
+          type="button"
+          className={cardStyle + ' flex items-center justify-center hover:bg-slate-50 dark:hover:bg-gray-600'}
+        >
+          <span className="w-full text-center text-xs font-medium font-normal">Model: {model}</span>
+        </Button>
+        <Button
+          type="button"
+          className={cardStyle + ' flex items-center justify-center hover:bg-slate-50 dark:hover:bg-gray-600'}
+          onClick={triggerAdvancedMode}
+        >
+          <span className="w-full text-center text-xs font-medium font-normal">More</span>
+        </Button>
+      </div>
+      <div
+        className={
+          cardStyle +
+          ' p-b-[40px] absolute left-4 right-4 bottom-[40px] flex h-[220px] flex-col rounded-md bg-white'
+        }
+      >
+        <div>title</div>
+        <div>content</div>
+      </div>
+    </>
+  );
+}
+
+export default OpenAIOptions;