From f5ffa814554bf3084d70239fb4f9b93703490f70 Mon Sep 17 00:00:00 2001
From: Daniel Avila <messagedaniel@protonmail.com>
Date: Sat, 1 Apr 2023 12:49:20 -0400
Subject: [PATCH] complete: modeldropdown

---
 client/package-lock.json                      | 34 ++++++++
 client/package.json                           |  1 +
 .../Input/OpenAIOptions/ModelDropDown.jsx     | 78 +++++++++++++++++++
 .../Input/OpenAIOptions/Settings.jsx          |  8 +-
 .../components/Input/OpenAIOptions/index.jsx  |  2 +-
 5 files changed, 119 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/Input/OpenAIOptions/ModelDropDown.jsx

diff --git a/client/package-lock.json b/client/package-lock.json
index 56bed4267..82304f717 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.2.0",
       "license": "ISC",
       "dependencies": {
+        "@headlessui/react": "^1.7.13",
         "@radix-ui/react-alert-dialog": "^1.0.2",
         "@radix-ui/react-dialog": "^1.0.2",
         "@radix-ui/react-dropdown-menu": "^2.0.2",
@@ -2532,6 +2533,21 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.13",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.13.tgz",
+      "integrity": "sha512-9n+EQKRtD9266xIHXdY5MfiXPDfYwl7zBM7KOx2Ae3Gdgxy8QML1FkCMjq6AsOf0l6N9uvI4HcFtuFlenaldKg==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -4943,6 +4959,11 @@
         }
       }
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -15478,6 +15499,14 @@
         "use-isomorphic-layout-effect": "^1.1.1"
       }
     },
+    "@headlessui/react": {
+      "version": "1.7.13",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.13.tgz",
+      "integrity": "sha512-9n+EQKRtD9266xIHXdY5MfiXPDfYwl7zBM7KOx2Ae3Gdgxy8QML1FkCMjq6AsOf0l6N9uvI4HcFtuFlenaldKg==",
+      "requires": {
+        "client-only": "^0.0.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -17421,6 +17450,11 @@
       "integrity": "sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==",
       "requires": {}
     },
+    "client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
diff --git a/client/package.json b/client/package.json
index 69296c91b..d1ce1ec63 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/danny-avila/chatgpt-clone#readme",
   "dependencies": {
+    "@headlessui/react": "^1.7.13",
     "@radix-ui/react-alert-dialog": "^1.0.2",
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
diff --git a/client/src/components/Input/OpenAIOptions/ModelDropDown.jsx b/client/src/components/Input/OpenAIOptions/ModelDropDown.jsx
new file mode 100644
index 000000000..c4da1cbd2
--- /dev/null
+++ b/client/src/components/Input/OpenAIOptions/ModelDropDown.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import CheckMark from '../../svg/CheckMark';
+import { Listbox } from '@headlessui/react';
+import { useRecoilValue } from 'recoil';
+import { cn } from '~/utils/';
+import store from '~/store';
+
+function ModelDropDown({ model, setModel, endpoint }) {
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+  const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
+
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <div className="relative w-full">
+        <Listbox
+          value={model}
+          onChange={setModel}
+        >
+          <Listbox.Button className="relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm">
+            <Listbox.Label
+              className="block text-xs text-gray-700 dark:text-gray-500"
+              id="headlessui-listbox-label-:r1:"
+              data-headlessui-state=""
+            >
+              Model
+            </Listbox.Label>
+            <span className="inline-flex w-full truncate">
+              <span className="flex h-6 items-center gap-1 truncate text-sm">{model}</span>
+            </span>
+            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <svg
+                stroke="currentColor"
+                fill="none"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4  text-gray-400"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </span>
+          </Listbox.Button>
+          <Listbox.Options className="absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]">
+            {models.map((modelOption, i) => (
+              <Listbox.Option
+                key={i}
+                value={modelOption}
+                className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
+              >
+                <span className="flex items-center gap-1.5 truncate">
+                  <span
+                    className={cn(
+                      'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
+                      modelOption === model ? 'font-semibold' : ''
+                    )}
+                  >
+                    {modelOption}
+                  </span>
+                  {modelOption === model && (
+                    <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
+                      <CheckMark />
+                    </span>
+                  )}
+                </span>
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Listbox>
+      </div>
+    </div>
+  );
+}
+
+export default ModelDropDown;
diff --git a/client/src/components/Input/OpenAIOptions/Settings.jsx b/client/src/components/Input/OpenAIOptions/Settings.jsx
index b72b86146..d0d9c8566 100644
--- a/client/src/components/Input/OpenAIOptions/Settings.jsx
+++ b/client/src/components/Input/OpenAIOptions/Settings.jsx
@@ -1,5 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
+import ModelDropDown from './ModelDropDown';
 import { Input } from '~/components/ui/Input.tsx';
 import { Label } from '~/components/ui/Label.tsx';
 import { Slider } from '~/components/ui/Slider.tsx';
@@ -56,7 +57,8 @@ function Settings(props) {
       <div className="grid gap-6 sm:grid-cols-2">
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
-            <Label
+          <ModelDropDown model={model} setModel={setModel} endpoint="openAI"/>
+            {/* <Label
               htmlFor="model"
               className="text-left text-sm font-medium"
             >
@@ -72,7 +74,7 @@ function Settings(props) {
                 defaultTextProps,
                 'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
               )}
-            />
+            /> */}
           </div>
           <div className="grid w-full items-center gap-2">
             <Label
diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx
index a86c79c67..53d30d5bb 100644
--- a/client/src/components/Input/OpenAIOptions/index.jsx
+++ b/client/src/components/Input/OpenAIOptions/index.jsx
@@ -85,7 +85,7 @@ function OpenAIOptions() {
           type="button"
           className={cn(
             cardStyle,
-            ' min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
+            ' min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
           )}
           onClick={triggerAdvancedMode}
         >