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",
""
@@ -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",
""
@@ -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",
""
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",
""
@@ -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",
""
@@ -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",
""
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 (
- Select chat model:
+ Select {text}:
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 (
-
- {tabItems
- .filter((tabItem) => !tabItem.shouldHide)
- .map((tabItem) => {
- const apiKeyText = tabItem.apiKeyName ? `import getpass\n\nos.environ["${tabItem.apiKeyName}"] = getpass.getpass()` : '';
- return (
-
- {`pip install -qU ${tabItem.packageName}`}
- {apiKeyText + (apiKeyText ? "\n\n" : '') + tabItem.text}
-
- );
- })
- }
-
- );
- }
\ 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 (
+
+
+
+
+ {`pip install -qU ${selectedOption.packageName}`}
+
+
+ {apiKeyText ? apiKeyText + "\n\n" + selectedOption.text : selectedOption.text}
+
+
+);
+}
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 (
-
- {tabItems.map((tabItem) => (
-
- {`pip install -qU ${tabItem.packageName}`}
- {tabItem.text}
-
- ))}
-
- );
-}
+ 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 (
+
+
+
+
+ {`pip install -qU ${selectedOption.packageName}`}
+
+
+ {selectedOption.text}
+
+
+ );
+ }