From 9c55c75eb50b5af8873a705cdeb17b8bc7dfbbfa Mon Sep 17 00:00:00 2001
From: ccurme <chester.curme@gmail.com>
Date: Fri, 13 Dec 2024 16:48:02 -0500
Subject: [PATCH] docs: dropdowns for embeddings and vector stores (#28713)

---
 docs/docs/tutorials/qa_chat_history.ipynb |  6 --
 docs/docs/tutorials/rag.ipynb             |  6 --
 docs/src/theme/ChatModelTabs.js           | 21 ++++++-
 docs/src/theme/EmbeddingTabs.js           | 71 +++++++++++++++--------
 docs/src/theme/VectorStoreTabs.js         | 53 +++++++++++------
 5 files changed, 100 insertions(+), 57 deletions(-)

diff --git a/docs/docs/tutorials/qa_chat_history.ipynb b/docs/docs/tutorials/qa_chat_history.ipynb
index 2e0b09b2d17..3acb3368a7b 100644
--- a/docs/docs/tutorials/qa_chat_history.ipynb
+++ b/docs/docs/tutorials/qa_chat_history.ipynb
@@ -51,8 +51,6 @@
     "\n",
     "We will need to select three components from LangChain's suite of integrations.\n",
     "\n",
-    "A [chat model](/docs/integrations/chat/):\n",
-    "\n",
     "import ChatModelTabs from \"@theme/ChatModelTabs\";\n",
     "\n",
     "<ChatModelTabs customVarName=\"llm\" />"
@@ -78,8 +76,6 @@
    "id": "da14773e-ac98-4a97-944b-4c6ec028d195",
    "metadata": {},
    "source": [
-    "An [embedding model](/docs/integrations/text_embedding/):\n",
-    "\n",
     "import EmbeddingTabs from \"@theme/EmbeddingTabs\";\n",
     "\n",
     "<EmbeddingTabs/>"
@@ -105,8 +101,6 @@
    "id": "22fdc314-b91d-4820-b0a8-873b5b6e76f5",
    "metadata": {},
    "source": [
-    "And a [vector store](/docs/integrations/vectorstores/):\n",
-    "\n",
     "import VectorStoreTabs from \"@theme/VectorStoreTabs\";\n",
     "\n",
     "<VectorStoreTabs/>"
diff --git a/docs/docs/tutorials/rag.ipynb b/docs/docs/tutorials/rag.ipynb
index 631b5537aa9..959c13cf9bc 100644
--- a/docs/docs/tutorials/rag.ipynb
+++ b/docs/docs/tutorials/rag.ipynb
@@ -122,8 +122,6 @@
     "\n",
     "We will need to select three components from LangChain's suite of integrations.\n",
     "\n",
-    "A [chat model](/docs/integrations/chat/):\n",
-    "\n",
     "import ChatModelTabs from \"@theme/ChatModelTabs\";\n",
     "\n",
     "<ChatModelTabs customVarName=\"llm\" />"
@@ -149,8 +147,6 @@
    "id": "f1b78672-f21e-4827-843e-59514d18ca20",
    "metadata": {},
    "source": [
-    "An [embedding model](/docs/integrations/text_embedding/):\n",
-    "\n",
     "import EmbeddingTabs from \"@theme/EmbeddingTabs\";\n",
     "\n",
     "<EmbeddingTabs/>"
@@ -176,8 +172,6 @@
    "id": "859ffca8-055e-4f5a-95fe-55906ed1d63f",
    "metadata": {},
    "source": [
-    "And a [vector store](/docs/integrations/vectorstores/):\n",
-    "\n",
     "import VectorStoreTabs from \"@theme/VectorStoreTabs\";\n",
     "\n",
     "<VectorStoreTabs/>"
diff --git a/docs/src/theme/ChatModelTabs.js b/docs/src/theme/ChatModelTabs.js
index c6aee814856..413af9ea992 100644
--- a/docs/src/theme/ChatModelTabs.js
+++ b/docs/src/theme/ChatModelTabs.js
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import CodeBlock from "@theme-original/CodeBlock";
 
 // Create a custom dropdown since Docusaurus's dropdown component isn't easily accessible
-const CustomDropdown = ({ selectedOption, options, onSelect }) => {
+export const CustomDropdown = ({ selectedOption, options, onSelect, modelType }) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   // Close dropdown when clicking outside
@@ -18,13 +18,29 @@ const CustomDropdown = ({ selectedOption, options, onSelect }) => {
     return () => document.removeEventListener('click', handleClickOutside);
   }, [isOpen]);
 
+  // Determine the text and link based on the modelType
+  const getModelTextAndLink = () => {
+    switch (modelType) {
+      case 'chat':
+        return { text: 'chat model', link: '/docs/integrations/chat/' };
+      case 'embeddings':
+        return { text: 'embeddings model', link: '/docs/integrations/text_embedding/' };
+      case 'vectorstore':
+        return { text: 'vector store', link: '/docs/integrations/vectorstores/' };
+      default:
+        return { text: 'chat model', link: '/docs/integrations/chat/' };
+    }
+  };
+
+  const { text, link } = getModelTextAndLink();
+
   return (
     <div style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem', gap: '0.75rem' }}>
       <span style={{ 
         fontSize: '1rem',
         fontWeight: '500',
       }}>
-        Select <a href="/docs/integrations/chat/">chat model</a>:
+        Select <a href={link}>{text}</a>:
       </span>
       <div className={`dropdown ${isOpen ? 'dropdown--show' : ''}`}>
         <button 
@@ -300,6 +316,7 @@ return (
       selectedOption={selectedOption}
       options={modelOptions}
       onSelect={setSelectedModel}
+      modelType="chat"
     />
 
     <CodeBlock language="bash">
diff --git a/docs/src/theme/EmbeddingTabs.js b/docs/src/theme/EmbeddingTabs.js
index f29da74f135..101adc7b9dc 100644
--- a/docs/src/theme/EmbeddingTabs.js
+++ b/docs/src/theme/EmbeddingTabs.js
@@ -1,9 +1,9 @@
-import React from "react";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import React, { useState } from "react";
 import CodeBlock from "@theme-original/CodeBlock";
+import { CustomDropdown } from './ChatModelTabs';
 
 export default function EmbeddingTabs(props) {
+    const [selectedModel, setSelectedModel] = useState("OpenAI");
     const {
       openaiParams,
       hideOpenai,
@@ -148,24 +148,47 @@ export default function EmbeddingTabs(props) {
       },
     ];
   
-    return (
-        <Tabs groupId="modelTabs">
-            {tabItems
-                .filter((tabItem) => !tabItem.shouldHide)
-                .map((tabItem) => {
-                    const apiKeyText = tabItem.apiKeyName ? `import getpass\n\nos.environ["${tabItem.apiKeyName}"] = getpass.getpass()` : '';
-                    return (
-                        <TabItem
-                            value={tabItem.value}
-                            label={tabItem.label}
-                            default={tabItem.default}
-                        >
-                            <CodeBlock language="bash">{`pip install -qU ${tabItem.packageName}`}</CodeBlock>              
-                            <CodeBlock language="python">{apiKeyText + (apiKeyText ? "\n\n" : '') + tabItem.text}</CodeBlock>
-                        </TabItem>
-                    );
-                })
-            }
-        </Tabs>
-    );
-  }
\ No newline at end of file
+  const modelOptions = tabItems
+  .filter((item) => !item.shouldHide)
+  .map((item) => ({
+    value: item.value,
+    label: item.label,
+    text: item.text,
+    apiKeyName: item.apiKeyName,
+    apiKeyText: item.apiKeyText,
+    packageName: item.packageName,
+  }));
+
+const selectedOption = modelOptions.find(
+  (option) => option.value === selectedModel
+);
+
+let apiKeyText = "";
+if (selectedOption.apiKeyName) {
+  apiKeyText = `import getpass
+import os
+
+if not os.environ.get("${selectedOption.apiKeyName}"):
+  os.environ["${selectedOption.apiKeyName}"] = getpass.getpass("Enter API key for ${selectedOption.label}: ")`;
+  } else if (selectedOption.apiKeyText) {
+    apiKeyText = selectedOption.apiKeyText;
+  }
+
+return (
+  <div>
+    <CustomDropdown 
+      selectedOption={selectedOption}
+      options={modelOptions}
+      onSelect={setSelectedModel}
+      modelType="embeddings"
+    />
+
+    <CodeBlock language="bash">
+      {`pip install -qU ${selectedOption.packageName}`}
+    </CodeBlock>
+    <CodeBlock language="python">
+      {apiKeyText ? apiKeyText + "\n\n" + selectedOption.text : selectedOption.text}
+    </CodeBlock>
+  </div>
+);
+}
diff --git a/docs/src/theme/VectorStoreTabs.js b/docs/src/theme/VectorStoreTabs.js
index 9a528290564..d7a2042c960 100644
--- a/docs/src/theme/VectorStoreTabs.js
+++ b/docs/src/theme/VectorStoreTabs.js
@@ -1,9 +1,9 @@
-import React from "react";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import React, { useState } from "react";
 import CodeBlock from "@theme-original/CodeBlock";
+import { CustomDropdown } from './ChatModelTabs';
 
 export default function VectorStoreTabs(props) {
+    const [selectedModel, setSelectedModel] = useState("In-memory");
     const { customVarName, useFakeEmbeddings = false } = props;
 
     const vectorStoreVarName = customVarName ?? "vector_store";
@@ -76,19 +76,34 @@ export default function VectorStoreTabs(props) {
         },
     ];
 
-    return (
-        <Tabs groupId="vectorStoreTabs">
-            {tabItems.map((tabItem) => (
-                <TabItem
-                    key={tabItem.value}
-                    value={tabItem.value}
-                    label={tabItem.label}
-                    default={tabItem.default}
-                >
-                    <CodeBlock language="bash">{`pip install -qU ${tabItem.packageName}`}</CodeBlock>
-                    <CodeBlock language="python">{tabItem.text}</CodeBlock>
-                </TabItem>
-            ))}
-        </Tabs>
-    );
-}
+    const modelOptions = tabItems
+    .filter((item) => !item.shouldHide)
+    .map((item) => ({
+      value: item.value,
+      label: item.label,
+      text: item.text,
+      packageName: item.packageName,
+    }));
+
+const selectedOption = modelOptions.find(
+  (option) => option.value === selectedModel
+);
+
+return (
+    <div>
+      <CustomDropdown
+        selectedOption={selectedOption}
+        options={modelOptions}
+        onSelect={setSelectedModel}
+        modelType="vectorstore"
+      />
+
+      <CodeBlock language="bash">
+        {`pip install -qU ${selectedOption.packageName}`}
+      </CodeBlock>
+      <CodeBlock language="python">
+        {selectedOption.text}
+      </CodeBlock>
+    </div>
+  );
+  }