Add provider filtering on model list

app/components/chat/BaseChat.tsx

@@ -10,6 +10,7 @@ import { classNames } from '~/utils/classNames';
 import { MODEL_LIST } from '~/utils/constants';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
+import { useState } from 'react';
 
 import styles from './BaseChat.module.scss';
 
@@ -21,6 +22,40 @@ const EXAMPLE_PROMPTS = [
   { text: 'How do I center a div?' },
 ];
 
+const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]
+
+const ModelSelector = ({ model, setModel, modelList, providerList }) => {
+  const [provider, setProvider] = useState(null);
+  return (
+    <div className="mb-2">
+      <select 
+        value={provider}
+        onChange={(e) => setProvider(e.target.value)}
+        className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+      >
+        {providerList.map((provider) => (
+          <option key={provider} value={provider}>
+            {provider}
+          </option>
+        ))}
+
+      </select>
+      <select
+        value={model}
+        provider={provider}
+        onChange={(e) => setModel(e.target.value)}
+        className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+      >
+        {[...modelList].filter( e => e.provider == provider ).map((modelOption) => (
+          <option key={modelOption.name} value={modelOption.name}>
+            {modelOption.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
 const TEXTAREA_MIN_HEIGHT = 76;
 
 interface BaseChatProps {
@@ -110,20 +145,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   'sticky bottom-0': chatStarted,
                 })}
               >
-                {/* Model selection dropdown */}
+                <ModelSelector
-                <div className="mb-2">
+                  model={model}
-                  <select
+                  setModel={setModel}
-                    value={model}
+                  modelList={MODEL_LIST}
-                    onChange={(e) => setModel(e.target.value)}
+                  providerList={providerList}
-                    className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+                />
-                  >
-                    {MODEL_LIST.map((modelOption) => (
-                      <option key={modelOption.name} value={modelOption.name}>
-                        {modelOption.label}
-                      </option>
-                    ))}
-                  </select>
-                </div>
                 <div
                   className={classNames(
                     'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',