From aec02330fba38c116e858b74aca330d0d2813379 Mon Sep 17 00:00:00 2001 From: Alex Villarreal <716334+alexvy86@users.noreply.github.com> Date: Mon, 14 Oct 2024 13:59:44 -0500 Subject: [PATCH] refactor(ai-collab): Cleanup (#22794) ## Description Follow-up to https://github.com/microsoft/FluidFramework/pull/22732, with a bit of cleanup from PR suggestions. - Removes unnecessary config files and dependencies. - Cleans up npm scripts. - Adds the ESM output to code coverage configuration. - Updates README in the sample app with basic instructions on how to start it. --- examples/apps/ai-collab/.mocharc.cjs | 17 -------- examples/apps/ai-collab/README.md | 47 +++++++++++++++++------ examples/apps/ai-collab/package.json | 27 +------------ examples/apps/ai-collab/tsdoc.json | 4 -- packages/framework/ai-collab/package.json | 6 ++- pnpm-lock.yaml | 15 -------- 6 files changed, 41 insertions(+), 75 deletions(-) delete mode 100644 examples/apps/ai-collab/.mocharc.cjs delete mode 100644 examples/apps/ai-collab/tsdoc.json diff --git a/examples/apps/ai-collab/.mocharc.cjs b/examples/apps/ai-collab/.mocharc.cjs deleted file mode 100644 index adc57b4616e..00000000000 --- a/examples/apps/ai-collab/.mocharc.cjs +++ /dev/null @@ -1,17 +0,0 @@ -/*! - * Copyright (c) Microsoft Corporation and contributors. All rights reserved. - * Licensed under the MIT License. - */ - -"use strict"; - -const getFluidTestMochaConfig = require("@fluid-internal/mocha-test-setup/mocharc-common"); - -const packageDir = __dirname; -const config = getFluidTestMochaConfig(packageDir); -config.spec = process.env.MOCHA_SPEC ?? "lib/test"; -// TODO: figure out why this package needs the --exit flag, tests might not be cleaning up correctly after themselves. -// AB#7856 -config.exit = true; - -module.exports = config; diff --git a/examples/apps/ai-collab/README.md b/examples/apps/ai-collab/README.md index c77eade39f3..5ae2277d3c5 100644 --- a/examples/apps/ai-collab/README.md +++ b/examples/apps/ai-collab/README.md @@ -1,23 +1,48 @@ # @fluid-example/ai-collab -WIP +This is an example app that showcases the `@fluid-experimental/ai-collab` package to interact with an LLM (Large Language +Model). -## Known Issues and Limitations +By default it uses Tinylicious as the server, but you can also use SharePoint embedded. +Steps to do that are detailed below. -WIP + - +## Pre-requisites - - +In order for the app to showcase the LLM interaction, you need to provide an OpenAI API key. +Copy the `.env.example` file, rename the copy to `.env`, and replace the value of the `OPEN_AI_KEY` variable with your +API key. +Note that the app leverages the gpt-o4 model and thus an API key for a paid account is required. +If you provide an API key for a free account, the app will still render, but requesting AI assistance will fail. -**NOTE: This package is an example leveraging the [Fluid Framework](https://fluidframework.com).** -**It is intended only as an example, and is not intended for public use.** -**We make no stability guarantees regarding this library and its APIs.** +## Getting Started - +You can run this example using the following steps: - +1. Enable [corepack](https://nodejs.org/docs/latest-v16.x/api/corepack.html) by running `corepack enable`. +1. Run `pnpm install` and `pnpm run build:fast --nolint` from the `FluidFramework` root directory. + - For an even faster build, you can add the package name to the build command, like this: + `pnpm run build:fast --nolint @fluid-example/ai-collab` +1. Start a Tinylicious server by running `pnpm start:server` from this directory. +1. In a separate terminal also from this directory, run `pnpm next:dev` and open http://localhost:3000/task-list in a + web browser to see the app running. + +### Using SharePoint embedded instead of tinylicious + +1. Go to [page.tsx](src/app/tasks-list/page.tsx), look for comment +`// Uncomment the import line that corresponds to the server you want to use`, comment the line for tinylicious and +uncomment the line for SharePoint Embedded. +1. In the same `.env` file you created in the pre-requisites section, set the correct values for the following variables: + +- `NEXT_PUBLIC_SPE_CLIENT_ID` +- `NEXT_PUBLIC_SPE_CONTAINER_TYPE_ID` +- `NEXT_PUBLIC_SPE_ENTRA_TENANT_ID` + +You can get all of them through the [SharePoint Embedded for Visual Studio Code extension](https://learn.microsoft.com/en-us/sharepoint/dev/embedded/getting-started/spembedded-for-vscode). diff --git a/examples/apps/ai-collab/package.json b/examples/apps/ai-collab/package.json index 651ab343e8c..ed99cac358f 100644 --- a/examples/apps/ai-collab/package.json +++ b/examples/apps/ai-collab/package.json @@ -16,7 +16,7 @@ "scripts": { "build": "fluid-build . --task build", "build:compile": "fluid-build . --task compile", - "build:esnext": "tsc --project ./tsconfig.json && copyfiles -f ../../../common/build/build-common/src/esm/package.json ./lib", + "build:esnext": "tsc --project ./tsconfig.json", "check:biome": "biome check .", "check:format": "npm run check:biome", "clean": "rimraf --glob dist lib next-env.d.ts \"**/*.tsbuildinfo\" \"**/*.build.log\" _api-extractor-temp nyc", @@ -31,26 +31,6 @@ "next:start": "next start", "start:server": "tinylicious" }, - "c8": { - "all": true, - "cache-dir": "nyc/.cache", - "exclude": [ - "src/test/**/*.*ts", - "dist/test/**/*.*js" - ], - "exclude-after-remap": false, - "include": [ - "src/**/*.*ts", - "dist/**/*.*js" - ], - "report-dir": "nyc/report", - "reporter": [ - "cobertura", - "html", - "text" - ], - "temp-directory": "nyc/.nyc_output" - }, "dependencies": {}, "devDependencies": { "@azure/identity": "^4.4.1", @@ -77,13 +57,8 @@ "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@types/uuid": "^9.0.2", - "c8": "^8.0.1", - "concurrently": "^8.2.1", - "copyfiles": "^2.4.1", - "cross-env": "^7.0.3", "eslint": "~8.55.0", "fluid-framework": "workspace:^", - "moment": "^2.21.0", "mui": "^0.0.1", "next": "^14.2.8", "notistack": "^3.0.1", diff --git a/examples/apps/ai-collab/tsdoc.json b/examples/apps/ai-collab/tsdoc.json deleted file mode 100644 index ecb918da5cb..00000000000 --- a/examples/apps/ai-collab/tsdoc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json", - "extends": ["../../../common/build/build-common/tsdoc-base.json"] -} diff --git a/packages/framework/ai-collab/package.json b/packages/framework/ai-collab/package.json index e8ffa0eee70..8a767e4a68f 100644 --- a/packages/framework/ai-collab/package.json +++ b/packages/framework/ai-collab/package.json @@ -71,12 +71,14 @@ "cache-dir": "nyc/.cache", "exclude": [ "src/test/**/*.*ts", - "dist/test/**/*.*js" + "dist/test/**/*.*js", + "lib/test/**/*.*js" ], "exclude-after-remap": false, "include": [ "src/**/*.*ts", - "dist/**/*.*js" + "dist/**/*.*js", + "lib/**/*.*js" ], "report-dir": "nyc/report", "reporter": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7d28d953678..d77f1381bd9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -429,27 +429,12 @@ importers: '@types/uuid': specifier: ^9.0.2 version: 9.0.8 - c8: - specifier: ^8.0.1 - version: 8.0.1 - concurrently: - specifier: ^8.2.1 - version: 8.2.2 - copyfiles: - specifier: ^2.4.1 - version: 2.4.1 - cross-env: - specifier: ^7.0.3 - version: 7.0.3 eslint: specifier: ~8.55.0 version: 8.55.0 fluid-framework: specifier: workspace:^ version: link:../../../packages/framework/fluid-framework - moment: - specifier: ^2.21.0 - version: 2.30.1 mui: specifier: ^0.0.1 version: 0.0.1