docs[patch]: Adds components for prereqs, compatibility, fix chat model tab issue (#24585)

Added to `docs/how_to/tools_runtime` as a proof of concept, will apply
everywhere if we like.

A bit more compact than the default callouts, will help standardize the
layout of our pages since we frequently use these boxes.

<img width="1088" alt="Screenshot 2024-07-23 at 4 49 02 PM"
src="https://github.com/user-attachments/assets/7380801c-e092-4d31-bcd8-3652ee05f29e">

docs/docs/how_to/tool_runtime.ipynb

@@ -6,26 +6,20 @@
    "source": [
     "# How to pass run time values to tools\n",
     "\n",
-    ":::info Prerequisites\n",
+    "import Prerequisites from \"@theme/Prerequisites\";\n",
+    "import Compatibility from \"@theme/Compatibility\";\n",
     "\n",
-    "This guide assumes familiarity with the following concepts:\n",
+    "<Prerequisites titlesAndLinks={[\n",
-    "- [Chat models](/docs/concepts/#chat-models)\n",
+    "  [\"Chat models\", \"/docs/concepts/#chat-models\"],\n",
-    "- [LangChain Tools](/docs/concepts/#tools)\n",
+    "  [\"LangChain Tools\", \"/docs/concepts/#tools\"],\n",
-    "- [How to create tools](/docs/how_to/custom_tools)\n",
+    "  [\"How to create tools\", \"/docs/how_to/custom_tools\"],\n",
-    "- [How to use a model to call tools](/docs/how_to/tool_calling)\n",
+    "  [\"How to use a model to call tools\", \"/docs/how_to/tool_calling\"],\n",
-    ":::\n",
+    "]} />\n",
     "\n",
-    ":::info Using with LangGraph\n",
     "\n",
-    "If you're using LangGraph, please refer to [this how-to guide](https://langchain-ai.github.io/langgraph/how-tos/pass-run-time-values-to-tools/)\n",
+    "<Compatibility packagesAndVersions={[\n",
-    "which shows how to create an agent that keeps track of a given user's favorite pets.\n",
+    "  [\"langchain-core\", \"0.2.21\"],\n",
-    ":::\n",
+    "]} />\n",
-    "\n",
-    ":::caution Added in `langchain-core==0.2.21`\n",
-    "\n",
-    "Must have `langchain-core>=0.2.21` to use this functionality.\n",
-    "\n",
-    ":::\n",
     "\n",
     "You may need to bind values to a tool that are only known at runtime. For example, the tool logic may require using the ID of the user who made the request.\n",
     "\n",
@@ -33,7 +27,13 @@
     "\n",
     "Instead, the LLM should only control the parameters of the tool that are meant to be controlled by the LLM, while other parameters (such as user ID) should be fixed by the application logic.\n",
     "\n",
-    "This how-to guide shows you how to prevent the model from generating certain tool arguments and injecting them in directly at runtime."
+    "This how-to guide shows you how to prevent the model from generating certain tool arguments and injecting them in directly at runtime.\n",
+    "\n",
+    ":::info Using with LangGraph\n",
+    "\n",
+    "If you're using LangGraph, please refer to [this how-to guide](https://langchain-ai.github.io/langgraph/how-tos/pass-run-time-values-to-tools/)\n",
+    "which shows how to create an agent that keeps track of a given user's favorite pets.\n",
+    ":::"
    ]
   },
   {
@@ -597,9 +597,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "poetry-venv-311",
+   "display_name": "Python 3",
    "language": "python",
-   "name": "poetry-venv-311"
+   "name": "python3"
   },
   "language_info": {
    "codemirror_mode": {
@@ -611,7 +611,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.9"
+   "version": "3.10.5"
   }
  },
  "nbformat": 4,

docs/src/theme/ChatModelTabs.js

@@ -181,6 +181,7 @@ import os
 os.environ["${tabItem.apiKeyName}"] = getpass.getpass()`;
           return (
             <TabItem
+              key={tabItem.value}
               value={tabItem.value}
               label={tabItem.label}
               default={tabItem.default}

docs/src/theme/Compatibility.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Admonition from '@theme/Admonition';
+
+export default function Compatibility({ packagesAndVersions }) {
+    return (
+        <Admonition type="caution" title="Compatibility" icon="📦">
+            <span style={{fontSize: "15px"}}>
+              The code in this guide requires{" "}
+              {packagesAndVersions.map(([pkg, version], i) => {
+                return (
+                  <code key={`compatiblity-map${pkg}>=${version}-${i}`}>{`${pkg}>=${version}`}</code>
+                );
+              })}.
+              Please ensure you have the correct packages installed.
+            </span>
+        </Admonition>
+    );
+}

docs/src/theme/Prerequisites.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Admonition from '@theme/Admonition';
+
+export default function Prerequisites({ titlesAndLinks }) {
+    return (
+        <Admonition type="info" title="Prerequisites" icon="📚">
+            <ul style={{ fontSize: "15px", lineHeight: "1.5em" }}>
+                {titlesAndLinks.map(([title, link], i) => {
+                    return (
+                        <li key={`prereq-${link.replace(/\//g, "")}-${i}`}>
+                          <a href={link}>{title}</a>
+                        </li>
+                    );
+                })}
+            </ul>
+        </Admonition>
+    );
+}