feat: prototype of endpoint setting

client/src/components/Input/BingStyles.jsx

@@ -25,7 +25,7 @@ function BingStyles(props, ref) {
 
   return (
     <Tabs
-      defaultValue={toneStyle}
+      value={toneStyle}
       className={`bing-styles mb-1 shadow-md ${show ? 'show' : ''}`}
       onValueChange={changeHandler}
       ref={ref}

client/src/components/Input/Endpoints/EndpointItem.jsx

@@ -18,7 +18,7 @@ export default function ModelItem({ endpoint, value, onSelect }) {
     >
       {icon}
       {endpoint}
-      {endpoint in ['azureOpenAI', 'openAI'] && <sup>$</sup>}
+      {!!['azureOpenAI', 'openAI'].find(e => e === endpoint) && <sup>$</sup>}
     </DropdownMenuRadioItem>
   );
 }

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;

client/src/components/Input/index.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import SubmitButton from './SubmitButton';
 import AdjustToneButton from './AdjustToneButton';
+import OpenAIOptions from './OpenAIOptions';
 import BingStyles from './BingStyles';
 import EndpointMenu from './Endpoints/EndpointMenu';
 import Footer from './Footer';
@@ -135,15 +136,11 @@ export default function TextChat({ isSearchView = false }) {
       <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
         <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
           <div className="relative flex h-full flex-1 md:flex-col">
-            <span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
+            <span className="order-last ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
-              <BingStyles
-                ref={bingStylesRef}
-                show={showBingToneSetting}
-              />
               {isSubmitting ? (
                 <button
                   onClick={handleStopGenerating}
-                  className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                  className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
                   type="button"
                 >
                   <StopGeneratingIcon />
@@ -152,13 +149,18 @@ export default function TextChat({ isSearchView = false }) {
               ) : latestMessage && !latestMessage?.isCreatedByUser ? (
                 <button
                   onClick={handleRegenerate}
-                  className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
+                  className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
                   type="button"
                 >
                   <RegenerateIcon />
                   <span className="hidden md:block">Regenerate response</span>
                 </button>
               ) : null}
+              <OpenAIOptions conversation={conversation} />
+              <BingStyles
+                ref={bingStylesRef}
+                show={showBingToneSetting}
+              />
             </span>
             <div
               className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${

client/src/components/Messages/HoverButtons.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import EditIcon from '../svg/EditIcon';
 
 export default function HoverButtons({ visible, onClick, endpoint }) {
-  const enabled = endpoint in ['azureOpenAI', 'openAI', 'chatGPTBrowser'];
+  const enabled = !!['azureOpenAI', 'openAI', 'chatGPTBrowser'].find(e => e === endpoint);
-
+  console.log(enabled);
   return (
     <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
       {visible && enabled ? (