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/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>
+    );
+}