added teams connector

web/src/app/admin/connectors/teams/page.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import * as Yup from "yup";
+import { TrashIcon, TeamsIcon } from "@/components/icons/icons"; // Make sure you have a Document360 icon
+import { fetcher } from "@/lib/fetcher";
+import useSWR, { useSWRConfig } from "swr";
+import { LoadingAnimation } from "@/components/Loading";
+import { HealthCheckBanner } from "@/components/health/healthcheck";
+import {
+  TeamsConfig,
+  TeamsCredentialJson,
+  ConnectorIndexingStatus,
+  Credential,
+} from "@/lib/types"; // Modify or create these types as required
+import { adminDeleteCredential, linkCredential } from "@/lib/credential";
+import { CredentialForm } from "@/components/admin/connectors/CredentialForm";
+import {
+  TextFormField,
+  TextArrayFieldBuilder,
+} from "@/components/admin/connectors/Field";
+import { ConnectorsTable } from "@/components/admin/connectors/table/ConnectorsTable";
+import { ConnectorForm } from "@/components/admin/connectors/ConnectorForm";
+import { usePublicCredentials } from "@/lib/hooks";
+import { AdminPageTitle } from "@/components/admin/Title";
+import { Card, Text, Title } from "@tremor/react";
+
+const MainSection = () => {
+  const { mutate } = useSWRConfig();
+  const {
+    data: connectorIndexingStatuses,
+    isLoading: isConnectorIndexingStatusesLoading,
+    error: isConnectorIndexingStatusesError,
+  } = useSWR<ConnectorIndexingStatus<any, any>[]>(
+    "/api/manage/admin/connector/indexing-status",
+    fetcher
+  );
+
+  const {
+    data: credentialsData,
+    isLoading: isCredentialsLoading,
+    error: isCredentialsError,
+    refreshCredentials,
+  } = usePublicCredentials();
+
+  if (
+    (!connectorIndexingStatuses && isConnectorIndexingStatusesLoading) ||
+    (!credentialsData && isCredentialsLoading)
+  ) {
+    return <LoadingAnimation text="Loading" />;
+  }
+
+  if (isConnectorIndexingStatusesError || !connectorIndexingStatuses) {
+    return <div>Failed to load connectors</div>;
+  }
+
+  if (isCredentialsError || !credentialsData) {
+    return <div>Failed to load credentials</div>;
+  }
+
+  const teamsConnectorIndexingStatuses: ConnectorIndexingStatus<
+    TeamsConfig,
+    TeamsCredentialJson
+  >[] = connectorIndexingStatuses.filter(
+    (connectorIndexingStatus) =>
+      connectorIndexingStatus.connector.source === "teams"
+  );
+
+  const teamsCredential: Credential<TeamsCredentialJson> | undefined =
+    credentialsData.find(
+      (credential) => credential.credential_json?.aad_client_id
+    );
+
+  return (
+    <>
+      <Text>
+        The Teams connector allows you to index and search through your
+        Teams channels. Once setup, all messages from the channels contained 
+        in the specified teams will be queryable within Danswer.
+      </Text>
+
+      <Title className="mb-2 mt-6 ml-auto mr-auto">
+        Step 1: Provide Teams credentials
+      </Title>
+      {teamsCredential ? (
+        <>
+          <div className="flex mb-1 text-sm">
+            <Text className="my-auto">Existing Azure AD Client ID: </Text>
+            <Text className="ml-1 italic my-auto">
+              {teamsCredential.credential_json.aad_client_id}
+            </Text>
+            <button
+              className="ml-1 hover:bg-hover rounded p-1"
+              onClick={async () => {
+                await adminDeleteCredential(teamsCredential.id);
+                refreshCredentials();
+              }}
+            >
+              <TrashIcon />
+            </button>
+          </div>
+        </>
+      ) : (
+        <>
+          <Text className="mb-2">
+            As a first step, please provide Application (client) ID, Directory
+            (tenant) ID, and Client Secret. You can follow the guide{" "}
+            <a
+              target="_blank"
+              href="https://docs.danswer.dev/connectors/teams"
+              className="text-link"
+            >
+              here
+            </a>{" "}
+            to create an Azure AD application and obtain these values.
+          </Text>
+          <Card className="mt-2">
+            <CredentialForm<TeamsCredentialJson>
+              formBody={
+                <>
+                  <TextFormField
+                    name="aad_client_id"
+                    label="Application (client) ID:"
+                  />
+                  <TextFormField
+                    name="aad_directory_id"
+                    label="Directory (tenant) ID:"
+                  />
+                  <TextFormField
+                    name="aad_client_secret"
+                    label="Client Secret:"
+                    type="password"
+                  />
+                </>
+              }
+              validationSchema={Yup.object().shape({
+                aad_client_id: Yup.string().required(
+                  "Please enter your Application (client) ID"
+                ),
+                aad_directory_id: Yup.string().required(
+                  "Please enter your Directory (tenant) ID"
+                ),
+                aad_client_secret: Yup.string().required(
+                  "Please enter your Client Secret"
+                ),
+              })}
+              initialValues={{
+                aad_client_id: "",
+                aad_directory_id: "",
+                aad_client_secret: "",
+              }}
+              onSubmit={(isSuccess) => {
+                if (isSuccess) {
+                  refreshCredentials();
+                }
+              }}
+            />
+          </Card>
+        </>
+      )}
+
+      <Title className="mb-2 mt-6 ml-auto mr-auto">
+        Step 2: Manage Teams Connector
+      </Title>
+
+      {teamsConnectorIndexingStatuses.length > 0 && (
+        <>
+          <Text className="mb-2">
+            The latest messages from the specified teams are
+            fetched every 10 minutes.
+          </Text>
+          <div className="mb-2">
+            <ConnectorsTable<TeamsConfig, TeamsCredentialJson>
+              connectorIndexingStatuses={teamsConnectorIndexingStatuses}
+              liveCredential={teamsCredential}
+              getCredential={(credential) =>
+                credential.credential_json.aad_directory_id
+              }
+              onUpdate={() =>
+                mutate("/api/manage/admin/connector/indexing-status")
+              }
+              onCredentialLink={async (connectorId) => {
+                if (teamsCredential) {
+                  await linkCredential(connectorId, teamsCredential.id);
+                  mutate("/api/manage/admin/connector/indexing-status");
+                }
+              }}
+              specialColumns={[
+                {
+                  header: "Connectors",
+                  key: "connectors",
+                  getValue: (ccPairStatus) => {
+                    const connectorConfig =
+                      ccPairStatus.connector.connector_specific_config;
+                    return `${connectorConfig.teams}`;
+                  },
+                },
+              ]}
+              includeName
+            />
+          </div>
+        </>
+      )}
+
+      {teamsCredential ? (
+        <Card className="mt-4">
+          <ConnectorForm<TeamsConfig>
+            nameBuilder={(values) =>
+              values.teams && values.teams.length > 0
+                ? `Teams-${values.teams.join("-")}`
+                : "Teams"
+            }
+            ccPairNameBuilder={(values) =>
+              values.teams && values.teams.length > 0
+                ? `Teams-${values.teams.join("-")}`
+                : "Teams"
+            }
+            source="teams"
+            inputType="poll"
+            // formBody={<></>}
+            formBodyBuilder={TextArrayFieldBuilder({
+              name: "teams",
+              label: "Teams:",
+              subtext:
+                "Specify 0 or more Teams to index.  " +
+                "For example, specifying the Team 'Support' for the 'danswerai' Org will cause  " +
+                "us to only index messages sent in channels belonging to the 'Support' Team. " +
+                "If no Teams are specified, all Teams in your organization will be indexed.",
+            })}
+            validationSchema={Yup.object().shape({
+              teams: Yup.array()
+                .of(Yup.string().required("Team names must be strings"))
+                .required(),
+            })}
+            initialValues={{
+              teams: [],
+            }}
+            credentialId={teamsCredential.id}
+            refreshFreq={10 * 60} // 10 minutes
+          />
+        </Card>
+      ) : (
+        <Text>
+          Please provide all Azure info in Step 1 first! Once you&apos;re done
+          with that, you can then specify which teams you want to
+          make searchable.
+        </Text>
+      )}
+    </>
+  );
+};
+
+export default function Page() {
+  return (
+    <div className="mx-auto container">
+      <div className="mb-4">
+        <HealthCheckBanner />
+      </div>
+
+      <AdminPageTitle icon={<TeamsIcon size={32} />} title="Teams" />
+
+      <MainSection />
+    </div>
+  );
+}

web/src/components/icons/icons.tsx

@@ -51,6 +51,7 @@ import document360Icon from "../../../public/Document360.png";
 import googleSitesIcon from "../../../public/GoogleSites.png";
 import zendeskIcon from "../../../public/Zendesk.svg";
 import sharepointIcon from "../../../public/Sharepoint.png";
+import teamsIcon from "../../../public/Teams.png";
 import { FaRobot } from "react-icons/fa";
 
 interface IconProps {
@@ -526,6 +527,18 @@ export const SharepointIcon = ({
   </div>
 );
 
+export const TeamsIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => (
+  <div
+    style={{ width: `${size}px`, height: `${size}px` }}
+    className={`w-[${size}px] h-[${size}px] ` + className}
+  >
+    <Image src={teamsIcon} alt="Logo" width="96" height="96" />
+  </div>
+);
+
 export const GongIcon = ({
   size = 16,
   className = defaultTailwindCSS,

web/src/lib/sources.ts

@@ -19,6 +19,7 @@ import {
   ProductboardIcon,
   RequestTrackerIcon,
   SharepointIcon,
+  TeamsIcon,
   SlabIcon,
   SlackIcon,
   ZendeskIcon,
@@ -154,6 +155,11 @@ const SOURCE_METADATA_MAP: SourceMap = {
     displayName: "Sharepoint",
     category: SourceCategory.AppConnection,
   },
+  teams: {
+    icon: TeamsIcon,
+    displayName: "Teams",
+    category: SourceCategory.AppConnection,
+  },
   requesttracker: {
     icon: RequestTrackerIcon,
     displayName: "Request Tracker",

web/src/lib/types.ts

@@ -33,6 +33,7 @@ export type ValidSources =
   | "google_sites"
   | "loopio"
   | "sharepoint"
+  | "teams"
   | "zendesk";
 
 export type ValidInputTypes = "load_state" | "poll" | "event";
@@ -110,6 +111,10 @@ export interface SharepointConfig {
   sites?: string[];
 }
 
+export interface TeamsConfig {
+  teams?: string[];
+}
+
 export interface ProductboardConfig {}
 
 export interface SlackConfig {
@@ -314,6 +319,12 @@ export interface SharepointCredentialJson {
   aad_directory_id: string;
 }
 
+export interface TeamsCredentialJson {
+  aad_client_id: string;
+  aad_client_secret: string;
+  aad_directory_id: string;
+}
+
 // DELETION
 
 export interface DeletionAttemptSnapshot {