docs: dropdowns for embeddings and vector stores (#28713)

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/>"

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/>"

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">

docs/src/theme/EmbeddingTabs.js

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
 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 (
+  const modelOptions = tabItems
-        <Tabs groupId="modelTabs">
+  .filter((item) => !item.shouldHide)
-            {tabItems
+  .map((item) => ({
-                .filter((tabItem) => !tabItem.shouldHide)
+    value: item.value,
-                .map((tabItem) => {
+    label: item.label,
-                    const apiKeyText = tabItem.apiKeyName ? `import getpass\n\nos.environ["${tabItem.apiKeyName}"] = getpass.getpass()` : '';
+    text: item.text,
-                    return (
+    apiKeyName: item.apiKeyName,
-                        <TabItem
+    apiKeyText: item.apiKeyText,
-                            value={tabItem.value}
+    packageName: item.packageName,
-                            label={tabItem.label}
+  }));
-                            default={tabItem.default}
+
-                        >
+const selectedOption = modelOptions.find(
-                            <CodeBlock language="bash">{`pip install -qU ${tabItem.packageName}`}</CodeBlock>              
+  (option) => option.value === selectedModel
-                            <CodeBlock language="python">{apiKeyText + (apiKeyText ? "\n\n" : '') + tabItem.text}</CodeBlock>
+);
-                        </TabItem>
+
-                    );
+let apiKeyText = "";
-                })
+if (selectedOption.apiKeyName) {
-            }
+  apiKeyText = `import getpass
-        </Tabs>
+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>
+);
+}

docs/src/theme/VectorStoreTabs.js

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
 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 (
+    const modelOptions = tabItems
-        <Tabs groupId="vectorStoreTabs">
+    .filter((item) => !item.shouldHide)
-            {tabItems.map((tabItem) => (
+    .map((item) => ({
-                <TabItem
+      value: item.value,
-                    key={tabItem.value}
+      label: item.label,
-                    value={tabItem.value}
+      text: item.text,
-                    label={tabItem.label}
+      packageName: item.packageName,
-                    default={tabItem.default}
+    }));
-                >
+
-                    <CodeBlock language="bash">{`pip install -qU ${tabItem.packageName}`}</CodeBlock>
+const selectedOption = modelOptions.find(
-                    <CodeBlock language="python">{tabItem.text}</CodeBlock>
+  (option) => option.value === selectedModel
-                </TabItem>
+);
-            ))}
+
-        </Tabs>
+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>
+  );
+  }