docs: v0.2 docs in master (#21438)

current python.langchain.com is building from branch `v0.1`. Iterate on
v0.2 docs here.

---------

Signed-off-by: Weichen Xu <weichen.xu@databricks.com>
Signed-off-by: Rahul Tripathi <rauhl.psit.ec@gmail.com>
Co-authored-by: Harrison Chase <hw.chase.17@gmail.com>
Co-authored-by: jacoblee93 <jacoblee93@gmail.com>
Co-authored-by: Leonid Ganeline <leo.gan.57@gmail.com>
Co-authored-by: Leonid Kuligin <lkuligin@yandex.ru>
Co-authored-by: Averi Kitsch <akitsch@google.com>
Co-authored-by: Nuno Campos <nuno@langchain.dev>
Co-authored-by: Nuno Campos <nuno@boringbits.io>
Co-authored-by: Bagatur <22008038+baskaryan@users.noreply.github.com>
Co-authored-by: Eugene Yurtsev <eyurtsev@gmail.com>
Co-authored-by: Martín Gotelli Ferenaz <martingotelliferenaz@gmail.com>
Co-authored-by: Fayfox <admin@fayfox.com>
Co-authored-by: Eugene Yurtsev <eugene@langchain.dev>
Co-authored-by: Dawson Bauer <105886620+djbauer2@users.noreply.github.com>
Co-authored-by: Ravindu Somawansa <ravindu.somawansa@gmail.com>
Co-authored-by: Dhruv Chawla <43818888+Dominastorm@users.noreply.github.com>
Co-authored-by: ccurme <chester.curme@gmail.com>
Co-authored-by: Bagatur <baskaryan@gmail.com>
Co-authored-by: WeichenXu <weichen.xu@databricks.com>
Co-authored-by: Benito Geordie <89472452+benitoThree@users.noreply.github.com>
Co-authored-by: kartikTAI <129414343+kartikTAI@users.noreply.github.com>
Co-authored-by: Kartik Sarangmath <kartik@thirdai.com>
Co-authored-by: Sevin F. Varoglu <sfvaroglu@octoml.ai>
Co-authored-by: MacanPN <martin.triska@gmail.com>
Co-authored-by: Prashanth Rao <35005448+prrao87@users.noreply.github.com>
Co-authored-by: Hyeongchan Kim <kozistr@gmail.com>
Co-authored-by: sdan <git@sdan.io>
Co-authored-by: Guangdong Liu <liugddx@gmail.com>
Co-authored-by: Rahul Triptahi <rahul.psit.ec@gmail.com>
Co-authored-by: Rahul Tripathi <rauhl.psit.ec@gmail.com>
Co-authored-by: pjb157 <84070455+pjb157@users.noreply.github.com>
Co-authored-by: Eun Hye Kim <ehkim1440@gmail.com>
Co-authored-by: kaijietti <43436010+kaijietti@users.noreply.github.com>
Co-authored-by: Pengcheng Liu <pcliu.fd@gmail.com>
Co-authored-by: Tomer Cagan <tomer@tomercagan.com>
Co-authored-by: Christophe Bornet <cbornet@hotmail.com>

docs/src/css/custom.css

@@ -36,7 +36,7 @@
   --ifm-code-font-size: 95%;
   --ifm-font-family-base: 'Public Sans';
   --ifm-menu-link-padding-horizontal: 0.5rem;
-  --ifm-menu-link-padding-vertical: 0.375rem;
+  --ifm-menu-link-padding-vertical: 0.5rem;
   --doc-sidebar-width: 275px !important;
 }
 
@@ -197,6 +197,10 @@ nav, h1, h2, h3, h4 {
   opacity: 0.5;
 }
 
+.markdown {
+  line-height: 2em;
+}
+
 .markdown > h2 {
   margin-top: 2rem;
   border-bottom-color: var(--ifm-color-primary);
@@ -243,3 +247,17 @@ nav, h1, h2, h3, h4 {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
+
+.announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
+  height:40px !important;
+  font-size: 20px !important;
+}
+
+[data-theme='dark'] .announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
+  background-color: #1b1b1b;
+  color: #fff;
+}
+
+[data-theme='dark'] .announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module button {
+  color: #fff;
+}

docs/src/pages/index.js

@@ -9,7 +9,8 @@
 
 import React from "react";
 import { Redirect } from "@docusaurus/router";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 
 export default function Home() {
-  return <Redirect to="docs/get_started/introduction" />;
+  return <Redirect to={useBaseUrl("/docs/introduction/")} />;
 }

docs/src/theme/ChatModelTabs.js

@@ -4,21 +4,6 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import CodeBlock from "@theme-original/CodeBlock";
 
-function Setup({ apiKeyName, packageName }) {
-  const apiKeyText = `import getpass
-import os
-
-os.environ["${apiKeyName}"] = getpass.getpass()`;
-  return (
-    <>
-      <h5>Install dependencies</h5>
-      <CodeBlock language="bash">{`pip install -qU ${packageName}`}</CodeBlock>
-      <h5>Set environment variables</h5>
-      <CodeBlock language="python">{apiKeyText}</CodeBlock>
-    </>
-  );
-}
-
 /**
  * @typedef {Object} ChatModelTabsProps - Component props.
  * @property {string} [openaiParams] - Parameters for OpenAI chat model. Defaults to `model="gpt-3.5-turbo-0125"`
@@ -146,19 +131,23 @@ export default function ChatModelTabs(props) {
     <Tabs groupId="modelTabs">
       {tabItems
         .filter((tabItem) => !tabItem.shouldHide)
-        .map((tabItem) => (
-          <TabItem
-            value={tabItem.value}
-            label={tabItem.label}
-            default={tabItem.default}
-          >
-            <Setup
-              apiKeyName={tabItem.apiKeyName}
-              packageName={tabItem.packageName}
-            />
-            <CodeBlock language="python">{tabItem.text}</CodeBlock>
-          </TabItem>
-        ))}
+        .map((tabItem) => {
+          const apiKeyText = `import getpass
+import os
+
+os.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 + "\n\n" + tabItem.text}</CodeBlock>
+            </TabItem>
+          );
+        })
+      }
     </Tabs>
   );
 }

docs/src/theme/DocVersionBanner/index.js

@@ -0,0 +1,201 @@
+// Swizzled class to show custom text for canary version.
+// Should be removed in favor of the stock implementation.
+
+import React from 'react';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+import {
+  useActivePlugin,
+  useDocVersionSuggestions,
+} from '@docusaurus/plugin-content-docs/client';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  useDocsPreferredVersion,
+  useDocsVersion,
+} from '@docusaurus/theme-common/internal';
+function UnreleasedVersionLabel({siteTitle, versionMetadata}) {
+  return (
+    <Translate
+      id="theme.docs.versions.unreleasedVersionLabel"
+      description="The label used to tell the user that he's browsing an unreleased doc version"
+      values={{
+        siteTitle,
+        versionLabel: <b>{versionMetadata.label}</b>,
+      }}>
+      {
+        'This is unreleased documentation for {siteTitle}\'s {versionLabel} version.'
+      }
+    </Translate>
+  );
+}
+function UnmaintainedVersionLabel({siteTitle, versionMetadata}) {
+  return (
+    <Translate
+      id="theme.docs.versions.unmaintainedVersionLabel"
+      description="The label used to tell the user that he's browsing an unmaintained doc version"
+      values={{
+        siteTitle,
+        versionLabel: <b>{versionMetadata.label}</b>,
+      }}>
+      {
+        'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.'
+      }
+    </Translate>
+  );
+}
+const BannerLabelComponents = {
+  unreleased: UnreleasedVersionLabel,
+  unmaintained: UnmaintainedVersionLabel,
+};
+function BannerLabel(props) {
+  const BannerLabelComponent =
+    BannerLabelComponents[props.versionMetadata.banner];
+  return <BannerLabelComponent {...props} />;
+}
+function LatestVersionSuggestionLabel({versionLabel, to, onClick}) {
+  return (
+    <Translate
+      id="theme.docs.versions.latestVersionSuggestionLabel"
+      description="The label used to tell the user to check the latest version"
+      values={{
+        versionLabel,
+        latestVersionLink: (
+          <b>
+            <Link to={to} onClick={onClick}>
+              <Translate
+                id="theme.docs.versions.latestVersionLinkLabel"
+                description="The label used for the latest version suggestion link label">
+                this version
+              </Translate>
+            </Link>
+          </b>
+        ),
+      }}>
+      {
+        'For the current stable version, see {latestVersionLink} ({versionLabel}).'
+      }
+    </Translate>
+  );
+}
+function DocVersionBannerEnabled({className, versionMetadata}) {
+  const {
+    siteConfig: {title: siteTitle},
+  } = useDocusaurusContext();
+  const {pluginId} = useActivePlugin({failfast: true});
+  const getVersionMainDoc = (version) =>
+    version.docs.find((doc) => doc.id === version.mainDocId);
+  const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
+  const {latestDocSuggestion, latestVersionSuggestion} =
+    useDocVersionSuggestions(pluginId);
+  // Try to link to same doc in latest version (not always possible), falling
+  // back to main doc of latest version
+  const latestVersionSuggestedDoc =
+    latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
+  return (
+    <div
+      className={clsx(
+        className,
+        ThemeClassNames.docs.docVersionBanner,
+        'alert alert--warning margin-bottom--md',
+      )}
+      role="alert">
+      <div>
+        <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
+      </div>
+      <div className="margin-top--md">
+        <LatestVersionSuggestionLabel
+          versionLabel={latestVersionSuggestion.label}
+          to={latestVersionSuggestedDoc.path}
+          onClick={() => savePreferredVersionName(latestVersionSuggestion.name)}
+        />
+      </div>
+    </div>
+  );
+}
+
+function LatestDocVersionBanner({className, versionMetadata}) {
+  const {
+    siteConfig: {title: siteTitle},
+  } = useDocusaurusContext();
+  const {pluginId} = useActivePlugin({failfast: true});
+  const getVersionMainDoc = (version) =>
+    version.docs.find((doc) => doc.id === version.mainDocId);
+  const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
+  const {latestDocSuggestion, latestVersionSuggestion} =
+    useDocVersionSuggestions(pluginId);
+  // Try to link to same doc in latest version (not always possible), falling
+  // back to main doc of latest version
+  const latestVersionSuggestedDoc =
+    latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
+  const canaryPath = `/docs/0.2.x/${latestVersionSuggestedDoc.path.slice("/docs/".length)}`;
+  return (
+    <div
+      className={clsx(
+        className,
+        ThemeClassNames.docs.docVersionBanner,
+        'alert alert--info margin-bottom--md',
+      )}
+      role="alert">
+      <div>
+        <Translate
+          id="theme.docs.versions.unmaintainedVersionLabel"
+          description="The label used to encourage the user to view the experimental 0.2.x version"
+          values={{
+            siteTitle,
+            versionLabel: <b>{versionMetadata.label}</b>,
+          }}>
+          {
+            'This is a stable version of documentation for {siteTitle}\'s version {versionLabel}.'
+          }
+        </Translate>
+      </div>
+      <div className="margin-top--md">
+        <Translate
+          id="theme.docs.versions.latestVersionSuggestionLabel"
+          description="The label used to tell the user to check the experimental version"
+          values={{
+            versionLabel: <b>{versionMetadata.label}</b>,
+            latestVersionLink: (
+              <b>
+                <Link to={canaryPath} onClick={() => savePreferredVersionName("0.2.x")}>
+                  <Translate
+                    id="theme.docs.versions.latestVersionLinkLabel"
+                    description="The label used for the latest version suggestion link label">
+                    this experimental version
+                  </Translate>
+                </Link>
+              </b>
+            ),
+          }}>
+          {
+            'You can also check out {latestVersionLink} for an updated experience.'
+          }
+        </Translate>
+      </div>
+    </div>
+  );
+}
+
+export default function DocVersionBanner({className}) {
+  const versionMetadata = useDocsVersion();
+  if (versionMetadata.banner) {
+    return (
+      <DocVersionBannerEnabled
+        className={className}
+        versionMetadata={versionMetadata}
+      />
+    );
+  } else if (versionMetadata.isLast) {
+    // Uncomment when we are ready to direct people to new build
+    // return (
+    //   <LatestDocVersionBanner
+    //     className={className}
+    //     versionMetadata={versionMetadata}
+    //   />
+    // );
+    return null;
+  }
+  return null;
+}

docs/src/theme/PrerequisiteLinks.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { marked } from "marked";
+import DOMPurify from "isomorphic-dompurify";
+import Admonition from '@theme/Admonition';
+
+export default function PrerequisiteLinks({ content }) {
+  return (
+    <Admonition type="info" title="Prerequisites">
+      <div style={{ marginTop: "8px" }}>
+        This guide will assume familiarity with the following concepts:
+      </div>
+      <div style={{ marginTop: "16px" }}
+        dangerouslySetInnerHTML={{
+          __html: DOMPurify.sanitize(marked.parse(content))
+        }} 
+      />
+    </Admonition>
+  );
+}