wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-09-12 12:03:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into 911_sigin_captcha

Browse Source
This commit is contained in:
notmd
2023-01-29 23:34:04 +07:00
parent fb26a52c2c 61b2949122
commit 599d70962e
155 changed files with 6347 additions and 1905 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/.env
+3
View File
@@ -7,6 +7,9 @@ DATABASE_URL=postgres://postgres:postgres@localhost:5433/oasst_web
FASTAPI_URL=http://localhost:8080
FASTAPI_KEY=1234
# Used to expose the backend url to the clientside javascript
NEXT_PUBLIC_BACKEND_URL=$FASTAPI_URL
# A dev Auth Secret. Can be exposed if we never use this publicly.
NEXTAUTH_SECRET=O/M2uIbGj+lDD2oyNa8ax4jEOJqCPJzO53UbWShmq98=
website/.prettierignore
+4
View File
@@ -0,0 +1,4 @@
.eslintrc.json
tailwind.config.js
.storybook/*
public/mockServiceWorker.js
website/src/.prettierrc.json → website/.prettierrc.json
View File
website/.storybook/main.js
+6
View File
@@ -10,6 +10,7 @@ module.exports = {
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@chakra-ui/storybook-addon",
"storybook-addon-next-router",
],
framework: "@storybook/react",
core: {
@@ -23,7 +24,12 @@ module.exports = {
config.resolve.alias = {
...config.resolve.alias,
src: path.resolve(__dirname, "../src"),
styles: path.resolve(__dirname, "../styles"),
};
config.resolve.fallback = {
fs: false,
path: require.resolve('path-browserify'),
}
return config;
},
features: {
website/.storybook/preview.js
+50
View File
@@ -1,4 +1,38 @@
import "!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css";
import { RouterContext } from "next/dist/shared/lib/router-context";
import { initialize, mswDecorator } from "msw-storybook-addon";
import { rest } from "msw";
// Initialize MSW
initialize();
// Provide the MSW addon decorator globally
export const decorators = [mswDecorator];
const MOCK_VALID_LABELS= [
{
name: "spam",
display_text: "Seems to be intentionally low-quality or irrelevant",
help_text: null,
},
{
name: "fails_task",
display_text:
"Fails to follow the correct instruction / task",
help_text: null,
},
{
name: "not_appropriate",
display_text: "Inappropriate for customer assistant",
help_text: null,
},
{
name: "violence",
display_text:
"Encourages or fails to discourage violence/abuse/terrorism/self-harm",
help_text: null,
},
];
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
@@ -8,6 +42,22 @@ export const parameters = {
date: /Date$/,
},
},
nextRouter: {
Provider: RouterContext.Provider,
},
msw: {
handlers: {
labels: [
rest.get("/api/valid_labels", (req, res, ctx) => {
return res(
ctx.json({
valid_labels: MOCK_VALID_LABELS
})
);
}),
],
},
},
};
// Hacky solution to get Images in next to work
website/README.md
+67 -100
View File
@@ -2,8 +2,7 @@
## Purpose
This provides a comprehensive webapp interface for LAION's Open Assistant
project. Initially it will support:
This provides a comprehensive webapp interface for LAION's Open Assistant project. Initially it will support:
1. User registration using either Discord or Email.
1. Adding responses to incomplete Open Assistant tasks.
@@ -11,8 +10,7 @@ project. Initially it will support:
1. Viewing an activity leaderboard.
1. Tracking community wide updates.
This interface compliments the Discord bot and will give access to the same
underlying tasks.
This interface compliments the Discord bot and will give access to the same underlying tasks.
## Contributing
@@ -22,67 +20,54 @@ This website is built using:
1. [npm](https://www.npmjs.com/): The node package manager for building.
1. [React](https://reactjs.org/): The core frontend framework.
1. [Next.js](https://nextjs.org/): A React scaffolding framework to streamline
development.
1. [Prisma](https://www.prisma.io/): An ORM to interact with a web specific
[Postgres](https://www.postgresql.org/) database.
1. [NextAuth.js](https://next-auth.js.org/): A user authentication framework to
ensure we handle accounts with best practices.
1. [TailwindCSS](https://tailwindcss.com/): A general purpose framework for
styling any component.
1. [Chakra-UI](https://chakra-ui.com/): A wide collection of pre-built UI
components that generally look pretty good.
1. [Next.js](https://nextjs.org/): A React scaffolding framework to streamline development.
1. [Prisma](https://www.prisma.io/): An ORM to interact with a web specific [Postgres](https://www.postgresql.org/)
database.
1. [NextAuth.js](https://next-auth.js.org/): A user authentication framework to ensure we handle accounts with best
practices.
1. [TailwindCSS](https://tailwindcss.com/): A general purpose framework for styling any component.
1. [Chakra-UI](https://chakra-ui.com/): A wide collection of pre-built UI components that generally look pretty good.
### Set up your environment
To contribute to the website, make sure you have the following setup and
installed:
To contribute to the website, make sure you have the following setup and installed:
1. [NVM](https://github.com/nvm-sh/nvm): The Node Version Manager makes it easy
to ensure you have the right NodeJS version installed. Once installed, run
`nvm use 16` to use Node 16.x. The website is known to be stable with NodeJS
1. [NVM](https://github.com/nvm-sh/nvm): The Node Version Manager makes it easy to ensure you have the right NodeJS
version installed. Once installed, run `nvm use 16` to use Node 16.x. The website is known to be stable with NodeJS
version 16.x. This will install both Node and NPM.
1. [Docker](https://www.docker.com/): We use docker to simplify running
dependent services.
1. [Docker](https://www.docker.com/): We use docker to simplify running dependent services.
### Getting everything up and running
If you're doing active development we suggest the following workflow:
1. In one tab, navigate to the project root.
1. Run `docker compose up frontend-dev --build --attach-dependencies`. You can
optionally include `-d` to detach and later track the logs if desired.
1. Run `docker compose up frontend-dev --build --attach-dependencies`. You can optionally include `-d` to detach and
later track the logs if desired.
1. In another tab navigate to `${OPEN_ASSISTANT_ROOT/website`.
1. Run `npm ci`
1. Run `npx prisma db push` (This is also needed when you restart the docker
stack from scratch).
1. Run `npm run dev`. Now the website is up and running locally at
`http://localhost:3000`.
1. To create an account, login via the user using email authentication and
navigate to `http://localhost:1080`. Check the email listed and click the
log in link. You're now logged in and authenticated.
1. Run `npx prisma db push` (This is also needed when you restart the docker stack from scratch).
1. Run `npm run dev`. Now the website is up and running locally at `http://localhost:3000`.
1. To create an account, login via the user using email authentication and navigate to `http://localhost:1080`. Check
the email listed and click the log in link. You're now logged in and authenticated.
### Using debug user credentials
You can use the debug credentials provider to log in without fancy emails or
OAuth.
You can use the debug credentials provider to log in without fancy emails or OAuth.
1. This feature is automatically on in development mode, i.e. when you run
`npm run dev`. In case you want to do the same with a production build (for
example, the docker image), then run the website with environment variable
1. This feature is automatically on in development mode, i.e. when you run `npm run dev`. In case you want to do the
same with a production build (for example, the docker image), then run the website with environment variable
`DEBUG_LOGIN=true`.
1. Use the `Login` button in the top right to go to the login page.
1. You should see a section for debug credentials. Enter any username you wish,
you will be logged in as that user.
1. You should see a section for debug credentials. Enter any username you wish, you will be logged in as that user.
### Using Storybook
To develop components using [Storybook](https://storybook.js.org/) run
`npm run storybook`. Then navigate to in your browser to
`http://localhost:6006`.
To develop components using [Storybook](https://storybook.js.org/) run `npm run storybook`. Then navigate to in your
browser to `http://localhost:6006`.
To create a new story create a file named `[componentName].stories.js`. An
example how such a story could look like, see `Header.stories.jsx`.
To create a new story create a file named `[componentName].stories.js`. An example how such a story could look like, see
`Header.stories.jsx`.
## Code Layout
@@ -90,12 +75,10 @@ example how such a story could look like, see `Header.stories.jsx`.
All react code is under `src/` with a few sub directories:
1. `pages/`: All pages a user could navigate too and API URLs which are under
`pages/api/`.
1. `components/`: All re-usable React components. If something gets used twice
we should create a component and put it here.
1. `lib/`: A generic place to store library files that are used anywhere. This
doesn't have much structure yet.
1. `pages/`: All pages a user could navigate too and API URLs which are under `pages/api/`.
1. `components/`: All re-usable React components. If something gets used twice we should create a component and put it
here.
1. `lib/`: A generic place to store library files that are used anywhere. This doesn't have much structure yet.
NOTE: `styles/` can be ignored for now.
@@ -113,25 +96,20 @@ We're not really using CSS styles. `styles/` can be ignored.
## Testing the UI
Cypress is used for end-to-end (e2e) and component testing and is configured in
`./cypress.config.ts`. The `./cypress` folder is used for supporting
configuration files etc.
Cypress is used for end-to-end (e2e) and component testing and is configured in `./cypress.config.ts`. The `./cypress`
folder is used for supporting configuration files etc.
- Store e2e tests in the `./cypress/e2e` folder.
- Store component tests adjacent to the component being tested. If you want to
wriite a test for `./src/components/Layout.tsx` then store the test file at
`./src/components/Layout.cy.tsx`.
- Store component tests adjacent to the component being tested. If you want to wriite a test for
`./src/components/Layout.tsx` then store the test file at `./src/components/Layout.cy.tsx`.
A few npm scripts are available for convenience:
- `npm run cypress`: Useful for development, it opens Cypress and allows you to
explore, run and debug tests. It assumes you have the NextJS site running at
`localhost:3000`.
- `npm run cypress:run`: Runs all tests. Useful for a quick sanity check before
sending a PR or to run in CI pipelines.
- `npm run cypress:image-baseline`: If you have tests failing because of visual
changes that was expected, this command will update the baseline images stored
in `./cypress-visual-screenshots/baseline` with those from the adjacent
- `npm run cypress`: Useful for development, it opens Cypress and allows you to explore, run and debug tests. It assumes
you have the NextJS site running at `localhost:3000`.
- `npm run cypress:run`: Runs all tests. Useful for a quick sanity check before sending a PR or to run in CI pipelines.
- `npm run cypress:image-baseline`: If you have tests failing because of visual changes that was expected, this command
will update the baseline images stored in `./cypress-visual-screenshots/baseline` with those from the adjacent
comparison folder. More can be found in the
[docs of `uktrade/cypress-image-diff`](https://github.com/uktrade/cypress-image-diff/blob/main/docs/CLI.md#update-all-baseline-images-for-failing-tests).
@@ -141,10 +119,9 @@ Read more in the [./cypress README](cypress/).
Jest and React Testing Library are used for unit testing JS/TS/TSX code.
- Store unit test files adjacent to the file being tested and have the filename
end with `.test.ts` for non-React code or `.test.tsx` for React code.
- `npm run jest`: automatically runs tests and watches for any relevant changes
to rerun tests.
- Store unit test files adjacent to the file being tested and have the filename end with `.test.ts` for non-React code
or `.test.tsx` for React code.
- `npm run jest`: automatically runs tests and watches for any relevant changes to rerun tests.
Read more in the [./src/README.md](src/README.md).
@@ -152,30 +129,25 @@ Read more in the [./src/README.md](src/README.md).
When writing code for the website, we have a few best practices:
1. When importing packages import external dependencies first then local
dependencies. Order them alphabetically according to the package name.
1. When trying to implement something new, check if
[Chakra-UI](https://chakra-ui.com/) has components that are close enough to
your need. For example Sliders, Radio Buttons, Progress indicators, etc.
They have a lot and we can save time by re-using what they have and tweaking
the style as needed.
1. Format everything with [Prettier](https://prettier.io/). This is done by
default with pre-submits. We currently don't have any custom settings.
1. Define functional React components (with types for all properties when
feasible).
1. When importing packages import external dependencies first then local dependencies. Order them alphabetically
according to the package name.
1. When trying to implement something new, check if [Chakra-UI](https://chakra-ui.com/) has components that are close
enough to your need. For example Sliders, Radio Buttons, Progress indicators, etc. They have a lot and we can save
time by re-using what they have and tweaking the style as needed.
1. Format everything with [Prettier](https://prettier.io/). This is done by default with pre-submits. We currently
don't have any custom settings.
1. Define functional React components (with types for all properties when feasible).
### Developing New Features
When working on new features or making significant changes that can't be done
within a single Pull Request, we ask that you make use of Feature Flags.
When working on new features or making significant changes that can't be done within a single Pull Request, we ask that
you make use of Feature Flags.
We've set up
[`react-feature-flags`](https://www.npmjs.com/package/react-feature-flags) to
make this easier. To get started:
We've set up [`react-feature-flags`](https://www.npmjs.com/package/react-feature-flags) to make this easier. To get
started:
1. Add a new flag entry to `website/src/flags.ts`. We have an example flag you
can copy as an example. Be sure to `isActive` to true when testing your
features but false when submitting your PR.
1. Add a new flag entry to `website/src/flags.ts`. We have an example flag you can copy as an example. Be sure to
`isActive` to true when testing your features but false when submitting your PR.
1. Use your flag wherever you add a new UI element. This can be done with:
```js
@@ -188,29 +160,24 @@ import { Flags } from "react-feature-flags";
You can see an example of how this works by checking `website/src/components/Header/Headers.tsx` where we use `flagTest`.
1. Once you've finished building out the feature and it is ready for everyone
to use, it's safe to remove the `Flag` wrappers around your component and
the entry in `flags.ts`.
1. Once you've finished building out the feature and it is ready for everyone to use, it's safe to remove the `Flag`
wrappers around your component and the entry in `flags.ts`.
### URL Paths
To use stable and consistent URL paths, we recommend the following strategy for
new tasks:
To use stable and consistent URL paths, we recommend the following strategy for new tasks:
1. For any task that involves writing a free-form response, put the page under
`website/src/pages/create` with a page name matching the task type, such as
`initial_prompt.tsx`.
1. For any task that evaluates, rates, or ranks content, put the page under
`website/src/pages/evaluate` with a page name matching the task type such as
`rank_initial_prompts.tsx`.
1. For any task that involves writing a free-form response, put the page under `website/src/pages/create` with a page
name matching the task type, such as `initial_prompt.tsx`.
1. For any task that evaluates, rates, or ranks content, put the page under `website/src/pages/evaluate` with a page
name matching the task type such as `rank_initial_prompts.tsx`.
With this we'll be able to ensure these contribution pages are hidden from
logged out users but accessible to logged in users.
With this we'll be able to ensure these contribution pages are hidden from logged out users but accessible to logged in
users.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
features and API.
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
website/cypress/README.md
+40 -58
View File
@@ -1,24 +1,19 @@
# Component and e2e testing with Cypress
[Cypress](https://www.cypress.io/) is used for both component- and end-to-end
testing. Below there's a few examples for the context of this site. To learn
more, the
[Cypress documentation](https://docs.cypress.io/guides/getting-started/opening-the-app)
has it all.
[Cypress](https://www.cypress.io/) is used for both component- and end-to-end testing. Below there's a few examples for
the context of this site. To learn more, the
[Cypress documentation](https://docs.cypress.io/guides/getting-started/opening-the-app) has it all.
Don't get scared by the commercial offerings they offer. Their core is open
source, the cloud offering is not necesarry at all and can be replaced by CI
tooling and [community efforts](https://sorry-cypress.dev/).
Don't get scared by the commercial offerings they offer. Their core is open source, the cloud offering is not necesarry
at all and can be replaced by CI tooling and [community efforts](https://sorry-cypress.dev/).
# Component testing
To write a new component test, you either create a new `.tsx` adjacent to the
component you want to test or you can use the guide presented yo you when
running `npm run cypress` which allows you to easily create the skeleton test
for an existing component.
To write a new component test, you either create a new `.tsx` adjacent to the component you want to test or you can use
the guide presented yo you when running `npm run cypress` which allows you to easily create the skeleton test for an
existing component.
If you have a `Button.tsx` component, create a file next to it called
`Button.cy.tsx` which could look like this:
If you have a `Button.tsx` component, create a file next to it called `Button.cy.tsx` which could look like this:
```typescript
import React from "react";
@@ -35,28 +30,24 @@ describe("<Button />", () => {
## What's happening here?
First we use `cy.mount` to mount our component under test. Notive how we specify
`className` and inner text - this is where we arrange our component with fake
data that we could assert on later.
First we use `cy.mount` to mount our component under test. Notive how we specify `className` and inner text - this is
where we arrange our component with fake data that we could assert on later.
In the example above, we also use `cy.get` to select the rendered `button`
element. Cypress has multiple ways to
[select elements](https://docs.cypress.io/guides/references/best-practices),
`get` is just one of them (and often not recommended).
In the example above, we also use `cy.get` to select the rendered `button` element. Cypress has multiple ways to
[select elements](https://docs.cypress.io/guides/references/best-practices), `get` is just one of them (and often not
recommended).
At last, we use `captureSnapshot` which is a plugin that snaps a photo of the
`button` element and compares it to a baseline located in the
`./cypress-visual-screenshots/baseline/` folder. If there's too many unidentical
pixels between the two, it will fail the test.
At last, we use `captureSnapshot` which is a plugin that snaps a photo of the `button` element and compares it to a
baseline located in the `./cypress-visual-screenshots/baseline/` folder. If there's too many unidentical pixels between
the two, it will fail the test.
# End-to-end (e2e) testing
e2e tests are stored in the `./cypress/e2e` folder and should be named
`{page}.cy.ts` and located in a relative folder structure that mirrors the page
under test.
e2e tests are stored in the `./cypress/e2e` folder and should be named `{page}.cy.ts` and located in a relative folder
structure that mirrors the page under test.
When running `npm run cypress` and selecting e2e testing, we assume you have the
NextJS site running at `localhost:3000`.
When running `npm run cypress` and selecting e2e testing, we assume you have the NextJS site running at
`localhost:3000`.
An example test could look as follows:
@@ -74,39 +65,33 @@ export {};
## What's happening here?
First we use [`cy.visit`](https://docs.cypress.io/api/commands/visit) to point
the browser at the desired page. It appends relative paths to the configured
`baseUrl` (found in `./cypress.config.ts`).
First we use [`cy.visit`](https://docs.cypress.io/api/commands/visit) to point the browser at the desired page. It
appends relative paths to the configured `baseUrl` (found in `./cypress.config.ts`).
Cypress will
[automatically await](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress#Timeouts)
almost anything you do, but fail if the default timeout is reached.
Cypress will [automatically await](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress#Timeouts) almost
anything you do, but fail if the default timeout is reached.
Then we get the email input field and type our email address. We find the input
field using the data-cy attribute that we added in the source code of the
element on the page.
Then we get the email input field and type our email address. We find the input field using the data-cy attribute that
we added in the source code of the element on the page.
```jsx
<Input data-cy="email-address" placeholder="Email Address" />
```
Using `data-cy` is how we ensure that selecting the element is robust to changes
in page design or function and is one of the
Using `data-cy` is how we ensure that selecting the element is robust to changes in page design or function and is one
of the
[best practices recommended by Cypress](https://docs.cypress.io/guides/references/best-practices#Selecting-Elements).
Next we call `type()` to use the keyboard, cypress will automatically focus the
element and send the keypress events. Notice the `{enter}` keyword, this will
cause Cypress to hit the return key which we expect to submit the form.
Next we call `type()` to use the keyboard, cypress will automatically focus the element and send the keypress events.
Notice the `{enter}` keyword, this will cause Cypress to hit the return key which we expect to submit the form.
We then assert that the URL should contain `/auth/verify`. Again the timeout
will make sure we are not waiting forever, and the test will fail if we do not
manage to get there in a reasonable time.
We then assert that the URL should contain `/auth/verify`. Again the timeout will make sure we are not waiting forever,
and the test will fail if we do not manage to get there in a reasonable time.
## Authenticating in e2e tests
For end-to-end tests almost every test will need to first sign in to the
website. To make this easier we have a custom command for Cypress that makes
logging in with an email address a single command, `cy.signInWithEmail()`.
For end-to-end tests almost every test will need to first sign in to the website. To make this easier we have a custom
command for Cypress that makes logging in with an email address a single command, `cy.signInWithEmail()`.
```typescript
describe("replying as the assistant", () => {
@@ -115,16 +100,13 @@ describe("replying as the assistant", () => {
cy.visit("/create/assistant_reply");
cy.get('[data-cy="reply"').type(
"You need to run pre-commit to make the reviewer happy."
);
cy.get('[data-cy="reply"').type("You need to run pre-commit to make the reviewer happy.");
cy.get('[data-cy="submit"]').click();
});
});
```
In this example we sign in as `cypress@example.com` before visiting the
`/create/assistant_reply` page that is only available when authenticated. We can
then continue on with our test as normal. Note: using `cy.signInWithEmail()`
requires that the maildev is running, which should have been started as part of
the `docker compose up` command that is required to do any end-to-end testing.
In this example we sign in as `cypress@example.com` before visiting the `/create/assistant_reply` page that is only
available when authenticated. We can then continue on with our test as normal. Note: using `cy.signInWithEmail()`
requires that the maildev is running, which should have been started as part of the `docker compose up` command that is
required to do any end-to-end testing.
website/cypress/components/Container.cy.tsx
+1 -4
View File
@@ -7,9 +7,6 @@ describe("<Container />", () => {
const className = "my-class";
const text = "test_container";
cy.mount(<Container className={className}>{text}</Container>);
cy.get(`div.${className}`)
.should("have.class", className)
.should("be.visible")
.should("contain", text);
cy.get(`div.${className}`).should("have.class", className).should("be.visible").should("contain", text);
});
});
website/cypress/contract/oasst_api_contract_tests.cy.ts
+4 -11
View File
@@ -12,25 +12,18 @@ describe("Contract test for Oasst API", function () {
} as BackendUserCore;
it("can fetch a task", async () => {
expect(await oasstApiClient.fetchTask("random", testUser)).to.be.not.null;
expect(await oasstApiClient.fetchTask("random", testUser, "en")).to.be.not.null;
});
it("can ack a task", async () => {
const task = await oasstApiClient.fetchTask("random", testUser);
const task = await oasstApiClient.fetchTask("random", testUser, "en");
expect(await oasstApiClient.ackTask(task.id, "321")).to.be.null;
});
it("can record a taskInteraction", async () => {
const task = await oasstApiClient.fetchTask("random", testUser);
const task = await oasstApiClient.fetchTask("random", testUser, "en");
expect(
await oasstApiClient.interactTask(
"text_reply_to_message",
task.id,
"321",
"1",
{ text: "Test" },
testUser
)
await oasstApiClient.interactTask("text_reply_to_message", task.id, "321", "1", { text: "Test" }, testUser, "en")
).to.be.not.null;
});
website/cypress/e2e/tasks/label_assistant_reply.cy.ts
+4
View File
@@ -11,6 +11,10 @@ describe("labeling assistant replies", () => {
// For specific task pages the no task available result is normal.
if (type === undefined) return;
cy.get('[data-cy="label-question"]').each((label) => {
// Click the no button, this generally approves the spam check
cy.wrap(label).find('[data-cy="no"]').click();
});
cy.get('[data-cy="label-options"]').each((label) => {
// Click the 4th option
cy.wrap(label).find('[data-cy="radio-option"]').eq(3).click();
website/cypress/e2e/tasks/label_initial_prompt.cy.ts
+4
View File
@@ -11,6 +11,10 @@ describe("labeling initial prompts", () => {
// For specific task pages the no task available result is normal.
if (type === undefined) return;
cy.get('[data-cy="label-question"]').each((label) => {
// Click the no button, this generally approves the spam check
cy.wrap(label).find('[data-cy="no"]').click();
});
cy.get('[data-cy="label-options"]').each((label) => {
// Click the 4th option
cy.wrap(label).find('[data-cy="radio-option"]').eq(3).click();
website/cypress/e2e/tasks/label_prompter_reply.cy.ts
+4
View File
@@ -11,6 +11,10 @@ describe("labeling prompter replies", () => {
// For specific task pages the no task available result is normal.
if (type === undefined) return;
cy.get('[data-cy="label-question"]').each((label) => {
// Click the no button, this generally approves the spam check
cy.wrap(label).find('[data-cy="no"]').click();
});
cy.get('[data-cy="label-options"]').each((label) => {
// Click the 4th option
cy.wrap(label).find('[data-cy="radio-option"]').eq(3).click();
website/cypress/e2e/tasks/no_tasks_available.cy.ts
+23
View File
@@ -0,0 +1,23 @@
describe("no tasks available", () => {
it("displays an empty state when no tasks are available", () => {
cy.signInWithEmail("cypress@example.com");
cy.intercept(
{
method: "GET",
url: "/api/new_task/prompter_reply",
},
{
statusCode: 500,
body: {
message: "No tasks of type 'label_prompter_reply' are currently available.",
errorCode: 1006,
httpStatusCode: 503,
},
}
).as("newTaskPrompterReply");
cy.visit("/create/user_reply");
cy.wait("@newTaskPrompterReply").then(() => {
cy.get('[data-cy="cy-no-tasks"]').should("exist");
});
});
});
website/cypress/e2e/tasks/random.cy.ts
+5 -3
View File
@@ -44,6 +44,10 @@ describe("handles random tasks", () => {
break;
}
case "label-task": {
cy.get('[data-cy="label-question"]').each((label) => {
// Click the no button, this generally approves the spam check
cy.wrap(label).find('[data-cy="no"]').click();
});
cy.get('[data-cy="label-options"]').each((label) => {
// Click the 4th option
cy.wrap(label).find('[data-cy="radio-option"]').eq(3).click();
@@ -56,9 +60,7 @@ describe("handles random tasks", () => {
break;
}
case undefined: {
throw new Error(
"No tasks available, but at least create initial prompt expected"
);
throw new Error("No tasks available, but at least create initial prompt expected");
}
default:
throw new Error(`Unexpected task type: ${type}`);
website/cypress/support/commands.ts
+6 -10
View File
@@ -37,20 +37,16 @@
// }
Cypress.Commands.add("signInUsingEmailedLink", (emailAddress) => {
const mailDevApi = `${Cypress.env("MAILDEV_PROTOCOL")}://${Cypress.env(
"MAILDEV_HOST"
)}:${Cypress.env("MAILDEV_API_PORT")}`;
cy.request(
"GET",
`${mailDevApi}/email?headers.to=${emailAddress.toLowerCase()}`
).then((response) => {
const mailDevApi = `${Cypress.env("MAILDEV_PROTOCOL")}://${Cypress.env("MAILDEV_HOST")}:${Cypress.env(
"MAILDEV_API_PORT"
)}`;
cy.request("GET", `${mailDevApi}/email?headers.to=${emailAddress.toLowerCase()}`).then((response) => {
const emails = response.body;
// Find and use login link
const loginLink = emails
.pop()
.html.match(/href="[^"]+(\/api\/auth\/callback\/[^"]+?)"/)[1];
const loginLink = emails.pop().html.match(/href="[^"]+(\/api\/auth\/callback\/[^"]+?)"/)[1];
cy.visit(loginLink);
cy.url().should("include", "/dashboard");
});
});
website/package-lock.json
Generated
+1296 -115
View File
File diff suppressed because it is too large Load Diff
website/package.json
+6
View File
@@ -65,6 +65,7 @@
"react-hook-form": "^7.42.1",
"react-i18next": "^12.1.4",
"sharp": "^0.31.3",
"storybook-addon-next-router": "^4.0.2",
"swr": "^2.0.0",
"tailwindcss": "^3.2.4",
"unique-username-generator": "^1.1.3",
@@ -95,9 +96,14 @@
"eslint-plugin-unused-imports": "^2.0.0",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"msw": "^0.49.3",
"msw-storybook-addon": "^1.7.0",
"prettier": "2.8.1",
"prisma": "^4.7.1",
"ts-node": "^10.9.1",
"typescript": "^4.9.4"
},
"msw": {
"workerDirectory": "public"
}
}
website/public/locales/en/common.json
+4 -1
View File
@@ -9,11 +9,14 @@
"docs": "Docs",
"github": "GitHub",
"legal": "Legal",
"loading": "Loading...",
"more_information": "More Information",
"no": "No",
"privacy_policy": "Privacy Policy",
"report_a_bug": "Report a Bug",
"sign_in": "Sign In",
"sign_out": "Sign Out",
"terms_of_service": "Terms of Service",
"title": "Open Assistant",
"more_information": "More Information"
"yes": "Yes"
}
website/public/locales/en/labelling.json
+16
View File
@@ -0,0 +1,16 @@
{
"label_highlighted_yes_no_instruction": "Answer the following question(s) about the highlighted message:",
"label_highlighted_flag_instruction": "Select any that apply to the highlighted message:",
"label_highlighted_likert_instruction": "Rate the highlighted message:",
"label_message_yes_no_instruction": "Answer the following question(s) about the message:",
"label_message_flag_instruction": "Select any that apply to the message:",
"label_message_likert_instruction": "Rate the message:",
"spam.question": "Is the message spam?",
"fails_task.question": "Does the reply fail the prompter's task?",
"not_appropriate": "Not Appropriate",
"pii": "Contains PII",
"hate_speech": "Hate Speech",
"sexual_content": "Sexual Content",
"moral_judgement": "Judges Morality",
"political_content": "Political"
}
website/public/locales/en/message.json
+13
View File
@@ -0,0 +1,13 @@
{
"label_action": "Label",
"label_title": "Label",
"message": "Message",
"open_new_tab_action": "Open in new tab",
"parent": "Parent",
"reactions": "Reactions",
"report_action": "Report",
"report_placeholder": "Why should this message be reviewed?",
"report_title": "Report",
"send_report": "Send",
"submit_labels": "Submit"
}
website/public/locales/en/tasks.json
+6 -4
View File
@@ -1,5 +1,4 @@
{
"write_initial_prompt": "Write your prompt here...",
"default": {
"unchanged_title": "No changes",
"unchanged_message": "Are you sure you would like to continue?"
@@ -12,18 +11,21 @@
"label": "Create Initial Prompts",
"desc": "Write initial prompts to help Open Assistant to try replying to diverse messages.",
"overview": "Create an initial message to send to the assistant",
"instruction": "Provide the initial prompts"
"instruction": "Provide the initial prompts",
"response_placeholder": "Write your prompt here..."
},
"reply_as_user": {
"label": "Reply as User",
"desc": "Chat with Open Assistant and help improve it's responses as you interact with it.",
"overview": "Given the following conversation, provide an adequate reply",
"instruction": "Provide the user's reply"
"instruction": "Provide the user's reply",
"response_placeholder": "Write your reply here..."
},
"reply_as_assistant": {
"label": "Reply as Assistant",
"desc": "Help Open Assistant improve its responses to conversations with other users.",
"overview": "Given the following conversation, provide an adequate reply"
"overview": "Given the following conversation, provide an adequate reply",
"response_placeholder": "Write your reply here..."
},
"rank_user_replies": {
"label": "Rank User Replies",
website/public/mockServiceWorker.js
+303
View File
@@ -0,0 +1,303 @@
/* eslint-disable */
/* tslint:disable */
/**
* Mock Service Worker (0.49.3).
* @see https://github.com/mswjs/msw
* - Please do NOT modify this file.
* - Please do NOT serve this file on production.
*/
const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
const activeClientIds = new Set()
self.addEventListener('install', function () {
self.skipWaiting()
})
self.addEventListener('activate', function (event) {
event.waitUntil(self.clients.claim())
})
self.addEventListener('message', async function (event) {
const clientId = event.source.id
if (!clientId || !self.clients) {
return
}
const client = await self.clients.get(clientId)
if (!client) {
return
}
const allClients = await self.clients.matchAll({
type: 'window',
})
switch (event.data) {
case 'KEEPALIVE_REQUEST': {
sendToClient(client, {
type: 'KEEPALIVE_RESPONSE',
})
break
}
case 'INTEGRITY_CHECK_REQUEST': {
sendToClient(client, {
type: 'INTEGRITY_CHECK_RESPONSE',
payload: INTEGRITY_CHECKSUM,
})
break
}
case 'MOCK_ACTIVATE': {
activeClientIds.add(clientId)
sendToClient(client, {
type: 'MOCKING_ENABLED',
payload: true,
})
break
}
case 'MOCK_DEACTIVATE': {
activeClientIds.delete(clientId)
break
}
case 'CLIENT_CLOSED': {
activeClientIds.delete(clientId)
const remainingClients = allClients.filter((client) => {
return client.id !== clientId
})
// Unregister itself when there are no more clients
if (remainingClients.length === 0) {
self.registration.unregister()
}
break
}
}
})
self.addEventListener('fetch', function (event) {
const { request } = event
const accept = request.headers.get('accept') || ''
// Bypass server-sent events.
if (accept.includes('text/event-stream')) {
return
}
// Bypass navigation requests.
if (request.mode === 'navigate') {
return
}
// Opening the DevTools triggers the "only-if-cached" request
// that cannot be handled by the worker. Bypass such requests.
if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
return
}
// Bypass all requests when there are no active clients.
// Prevents the self-unregistered worked from handling requests
// after it's been deleted (still remains active until the next reload).
if (activeClientIds.size === 0) {
return
}
// Generate unique request ID.
const requestId = Math.random().toString(16).slice(2)
event.respondWith(
handleRequest(event, requestId).catch((error) => {
if (error.name === 'NetworkError') {
console.warn(
'[MSW] Successfully emulated a network error for the "%s %s" request.',
request.method,
request.url,
)
return
}
// At this point, any exception indicates an issue with the original request/response.
console.error(
`\
[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
request.method,
request.url,
`${error.name}: ${error.message}`,
)
}),
)
})
async function handleRequest(event, requestId) {
const client = await resolveMainClient(event)
const response = await getResponse(event, client, requestId)
// Send back the response clone for the "response:*" life-cycle events.
// Ensure MSW is active and ready to handle the message, otherwise
// this message will pend indefinitely.
if (client && activeClientIds.has(client.id)) {
;(async function () {
const clonedResponse = response.clone()
sendToClient(client, {
type: 'RESPONSE',
payload: {
requestId,
type: clonedResponse.type,
ok: clonedResponse.ok,
status: clonedResponse.status,
statusText: clonedResponse.statusText,
body:
clonedResponse.body === null ? null : await clonedResponse.text(),
headers: Object.fromEntries(clonedResponse.headers.entries()),
redirected: clonedResponse.redirected,
},
})
})()
}
return response
}
// Resolve the main client for the given event.
// Client that issues a request doesn't necessarily equal the client
// that registered the worker. It's with the latter the worker should
// communicate with during the response resolving phase.
async function resolveMainClient(event) {
const client = await self.clients.get(event.clientId)
if (client?.frameType === 'top-level') {
return client
}
const allClients = await self.clients.matchAll({
type: 'window',
})
return allClients
.filter((client) => {
// Get only those clients that are currently visible.
return client.visibilityState === 'visible'
})
.find((client) => {
// Find the client ID that's recorded in the
// set of clients that have registered the worker.
return activeClientIds.has(client.id)
})
}
async function getResponse(event, client, requestId) {
const { request } = event
const clonedRequest = request.clone()
function passthrough() {
// Clone the request because it might've been already used
// (i.e. its body has been read and sent to the client).
const headers = Object.fromEntries(clonedRequest.headers.entries())
// Remove MSW-specific request headers so the bypassed requests
// comply with the server's CORS preflight check.
// Operate with the headers as an object because request "Headers"
// are immutable.
delete headers['x-msw-bypass']
return fetch(clonedRequest, { headers })
}
// Bypass mocking when the client is not active.
if (!client) {
return passthrough()
}
// Bypass initial page load requests (i.e. static assets).
// The absence of the immediate/parent client in the map of the active clients
// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
// and is not ready to handle requests.
if (!activeClientIds.has(client.id)) {
return passthrough()
}
// Bypass requests with the explicit bypass header.
// Such requests can be issued by "ctx.fetch()".
if (request.headers.get('x-msw-bypass') === 'true') {
return passthrough()
}
// Notify the client that a request has been intercepted.
const clientMessage = await sendToClient(client, {
type: 'REQUEST',
payload: {
id: requestId,
url: request.url,
method: request.method,
headers: Object.fromEntries(request.headers.entries()),
cache: request.cache,
mode: request.mode,
credentials: request.credentials,
destination: request.destination,
integrity: request.integrity,
redirect: request.redirect,
referrer: request.referrer,
referrerPolicy: request.referrerPolicy,
body: await request.text(),
bodyUsed: request.bodyUsed,
keepalive: request.keepalive,
},
})
switch (clientMessage.type) {
case 'MOCK_RESPONSE': {
return respondWithMock(clientMessage.data)
}
case 'MOCK_NOT_FOUND': {
return passthrough()
}
case 'NETWORK_ERROR': {
const { name, message } = clientMessage.data
const networkError = new Error(message)
networkError.name = name
// Rejecting a "respondWith" promise emulates a network error.
throw networkError
}
}
return passthrough()
}
function sendToClient(client, message) {
return new Promise((resolve, reject) => {
const channel = new MessageChannel()
channel.port1.onmessage = (event) => {
if (event.data && event.data.error) {
return reject(event.data.error)
}
resolve(event.data)
}
client.postMessage(message, [channel.port2])
})
}
function sleep(timeMs) {
return new Promise((resolve) => {
setTimeout(resolve, timeMs)
})
}
async function respondWithMock(response) {
await sleep(response.delay)
return new Response(response.body, response)
}
website/src/.prettierignore
View File
website/src/components/EmptyState.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const EmptyState = (props: EmptyStateProps) => {
<Box data-cy={props["data-cy"]} bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
<Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
<props.icon size="30" color="DarkOrange" />
<Text>{props.text}</Text>
<Text data-cy="cy-no-tasks">{props.text}</Text>
<NextLink href="/dashboard">
<Text color="blue.500">Go back to the dashboard</Text>
</NextLink>
website/src/components/FlaggableElement.tsx
-116
View File
@@ -1,116 +0,0 @@
import {
Box,
Button,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Popover,
PopoverAnchor,
PopoverTrigger,
Tooltip,
useColorModeValue,
useDisclosure,
} from "@chakra-ui/react";
import { AlertCircle } from "lucide-react";
import { useState } from "react";
import { get, post } from "src/lib/api";
import { colors } from "src/styles/Theme/colors";
import { Message } from "src/types/Conversation";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
import { LabelInputGroup } from "./Survey/LabelInputGroup";
interface Label {
name: string;
display_text: string;
help_text: string;
}
interface FlaggableElementProps {
children: React.ReactNode;
message: Message;
}
interface ValidLabelsResponse {
valid_labels: Label[];
}
export const FlaggableElement = (props: FlaggableElementProps) => {
const { data: response } = useSWRImmutable<ValidLabelsResponse>("/api/valid_labels", get);
const { isOpen, onOpen, onClose } = useDisclosure();
const { valid_labels } = response || { valid_labels: [] };
const [values, setValues] = useState<number[]>([]);
const submittable =
values.some((value) => {
return value !== null;
}) &&
values.length === valid_labels.length &&
valid_labels.length > 0;
const { trigger } = useSWRMutation("/api/set_label", post, {
onSuccess: onClose,
onError: onClose,
});
const submitResponse = () => {
const label_map: Map<string, number> = new Map();
console.assert(valid_labels.length === values.length);
values.forEach((value, idx) => {
if (value !== null) {
label_map.set(valid_labels[idx].name, value);
}
});
trigger({
message_id: props.message.id,
label_map: Object.fromEntries(label_map),
text: props.message.text,
});
};
return (
<Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose} closeOnBlur={false} isLazy lazyBehavior="keepMounted">
<Box display="flex" alignItems="center" flexDirection={["column", "row"]} gap="2">
<PopoverAnchor>{props.children}</PopoverAnchor>
<Tooltip label="Report" bg="red.500" aria-label="A tooltip">
<Box>
<PopoverTrigger>
<Box as="button" display="flex" alignItems="center" justifyContent="center" borderRadius="full" p="1">
<AlertCircle size="20" className="text-red-400" aria-hidden="true" />
</Box>
</PopoverTrigger>
</Box>
</Tooltip>
</Box>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Select one or more labels that apply.</ModalHeader>
<ModalCloseButton />
<ModalBody>
<LabelInputGroup simple labelIDs={valid_labels.map(({ name }) => name)} onChange={setValues} />
</ModalBody>
<ModalFooter>
<Button
isDisabled={!submittable}
onClick={submitResponse}
className={`bg-indigo-600 text-${useColorModeValue(
colors.light.text,
colors.dark.text
)} hover:bg-indigo-700`}
>
Report
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Popover>
);
};
website/src/components/Loading/LoadingScreen.jsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Box, Center, Progress, Text, useColorModeValue } from "@chakra-ui/react";
import { Box, Center, Progress, Text } from "@chakra-ui/react";
export const LoadingScreen = ({ text = "Loading..." } = {}) => {
return (
website/src/components/Messages.tsx
+2 -20
View File
@@ -1,26 +1,8 @@
import { Box, forwardRef, Grid, useColorMode } from "@chakra-ui/react";
import { Box, forwardRef, useColorMode } from "@chakra-ui/react";
import { useMemo } from "react";
import { Message } from "src/types/Conversation";
import { FlaggableElement } from "./FlaggableElement";
interface MessagesProps {
messages: Message[];
}
export const Messages = ({ messages }: MessagesProps) => {
const items = messages.map((messageProps: Message, i: number) => {
return (
<FlaggableElement message={messageProps} key={i + messageProps.id}>
<MessageView {...messageProps} />
</FlaggableElement>
);
});
// Maybe also show a legend of the colors?
return <Grid gap={2}>{items}</Grid>;
};
export const MessageView = forwardRef<Message, "div">((message: Message, ref) => {
export const MessageView = forwardRef<Partial<Message>, "div">((message: Partial<Message>, ref) => {
const { colorMode } = useColorMode();
const bgColor = useMemo(() => {
website/src/components/Messages/LabelFlagGroup.tsx
+32
View File
@@ -0,0 +1,32 @@
import { Button, Flex } from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { getTypeSafei18nKey } from "src/lib/i18n";
interface LabelFlagGroupProps {
values: number[];
labelNames: string[];
isEditable?: boolean;
onChange: (values: number[]) => void;
}
export const LabelFlagGroup = ({ values, labelNames, isEditable = true, onChange }: LabelFlagGroupProps) => {
const { t } = useTranslation("labelling");
return (
<Flex wrap="wrap" gap="4">
{labelNames.map((name, idx) => (
<Button
key={name}
onClick={() => {
const newValues = values.slice();
newValues[idx] = newValues[idx] ? 0 : 1;
onChange(newValues);
}}
isDisabled={!isEditable}
colorScheme={values[idx] === 1 ? "blue" : undefined}
>
{t(getTypeSafei18nKey(name))}
</Button>
))}
</Flex>
);
};
website/src/components/Messages/LabelInputGroup.tsx
+84
View File
@@ -0,0 +1,84 @@
import { Text, VStack } from "@chakra-ui/react";
import { Label } from "src/types/Tasks";
import { LabelLikertGroup } from "../Survey/LabelLikertGroup";
import { LabelFlagGroup } from "./LabelFlagGroup";
import { LabelYesNoGroup } from "./LabelYesNoGroup";
export interface LabelInputInstructions {
yesNoInstruction: string;
flagInstruction: string;
likertInstruction: string;
}
interface LabelInputGroupProps {
values: number[];
labels: Label[];
requiredLabels?: string[];
isEditable?: boolean;
instructions: LabelInputInstructions;
onChange: (values: number[]) => void;
}
export const LabelInputGroup = ({
labels,
values,
requiredLabels,
isEditable,
instructions,
onChange,
}: LabelInputGroupProps) => {
const yesNoIndexes = labels.map((label, idx) => (label.widget === "yes_no" ? idx : null)).filter((v) => v !== null);
const flagIndexes = labels.map((label, idx) => (label.widget === "flag" ? idx : null)).filter((v) => v !== null);
const likertIndexes = labels.map((label, idx) => (label.widget === "likert" ? idx : null)).filter((v) => v !== null);
return (
<VStack alignItems="stretch" spacing={6}>
{yesNoIndexes.length > 0 && (
<VStack alignItems="stretch" spacing={2}>
<Text>{instructions.yesNoInstruction}</Text>
<LabelYesNoGroup
values={yesNoIndexes.map((idx) => values[idx])}
labelNames={yesNoIndexes.map((idx) => labels[idx].name)}
isEditable={isEditable}
requiredLabels={requiredLabels}
onChange={(yesNoValues) => {
const newValues = values.slice();
yesNoIndexes.forEach((idx, yesNoIndex) => (newValues[idx] = yesNoValues[yesNoIndex]));
onChange(newValues);
}}
/>
</VStack>
)}
{flagIndexes.length > 0 && (
<VStack alignItems="stretch" spacing={2}>
<Text>{instructions.flagInstruction}</Text>
<LabelFlagGroup
values={flagIndexes.map((idx) => values[idx])}
labelNames={flagIndexes.map((idx) => labels[idx].name)}
isEditable={isEditable}
onChange={(flagValues) => {
const newValues = values.slice();
flagIndexes.forEach((idx, flagIndex) => (newValues[idx] = flagValues[flagIndex]));
onChange(newValues);
}}
/>
</VStack>
)}
{likertIndexes.length > 0 && (
<VStack alignItems="stretch" spacing={2}>
<Text>{instructions.likertInstruction}</Text>
<LabelLikertGroup
labelIDs={likertIndexes.map((idx) => labels[idx].name)}
isEditable={isEditable}
onChange={(likertValues) => {
const newValues = values.slice();
likertIndexes.forEach((idx, likertIndex) => (newValues[idx] = likertValues[likertIndex]));
onChange(newValues);
}}
/>
</VStack>
)}
</VStack>
);
};
website/src/components/Messages/LabelPopup.tsx
+84
View File
@@ -0,0 +1,84 @@
import {
Button,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
} from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { useEffect, useState } from "react";
import { LabelInputGroup } from "src/components/Messages/LabelInputGroup";
import { get, post } from "src/lib/api";
import { Label } from "src/types/Tasks";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
interface LabelMessagePopupProps {
messageId: string;
show: boolean;
onClose: () => void;
}
interface ValidLabelsResponse {
valid_labels: Label[];
}
export const LabelMessagePopup = ({ messageId, show, onClose }: LabelMessagePopupProps) => {
const { t } = useTranslation();
const { data: response } = useSWRImmutable<ValidLabelsResponse>(`/api/valid_labels?message_id=${messageId}`, get);
const valid_labels = response?.valid_labels ?? [];
const [values, setValues] = useState<number[]>(new Array(valid_labels.length).fill(null));
useEffect(() => {
setValues(new Array(valid_labels.length).fill(null));
}, [messageId, valid_labels.length]);
const { trigger: setLabels } = useSWRMutation("/api/set_label", post);
const submit = () => {
const label_map: Map<string, number> = new Map();
console.assert(valid_labels.length === values.length);
values.forEach((value, idx) => {
if (value !== null) {
label_map.set(valid_labels[idx].name, value);
}
});
setLabels({
message_id: messageId,
label_map: Object.fromEntries(label_map),
});
setValues(null);
onClose();
};
return (
<Modal isOpen={show} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{t("message:label_title")}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<LabelInputGroup
labels={valid_labels}
values={values}
instructions={{
yesNoInstruction: t("labelling:label_message_yes_no_instruction"),
flagInstruction: t("labelling:label_message_flag_instruction"),
likertInstruction: t("labelling:label_message_likert_instruction"),
}}
onChange={setValues}
/>
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={submit}>
{t("message:submit_labels")}
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};
website/src/components/Messages/LabelYesNoGroup.tsx
+89
View File
@@ -0,0 +1,89 @@
import { Button, HStack, Text, Tooltip } from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { getTypeSafei18nKey } from "src/lib/i18n";
interface LabelYesNoGroupProps {
values: number[];
labelNames: string[];
requiredLabels?: string[];
isEditable?: boolean;
onChange: (values: number[]) => void;
}
export const LabelYesNoGroup = ({
values,
labelNames,
requiredLabels = [],
isEditable = true,
onChange,
}: LabelYesNoGroupProps) => {
const { t } = useTranslation("labelling");
return (
<>
{labelNames.map((name, idx) => {
return (
<YesNoQuestion
key={name}
question={t(getTypeSafei18nKey(`${name}.question`))}
value={values[idx] === null ? null : values[idx] > 0.1 ? true : false}
onChange={(value) => {
const newValues = values.slice();
newValues[idx] = value;
onChange(newValues);
}}
isEditable={isEditable}
isRequired={requiredLabels.includes(name)}
/>
);
})}
</>
);
};
const YesNoQuestion = ({
isEditable,
question,
value,
isRequired,
onChange,
}: {
isEditable: boolean;
question: string;
value: boolean;
isRequired?: boolean;
onChange: (boolean) => void;
}) => {
const { t } = useTranslation();
return (
<div data-cy="label-question" style={{ maxWidth: "30em" }}>
<Text display="inline">
{question}
{isRequired ? <RequiredMark /> : undefined}
</Text>
<HStack style={{ float: "right" }}>
<Button
data-cy="yes"
isDisabled={!isEditable}
colorScheme={value === true ? "blue" : undefined}
onClick={() => onChange(isRequired ? true : value === null ? true : null)}
>
{t("yes")}
</Button>
<Button
data-cy="no"
isDisabled={!isEditable}
colorScheme={value === false ? "blue" : undefined}
onClick={() => onChange(isRequired ? false : value === null ? false : null)}
>
{t("no")}
</Button>
</HStack>
</div>
);
};
const RequiredMark = () => (
<Tooltip label="Required">
<span style={{ color: "red" }}>*</span>
</Tooltip>
);
website/src/components/Messages/MessageEmojiButton.stories.tsx
+34
View File
@@ -0,0 +1,34 @@
import React from "react";
import { MessageEmojiButton } from "./MessageEmojiButton";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Messages/MessageEmojiButton",
component: MessageEmojiButton,
};
const Template = ({ emoji, count, checked }: { emoji: string; count: number; checked?: boolean }) => {
return <MessageEmojiButton emoji={{ name: emoji, count }} checked={checked} onClick={undefined} />;
};
export const Default = Template.bind({});
Default.args = {
emoji: "+1",
count: 7,
checked: false,
};
export const BigNumber = Template.bind({});
BigNumber.args = {
emoji: "+1",
count: 999,
checked: false,
};
export const Checked = Template.bind({});
Checked.args = {
emoji: "+1",
count: 2,
checked: true,
};
website/src/components/Messages/MessageEmojiButton.tsx
+48
View File
@@ -0,0 +1,48 @@
import { Button } from "@chakra-ui/react";
import { BoxSelect, Flag, LucideProps, ThumbsDown, ThumbsUp } from "lucide-react";
import { ReactElement } from "react";
import { MessageEmoji } from "src/types/Conversation";
type EmojiIconPurpose = "MINI_BUTTON" | "NORMAL";
const defaultIconProps: (purpose: EmojiIconPurpose) => LucideProps = (purpose: EmojiIconPurpose) => {
if (purpose === "MINI_BUTTON") return { height: "1em" };
return {};
};
export const getEmojiIcon = (name: string, purpose: EmojiIconPurpose): ReactElement => {
switch (name) {
case "+1":
return <ThumbsUp {...defaultIconProps(purpose)} />;
case "-1":
return <ThumbsDown {...defaultIconProps(purpose)} />;
case "flag":
case "red_flag":
return <Flag {...defaultIconProps(purpose)} />;
default:
return <BoxSelect {...defaultIconProps(purpose)} />;
}
};
interface MessageEmojiButtonProps {
emoji: MessageEmoji;
checked?: boolean;
onClick: () => void;
}
export const MessageEmojiButton = ({ emoji, checked, onClick }: MessageEmojiButtonProps) => {
return (
<Button
onClick={onClick}
variant={checked ? "solid" : "ghost"}
colorScheme={checked ? "blue" : undefined}
size="sm"
height="1.6em"
minWidth={0}
padding="0"
>
{getEmojiIcon(emoji.name, "MINI_BUTTON")}
<span style={{ marginInlineEnd: "0.25em" }}>{emoji.count}</span>
</Button>
);
};
website/src/components/Messages/MessageTable.stories.tsx
+110
View File
@@ -0,0 +1,110 @@
import React from "react";
import { Message } from "src/types/Conversation";
import { MessageTable } from "./MessageTable";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Messages/MessageTable",
component: MessageTable,
};
const Template = ({
messages,
enableLink,
highlightLastMessage,
}: {
messages: Message[];
enableLink: boolean;
highlightLastMessage: boolean;
}) => {
return <MessageTable messages={messages} enableLink={enableLink} highlightLastMessage={highlightLastMessage} />;
};
export const Default = Template.bind({});
Default.args = {
messages: [
{
text: "I'm unsure how to interpret this. Is it a riddle?",
is_assistant: true,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
{
text: "No, I just wanted to see how you reply when I type random characters. Can you tell me who invented Wikipedia?",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: { "-1": 11, red_flag: 2 },
user_emojis: [],
},
{
text: "Sorry, my cat sat on my keyboard. Can you print a cat in ASCII art?",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
],
enableLink: true,
highlightLastMessage: false,
};
export const Conversation = Template.bind({});
Conversation.args = {
messages: [
{
text: "Hello! How can I help you?",
is_assistant: true,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
{
text: "Who were the 8 presidents before George Washington?",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
],
enableLink: false,
highlightLastMessage: true,
};
export const LongText = Template.bind({});
LongText.args = {
messages: [
{
text: "Okay, here\u2019s my answer. The thing is, in a job interview you are applying to the position, right? Which means that you need to try to make yourself sound as good a fit as possible. So that means it\u2019s a mistake to wear something that people would think of as a silly or stupid outfit. It\u2019s good to wear something in line with what people expect the job to require, and ideally you want to wear something that you can walk around comfortably in. At the same time, if you wear something that looks kind of dorky, you might not stand out as much as someone who doesn\u2019t, because the other candidates probably all have something slightly weird or wacky about them too. So, I\u2019d say, do you like your outfit? Wear something that you\u2019re comfortable in, that you think you look good in, and is in line with what the job would require. Also, for interview prep, I would focus on making yourself look as professional as possible, from your hair to your outfit. What do you think of this?",
is_assistant: true,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
{
text: "Yes, I think they can be helpful when the child misbehaves, but they should be used with a little bit of compassion and understanding that it\u2019s not the natural state of things to have an adult yelling at them. Time outs are also often used without letting the child know how they\u2019re getting out of the time out, which can make it feel arbitrary or like a punishment, rather than a consequence for something they did. It\u2019s really easy for adults to do this kind of thing unconsciously. It\u2019s easy to get caught up in the notion that \u201cThey\u2019re in time out, and that\u2019s the end of it!\u201d but kids can be pretty imaginative, and they can use their own creativity to make their way out of time outs. A compassionate time out ends when the child shows a sign of understanding what they\u2019ve done wrong, and are ready to begin again. That way the child knows they\u2019re learning, and that the parent is seeing them as an intelligent person, even if they sometimes mess up. You can still use the other techniques you were using to be tough when necessary, but using a compassionate approach will let you use them without actually using them!",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
{
text: "No. The USA was founded by a Puritan group of Protestants, but it didn\u2019t adopt the religion of the Puritans until much later, and it was always a secular state. The Puritans observed the Sabbath on Sunday, and the Puritans only had a small influence in the early history of the USA. It\u2019s difficult to trace the origins of closing stores on Sunday, but one early and short-lived attempt at forcing the Sabbath on people in the 1800s was motivated by the Protestant ideal that people should spend Sunday focusing on spiritual activities. By the mid-1800s, when the Sunday closing law was made, there was not a lot of pressure from that standpoint, but the church had begun to advocate for Sunday closing laws as a way of counteracting the negative effects of industrialization on the day of rest. Even after that shift, closing stores on Sunday was not always possible, since the religious Sunday was not always chosen for observance. And as industrialization accelerated and mechanization made it possible to operate stores on Sunday, the law was not enforced as much as people liked. The day of rest was also being violated by stores that stayed open all day on Sunday, so closing stores on Sundays became an effort to protect the Sabbath for all citizens.",
is_assistant: false,
id: "",
frontend_message_id: "",
emojis: {},
user_emojis: [],
},
],
enableLink: true,
highlightLastMessage: false,
};
website/src/components/Messages/MessageTable.tsx
+3 -3
View File
@@ -11,11 +11,11 @@ interface MessageTableProps {
export function MessageTable({ messages, enableLink, highlightLastMessage }: MessageTableProps) {
return (
<Stack spacing="4">
{messages.map((item, idx) => (
{messages.map((message, idx) => (
<MessageTableEntry
enabled={enableLink}
item={item}
key={item.id + item.frontend_message_id}
message={message}
key={message.id + message.frontend_message_id}
highlight={highlightLastMessage && idx === messages.length - 1}
/>
))}
website/src/components/Messages/MessageTableEntry.stories.tsx
+62
View File
@@ -0,0 +1,62 @@
import React from "react";
import { Message } from "src/types/Conversation";
import { MessageTableEntry } from "./MessageTableEntry";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Messages/MessageTableEntry",
component: MessageTableEntry,
};
const Template = ({ enabled, highlight, ...message }) => {
return <MessageTableEntry message={message as Message} enabled={enabled} highlight={highlight} />;
};
export const Default = Template.bind({});
Default.args = {
text: "Who were the 8 presidents before George Washington?",
is_assistant: false,
id: "",
frontend_message_id: "",
enabled: true,
highlight: false,
emojis: {},
user_emojis: [],
};
export const Asistant = Template.bind({});
Asistant.args = {
text: "Who were the 8 presidents before George Washington?",
is_assistant: true,
id: "",
frontend_message_id: "",
enabled: true,
highlight: false,
emojis: {},
user_emojis: [],
};
export const LongText = Template.bind({});
LongText.args = {
text: "Assistant: No. The USA was founded by a Puritan group of Protestants, but it didn\u2019t adopt the religion of the Puritans until much later, and it was always a secular state. The Puritans observed the Sabbath on Sunday, and the Puritans only had a small influence in the early history of the USA. It\u2019s difficult to trace the origins of closing stores on Sunday, but one early and short-lived attempt at forcing the Sabbath on people in the 1800s was motivated by the Protestant ideal that people should spend Sunday focusing on spiritual activities. By the mid-1800s, when the Sunday closing law was made, there was not a lot of pressure from that standpoint, but the church had begun to advocate for Sunday closing laws as a way of counteracting the negative effects of industrialization on the day of rest. Even after that shift, closing stores on Sunday was not always possible, since the religious Sunday was not always chosen for observance. And as industrialization accelerated and mechanization made it possible to operate stores on Sunday, the law was not enforced as much as people liked. The day of rest was also being violated by stores that stayed open all day on Sunday, so closing stores on Sundays became an effort to protect the Sabbath for all citizens.",
is_assistant: true,
id: "",
frontend_message_id: "",
enabled: true,
highlight: false,
emojis: {},
user_emojis: [],
};
export const WithEmoji = Template.bind({});
WithEmoji.args = {
text: "As you\u2019ve mentioned, Star Wars has many sequels, prequels, and crossovers. The official list of movies in Star Wars is:",
is_assistant: true,
id: "",
frontend_message_id: "",
enabled: true,
highlight: false,
emojis: { "-1": 5, "+1": 1 },
user_emojis: ["-1"],
};
website/src/components/Messages/MessageTableEntry.tsx
+148 -31
View File
@@ -1,23 +1,50 @@
import { Avatar, Box, HStack, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
import {
Avatar,
Box,
HStack,
Menu,
MenuButton,
MenuDivider,
MenuGroup,
MenuItem,
MenuList,
SimpleGrid,
useBreakpointValue,
useColorModeValue,
useDisclosure,
} from "@chakra-ui/react";
import { boolean } from "boolean";
import { ClipboardList, Flag, MessageSquare, MoreHorizontal } from "lucide-react";
import { useRouter } from "next/router";
import { useCallback, useMemo } from "react";
import { FlaggableElement } from "src/components/FlaggableElement";
import { Message } from "src/types/Conversation";
import { useTranslation } from "next-i18next";
import { useCallback, useEffect, useMemo, useState } from "react";
import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
import { getEmojiIcon, MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
import { ReportPopup } from "src/components/Messages/ReportPopup";
import { post } from "src/lib/api";
import { Message, MessageEmojis } from "src/types/Conversation";
import { colors } from "styles/Theme/colors";
import useSWRMutation from "swr/mutation";
interface MessageTableEntryProps {
item: Message;
message: Message;
enabled?: boolean;
highlight?: boolean;
}
export function MessageTableEntry(props: MessageTableEntryProps) {
export function MessageTableEntry({ message, enabled, highlight }: MessageTableEntryProps) {
const router = useRouter();
const [emojiState, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
useEffect(() => {
setEmojis({
emojis: message?.emojis || {},
user_emojis: message?.user_emojis || [],
});
}, [message.emojis, message.user_emojis]);
const { item } = props;
const goToMessage = useCallback(() => router.push(`/messages/${item.id}`), [router, item.id]);
const goToMessage = useCallback(() => router.push(`/messages/${message.id}`), [router, message.id]);
const { isOpen: reportPopupOpen, onOpen: showReportPopup, onClose: closeReportPopup } = useDisclosure();
const { isOpen: labelPopupOpen, onOpen: showLabelPopup, onClose: closeLabelPopup } = useDisclosure();
const backgroundColor = useColorModeValue("gray.100", "gray.700");
const backgroundColor2 = useColorModeValue("#DFE8F1", "#42536B");
@@ -32,34 +59,124 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
borderColor={borderColor}
size={inlineAvatar ? "xs" : "sm"}
mr={inlineAvatar ? 2 : 0}
name={`${boolean(item.is_assistant) ? "Assistant" : "User"}`}
src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
name={`${boolean(message.is_assistant) ? "Assistant" : "User"}`}
src={`${boolean(message.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
/>
),
[borderColor, inlineAvatar, item.is_assistant]
[borderColor, inlineAvatar, message.is_assistant]
);
const highlightColor = useColorModeValue(colors.light.highlight, colors.dark.highlight);
const { trigger: sendEmojiChange } = useSWRMutation(`/api/messages/${message.id}/emoji`, post, {
onSuccess: setEmojis,
});
const react = (emoji: string, state: boolean) => {
sendEmojiChange({ op: state ? "add" : "remove", emoji });
};
return (
<FlaggableElement message={item}>
<HStack w={["full", "full", "full", "fit-content"]} gap={2}>
{!inlineAvatar && avatar}
<Box
width={["full", "full", "full", "fit-content"]}
maxWidth={["full", "full", "full", "2xl"]}
p="4"
borderRadius="md"
bg={item.is_assistant ? backgroundColor : backgroundColor2}
outline={props.highlight && "2px solid black"}
outlineColor={highlightColor}
onClick={props.enabled && goToMessage}
_hover={props.enabled && { cursor: "pointer", opacity: 0.9 }}
whiteSpace="pre-wrap"
<HStack w={["full", "full", "full", "fit-content"]} gap={2}>
{!inlineAvatar && avatar}
<Box
width={["full", "full", "full", "fit-content"]}
maxWidth={["full", "full", "full", "2xl"]}
p="4"
borderRadius="md"
bg={message.is_assistant ? backgroundColor : backgroundColor2}
outline={highlight && "2px solid black"}
outlineColor={highlightColor}
onClick={enabled && goToMessage}
whiteSpace="pre-wrap"
cursor={enabled && "pointer"}
style={{ position: "relative" }}
>
{inlineAvatar && avatar}
{message.text}
<HStack
style={{ float: "right", position: "relative", right: "-0.3em", bottom: "-0em", marginLeft: "1em" }}
onClick={(e) => e.stopPropagation()}
>
{inlineAvatar && avatar}
{item.text}
</Box>
</HStack>
</FlaggableElement>
{Object.entries(emojiState.emojis).map(([emoji, count]) => (
<MessageEmojiButton
key={emoji}
emoji={{ name: emoji, count }}
checked={emojiState.user_emojis.includes(emoji)}
onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
/>
))}
<MessageActions
react={react}
userEmoji={emojiState.user_emojis}
onLabel={showLabelPopup}
onReport={showReportPopup}
messageId={message.id}
/>
<LabelMessagePopup messageId={message.id} show={labelPopupOpen} onClose={closeLabelPopup} />
<ReportPopup messageId={message.id} show={reportPopupOpen} onClose={closeReportPopup} />
</HStack>
</Box>
</HStack>
);
}
const EmojiMenuItem = ({
emoji,
checked,
react,
}: {
emoji: string;
checked?: boolean;
react: (emoji: string, state: boolean) => void;
}) => {
const activeColor = useColorModeValue(colors.light.active, colors.dark.active);
return (
<MenuItem onClick={() => react(emoji, !checked)} justifyContent="center" color={checked ? activeColor : undefined}>
{getEmojiIcon(emoji, "NORMAL")}
</MenuItem>
);
};
const MessageActions = ({
react,
userEmoji,
onLabel,
onReport,
messageId,
}: {
react: (emoji: string, state: boolean) => void;
userEmoji: string[];
onLabel: () => void;
onReport: () => void;
messageId: string;
}) => {
const { t } = useTranslation("message");
return (
<Menu>
<MenuButton>
<MoreHorizontal />
</MenuButton>
<MenuList>
<MenuGroup title={t("reactions")}>
<SimpleGrid columns={4}>
{["+1", "-1"].map((emoji) => (
<EmojiMenuItem key={emoji} emoji={emoji} checked={userEmoji?.includes(emoji)} react={react} />
))}
</SimpleGrid>
</MenuGroup>
<MenuDivider />
<MenuItem onClick={onLabel} icon={<ClipboardList />}>
{t("label_action")}
</MenuItem>
<MenuItem onClick={onReport} icon={<Flag />}>
{t("report_action")}
</MenuItem>
<MenuDivider />
<MenuItem as="a" href={`/messages/${messageId}`} target="_blank" icon={<MessageSquare />}>
{t("open_new_tab_action")}
</MenuItem>
</MenuList>
</Menu>
);
};
website/src/components/Messages/MessageWithChildren.stories.tsx
+99
View File
@@ -0,0 +1,99 @@
import { rest } from "msw";
import { MessageWithChildren } from "./MessageWithChildren";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
title: "Messages/MessageWithChildren",
component: MessageWithChildren,
parameters: {
layout: "fullscreen",
msw: {
handlers: {
messagesDefault: [
rest.get("/api/messages/id-1", (req, res, ctx) => {
return res(
ctx.json({
text: "Some message Text",
is_assistant: false,
id: "id-1",
})
);
}),
rest.get("/api/messages/id-1/children", (req, res, ctx) => {
return res(ctx.json([]));
}),
],
},
},
},
};
const Template = (args) => <MessageWithChildren {...args} />;
export const NoChildren = Template.bind({});
NoChildren.args = {
id: "id-1",
maxDepth: 2,
};
export const WithChildren = Template.bind({});
WithChildren.args = {
id: "id-1",
maxDepth: 1,
};
WithChildren.parameters = {
msw: {
handlers: {
additionalMessages: [
rest.get("/api/messages/id-2", (req, res, ctx) => {
return res(
ctx.json({
text: "Some child message Text",
is_assistant: false,
id: "id-2",
})
);
}),
rest.get("/api/messages/id-3", (req, res, ctx) => {
return res(
ctx.json({
text: "Some child message Text",
is_assistant: false,
id: "id-3",
})
);
}),
rest.get("/api/messages/id-1/children", (req, res, ctx) => {
return res(
ctx.json([
{
text: "Some child message Text",
is_assistant: false,
id: "id-2",
},
{
text: "another child message Text",
is_assistant: false,
id: "id-3",
},
])
);
}),
rest.get("/api/messages/id-2/children", (req, res, ctx) => {
return res(
ctx.json([
{
text: "another message Text",
is_assistant: false,
id: "id-4",
},
])
);
}),
rest.get("/api/messages/id-3/children", (req, res, ctx) => {
return res(ctx.json([]));
}),
],
},
},
};
website/src/components/Messages/MessageWithChildren.tsx
+3 -3
View File
@@ -52,7 +52,7 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
{isFirst ? "Message" : depth === 1 ? "Children" : "Ancestor"}
</Text>
<Box width="fit-content" bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base">
<MessageTableEntry enabled item={message} />
<MessageTableEntry enabled message={message} />
</Box>
</Box>
</>
@@ -86,9 +86,9 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
gap="4"
shadow="base"
>
{children.map((item, idx) => (
{children.map((message, idx) => (
<Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
<MessageTableEntry enabled item={item} />
<MessageTableEntry enabled message={message} />
</Box>
))}
</Box>
website/src/components/Messages/ReportPopup.tsx
+56
View File
@@ -0,0 +1,56 @@
import {
Button,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Textarea,
} from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { useState } from "react";
import { post } from "src/lib/api";
import useSWRMutation from "swr/mutation";
interface ReportPopupProps {
messageId: string;
show: boolean;
onClose: () => void;
}
export const ReportPopup = ({ messageId, show, onClose }: ReportPopupProps) => {
const { t } = useTranslation("message");
const [text, setText] = useState("");
const { trigger } = useSWRMutation("/api/report", post);
const submit = () => {
trigger({
message_id: messageId,
text,
});
setText("");
onClose();
};
return (
<Modal isOpen={show} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{t("report_title")}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Textarea onChange={(e) => setText(e.target.value)} resize="none" placeholder={t("report_placeholder")} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={submit}>
{t("send_report")}
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};
website/src/components/Survey/LabelInputGroup.tsx
-198
View File
@@ -1,198 +0,0 @@
import { Box, Grid, GridItem, Text, useColorModeValue } from "@chakra-ui/react";
import React from "react";
import { useState } from "react";
import { LikertButtons } from "src/components/Buttons/LikertButtons";
import { Explain } from "src/components/Explain";
interface LabelInputGroupProps {
labelIDs: Array<string>;
simple?: boolean;
onChange: (values: number[]) => unknown;
isEditable?: boolean;
}
interface LabelInfo {
zeroText: string;
oneText: string;
zeroDescription: string[];
oneDescription: string[];
inverted: boolean;
}
// This should be moved to the valid labels api endpoint
const label_messages: {
[label: string]: LabelInfo;
} = {
spam: {
zeroText: "Not Spam",
zeroDescription: ["Suitable for training Open Assistant."],
oneText: "Spam",
oneDescription: [
"Seems to be intentionally low-quality or irrelevant",
'We consider the following unwanted content as spam: trolling, intentional undermining of our purpose, illegal material, material that violates our code of conduct, and other things that are inappropriate for our dataset. We collect these under the common heading of "spam".',
"This is not an assessment of whether this message is the best possible answer. Especially for prompts or user-replies, we very much want to retain all kinds of responses in the dataset, so that the assistant can learn to reply appropriately.",
"Please mark this text as spam only if it is clearly unsuited to be part of our dataset, as outlined above, and try not to make any subjective value-judgments beyond that.",
],
inverted: true,
},
fails_task: {
zeroText: "Follows Instructions",
zeroDescription: [],
oneText: "Fails Task",
oneDescription: ["Fails to follow the correct instruction / task"],
inverted: true,
},
not_appropriate: {
zeroText: "Appropriate",
zeroDescription: [],
oneText: "Inappropriate",
oneDescription: ["Inappropriate for customer assistant"],
inverted: true,
},
violence: {
zeroText: "Harmless",
zeroDescription: [],
oneText: "Violent",
oneDescription: ["Encourages or fails to discourage violence/abuse/terrorism/self-harm"],
inverted: true,
},
excessive_harm: {
zeroText: "Safe",
zeroDescription: [],
oneText: "Harmful",
oneDescription: [
"Content likely to cause excessive harm not justifiable in the context",
"Harm refers to physical or mental damage or injury to someone or something. Excessive refers to a reasonable threshold of harm in the context, for instance damaging skin is not excessive in the context of surgery.",
],
inverted: true,
},
sexual_content: {
zeroText: "Non Sexual",
zeroDescription: [],
oneText: "Sexual",
oneDescription: ["Contains sexual content"],
inverted: true,
},
toxicity: {
zeroText: "Polite",
zeroDescription: [],
oneText: "Rude",
oneDescription: ["Contains rude, abusive, profane or insulting content"],
inverted: true,
},
moral_judgement: {
zeroText: "Non-Judgemental",
zeroDescription: [],
oneText: "Judgemental",
oneDescription: ["Expresses moral judgement"],
inverted: true,
},
political_content: {
zeroText: "Apolitical",
zeroDescription: [],
oneText: "Political",
oneDescription: ["Expresses political views"],
inverted: true,
},
humor: {
zeroText: "Serious",
zeroDescription: [],
oneText: "Humorous",
oneDescription: ["Contains humorous content including sarcasm"],
inverted: false,
},
hate_speech: {
zeroText: "Safe",
zeroDescription: [],
oneText: "Hateful",
oneDescription: [
"Content is abusive or threatening and expresses prejudice against a protected characteristic",
"Prejudice refers to preconceived views not based on reason. Protected characteristics include gender, ethnicity, religion, sexual orientation, and similar characteristics.",
],
inverted: true,
},
threat: {
zeroText: "Safe",
zeroDescription: [],
oneText: "Threatening",
oneDescription: ["Contains a threat against a person or persons"],
inverted: true,
},
misleading: {
zeroText: "Accurate",
zeroDescription: [],
oneText: "Misleading",
oneDescription: ["Contains text which is incorrect or misleading"],
inverted: true,
},
helpful: {
zeroText: "Unhelful",
zeroDescription: [],
oneText: "Helpful",
oneDescription: ["Completes the task to a high standard"],
inverted: false,
},
creative: {
zeroText: "Boring",
zeroDescription: [],
oneText: "Creative",
oneDescription: ["Expresses creativity in responding to the task"],
inverted: false,
},
};
export const LabelInputGroup = ({ labelIDs, onChange, isEditable = true }: LabelInputGroupProps) => {
const [labelValues, setLabelValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => null));
const cardColor = useColorModeValue("gray.50", "gray.800");
return (
<Grid templateColumns={"minmax(min-content, 30em)"} rowGap={2}>
{labelIDs.map((labelId, idx) => {
const { zeroText, oneText, zeroDescription, oneDescription, inverted } = label_messages[labelId];
let textA = zeroText;
let textB = oneText;
let descriptionA = zeroDescription;
let descriptionB = oneDescription;
if (inverted) [textA, textB, descriptionA, descriptionB] = [textB, textA, descriptionB, descriptionA];
return (
<Box key={idx} padding={2} bg={cardColor} borderRadius="md" position="relative">
<Grid
templateColumns={{
base: "minmax(0, 1fr) minmax(0, 1fr)",
sm: "minmax(0, 1fr) auto minmax(0, 1fr)",
}}
alignItems="center"
>
<Text>
{textA}
{descriptionA.length > 0 ? <Explain explanation={descriptionA} /> : null}
</Text>
<GridItem colSpan={{ base: 2, sm: 1 }} gridColumnStart={{ base: 1, sm: 2 }} gridRow={{ base: 2, sm: 1 }}>
<LikertButtons
isDisabled={!isEditable}
count={5}
data-cy="label-options"
onChange={(value) => {
const newState = labelValues.slice();
newState[idx] = value === null ? null : inverted ? 1 - value : value;
onChange(newState);
setLabelValues(newState);
}}
/>
</GridItem>
<GridItem>
<Text textAlign="right">
{textB}
{descriptionB.length > 0 ? <Explain explanation={descriptionB} /> : null}
</Text>
</GridItem>
</Grid>
</Box>
);
})}
</Grid>
);
};
website/src/components/Survey/LabelLikertGroup.tsx
+243
View File
@@ -0,0 +1,243 @@
import { Box, Grid, GridItem, Text, useColorModeValue } from "@chakra-ui/react";
import React from "react";
import { useState } from "react";
import { LikertButtons } from "src/components/Buttons/LikertButtons";
import { Explain } from "src/components/Explain";
interface LabelInputGroupProps {
labelIDs: Array<string>;
onChange: (values: number[]) => unknown;
isEditable?: boolean;
}
interface LabelInfo {
zeroText: string;
oneText: string;
zeroDescription: string[];
oneDescription: string[];
inverted: boolean;
}
const getLabelInfo = (label: string): LabelInfo => {
switch (label) {
case "spam":
return {
zeroText: "Not Spam",
zeroDescription: ["Suitable for training Open Assistant."],
oneText: "Spam",
oneDescription: [
"Seems to be intentionally low-quality or irrelevant",
'We consider the following unwanted content as spam: trolling, intentional undermining of our purpose, illegal material, material that violates our code of conduct, and other things that are inappropriate for our dataset. We collect these under the common heading of "spam".',
"This is not an assessment of whether this message is the best possible answer. Especially for prompts or user-replies, we very much want to retain all kinds of responses in the dataset, so that the assistant can learn to reply appropriately.",
"Please mark this text as spam only if it is clearly unsuited to be part of our dataset, as outlined above, and try not to make any subjective value-judgments beyond that.",
],
inverted: true,
};
case "fails_task":
return {
zeroText: "Follows Instructions",
zeroDescription: [],
oneText: "Fails Task",
oneDescription: ["Fails to follow the correct instruction / task"],
inverted: true,
};
case "not_appropriate":
return {
zeroText: "Appropriate",
zeroDescription: [],
oneText: "Inappropriate",
oneDescription: ["Inappropriate for customer assistant"],
inverted: true,
};
case "violence":
return {
zeroText: "Harmless",
zeroDescription: [],
oneText: "Violent",
oneDescription: ["Encourages or fails to discourage violence/abuse/terrorism/self-harm"],
inverted: true,
};
case "excessive_harm":
return {
zeroText: "Safe",
zeroDescription: [],
oneText: "Harmful",
oneDescription: [
"Content likely to cause excessive harm not justifiable in the context",
"Harm refers to physical or mental damage or injury to someone or something. Excessive refers to a reasonable threshold of harm in the context, for instance damaging skin is not excessive in the context of surgery.",
],
inverted: true,
};
case "sexual_content":
return {
zeroText: "Non Sexual",
zeroDescription: [],
oneText: "Sexual",
oneDescription: ["Contains sexual content"],
inverted: true,
};
case "toxicity":
return {
zeroText: "Polite",
zeroDescription: [],
oneText: "Rude",
oneDescription: ["Contains rude, abusive, profane or insulting content"],
inverted: true,
};
case "moral_judgement":
return {
zeroText: "Non-Judgemental",
zeroDescription: [],
oneText: "Judgemental",
oneDescription: ["Expresses moral judgement"],
inverted: true,
};
case "political_content":
return {
zeroText: "Apolitical",
zeroDescription: [],
oneText: "Political",
oneDescription: ["Expresses political views"],
inverted: true,
};
case "humor":
return {
zeroText: "Serious",
zeroDescription: [],
oneText: "Humorous",
oneDescription: ["Contains humorous content including sarcasm"],
inverted: false,
};
case "hate_speech":
return {
zeroText: "Safe",
zeroDescription: [],
oneText: "Hateful",
oneDescription: [
"Content is abusive or threatening and expresses prejudice against a protected characteristic",
"Prejudice refers to preconceived views not based on reason. Protected characteristics include gender, ethnicity, religion, sexual orientation, and similar characteristics.",
],
inverted: true,
};
case "threat":
return {
zeroText: "Safe",
zeroDescription: [],
oneText: "Threatening",
oneDescription: ["Contains a threat against a person or persons"],
inverted: true,
};
case "misleading":
return {
zeroText: "Accurate",
zeroDescription: [],
oneText: "Misleading",
oneDescription: ["Contains text which is incorrect or misleading"],
inverted: true,
};
case "helpfulness":
return {
zeroText: "Unhelpful",
zeroDescription: [],
oneText: "Helpful",
oneDescription: ["Completes the task to a high standard"],
inverted: false,
};
case "creative":
return {
zeroText: "Boring",
zeroDescription: [],
oneText: "Creative",
oneDescription: ["Expresses creativity in responding to the task"],
inverted: false,
};
case "pii":
return {
zeroText: "Clean",
zeroDescription: [],
oneText: "Contains PII",
oneDescription: ["Contains personally identifing information"],
inverted: false,
};
case "quality":
return {
zeroText: "Low Quality",
zeroDescription: [],
oneText: "High Quality",
oneDescription: [],
inverted: false,
};
case "creativity":
return {
zeroText: "Ordinary",
zeroDescription: [],
oneText: "Creative",
oneDescription: [],
inverted: false,
};
default:
return {
zeroText: `!${label}`,
zeroDescription: [],
oneText: label,
oneDescription: [],
inverted: false,
};
}
};
export const LabelLikertGroup = ({ labelIDs, onChange, isEditable = true }: LabelInputGroupProps) => {
const [labelValues, setLabelValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => null));
const cardColor = useColorModeValue("gray.50", "gray.800");
return (
<Grid templateColumns={"minmax(min-content, 30em)"} rowGap={2}>
{labelIDs.map((labelId, idx) => {
const { zeroText, oneText, zeroDescription, oneDescription, inverted } = getLabelInfo(labelId);
let textA = zeroText;
let textB = oneText;
let descriptionA = zeroDescription;
let descriptionB = oneDescription;
if (inverted) [textA, textB, descriptionA, descriptionB] = [textB, textA, descriptionB, descriptionA];
return (
<Box key={idx} padding={2} bg={cardColor} borderRadius="md" position="relative">
<Grid
templateColumns={{
base: "minmax(0, 1fr) minmax(0, 1fr)",
sm: "minmax(0, 1fr) auto minmax(0, 1fr)",
}}
alignItems="center"
>
<Text as="div">
{textA}
{descriptionA.length > 0 ? <Explain explanation={descriptionA} /> : null}
</Text>
<GridItem colSpan={{ base: 2, sm: 1 }} gridColumnStart={{ base: 1, sm: 2 }} gridRow={{ base: 2, sm: 1 }}>
<LikertButtons
isDisabled={!isEditable}
count={5}
data-cy="label-options"
onChange={(value) => {
const newState = labelValues.slice();
newState[idx] = value === null ? null : inverted ? 1 - value : value;
onChange(newState);
setLabelValues(newState);
}}
/>
</GridItem>
<GridItem>
<Text textAlign="right" as="div">
{textB}
{descriptionB.length > 0 ? <Explain explanation={descriptionB} /> : null}
</Text>
</GridItem>
</Grid>
</Box>
);
})}
</Grid>
);
};
website/src/components/Survey/TaskControls.tsx
+46 -51
View File
@@ -1,71 +1,66 @@
import { Box, Flex, IconButton, Tooltip, useColorModeValue } from "@chakra-ui/react";
import { Box, Flex, IconButton, Progress, Tooltip, useColorModeValue } from "@chakra-ui/react";
import { Edit2 } from "lucide-react";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
import { TaskStatus } from "src/components/Tasks/Task";
import { BaseTask } from "src/types/Task";
export interface TaskControlsProps {
// we need a task type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
task: any;
className?: string;
task: BaseTask;
taskStatus: TaskStatus;
isLoading: boolean;
onEdit: () => void;
onReview: () => void;
onSubmit: () => void;
onSkip: (reason: string) => void;
}
export const TaskControls = (props: TaskControlsProps) => {
export const TaskControls = ({
task,
taskStatus,
isLoading,
onEdit,
onReview,
onSubmit,
onSkip,
}: TaskControlsProps) => {
const backgroundColor = useColorModeValue("white", "gray.800");
return (
<Box
width="full"
bg={backgroundColor}
borderRadius="xl"
p="6"
display="flex"
flexDirection={["column", "row"]}
shadow="base"
gap="4"
>
<TaskInfo id={props.task.id} output="Submit your answer" />
<Flex width={["full", "fit-content"]} justify="center" ml="auto" gap={2}>
{props.taskStatus === "REVIEW" || props.taskStatus === "SUBMITTED" ? (
<>
<Tooltip label="Edit">
<IconButton
size="lg"
data-cy="edit"
aria-label="edit"
onClick={props.onEdit}
icon={<Edit2 size="1em" />}
/>
</Tooltip>
<SubmitButton
colorScheme="green"
data-cy="submit"
isDisabled={props.taskStatus === "SUBMITTED"}
onClick={props.onSubmit}
>
Submit
</SubmitButton>
</>
) : (
<>
<SkipButton onSkip={props.onSkip} />
<SubmitButton
colorScheme="blue"
data-cy="review"
isDisabled={props.taskStatus === "NOT_SUBMITTABLE"}
onClick={props.onReview}
>
Review
</SubmitButton>
</>
)}
<Box width="full" bg={backgroundColor} borderRadius="xl" shadow="base">
{isLoading && <Progress size="sm" isIndeterminate />}
<Flex p="6" gap="4" direction={["column", "row"]}>
<TaskInfo id={task.id} output="Submit your answer" />
<Flex width={["full", "fit-content"]} justify="center" ml="auto" gap={2}>
{taskStatus.mode === "EDIT" ? (
<>
<SkipButton onSkip={onSkip} />
<SubmitButton
colorScheme="blue"
data-cy="review"
isDisabled={taskStatus.replyValidity === "INVALID"}
onClick={onReview}
>
Review
</SubmitButton>
</>
) : (
<>
<Tooltip label="Edit">
<IconButton size="lg" data-cy="edit" aria-label="edit" onClick={onEdit} icon={<Edit2 size="1em" />} />
</Tooltip>
<SubmitButton
colorScheme="green"
data-cy="submit"
isDisabled={taskStatus.mode === "SUBMITTED"}
onClick={onSubmit}
>
Submit
</SubmitButton>
</>
)}
</Flex>
</Flex>
</Box>
);
website/src/components/TaskPage/TaskPage.tsx
+53
View File
@@ -0,0 +1,53 @@
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { TaskInfos } from "src/components/Tasks/TaskTypes";
import { taskApiHooks } from "src/lib/constants";
import { getTypeSafei18nKey } from "src/lib/i18n";
import { TaskType } from "src/types/Task";
import { KnownTaskType } from "src/types/Tasks";
type TaskPageProps = {
type: TaskType;
};
export const TaskPage = ({ type }: TaskPageProps) => {
const { t } = useTranslation(["tasks", "common"]);
const taskApiHook = taskApiHooks[type];
const { response, isLoading, completeTask, skipTask } = taskApiHook(type);
const taskInfo = TaskInfos.find((taskType) => taskType.type === type);
let body;
switch (response.taskAvailability) {
case "AWAITING_INITIAL":
body = <LoadingScreen text={t("common:loading")} />;
break;
case "NONE_AVAILABLE":
body = <TaskEmptyState />;
break;
case "AVAILABLE":
body = (
<Task
key={response.task.id}
frontendId={response.id}
task={response.task as KnownTaskType}
isLoading={isLoading}
completeTask={completeTask}
skipTask={skipTask}
/>
);
break;
}
return (
<>
<Head>
<title>{t(getTypeSafei18nKey(`${taskInfo.id}.label`))}</title>
<meta name="description" content={t(getTypeSafei18nKey(`${taskInfo.id}.desc`))} />
</Head>
{body}
</>
);
};
website/src/components/Tasks/CreateTask.tsx
+9 -3
View File
@@ -7,6 +7,8 @@ import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
import { TaskSurveyProps } from "src/components/Tasks/Task";
import { TaskHeader } from "src/components/Tasks/TaskHeader";
import { getTypeSafei18nKey } from "src/lib/i18n";
import { TaskType } from "src/types/Task";
import { CreateTaskType } from "src/types/Tasks";
export const CreateTask = ({
task,
@@ -15,7 +17,7 @@ export const CreateTask = ({
isDisabled,
onReplyChanged,
onValidityChanged,
}: TaskSurveyProps<{ text: string }>) => {
}: TaskSurveyProps<CreateTaskType, { text: string }>) => {
const { t, i18n } = useTranslation(["tasks", "common"]);
const cardColor = useColorModeValue("gray.50", "gray.800");
const titleColor = useColorModeValue("gray.800", "gray.300");
@@ -39,7 +41,7 @@ export const CreateTask = ({
<TwoColumnsWithCards>
<>
<TaskHeader taskType={taskType} />
{!!task.conversation && (
{task.type !== TaskType.initial_prompt && (
<Box mt="4" borderRadius="lg" bg={cardColor} className="p-3 sm:p-6">
<MessageTable messages={task.conversation.messages} highlightLastMessage />
</Box>
@@ -56,7 +58,11 @@ export const CreateTask = ({
text={inputText}
onTextChange={textChangeHandler}
thresholds={{ low: 20, medium: 40, goal: 50 }}
textareaProps={{ placeholder: t("tasks:write_initial_prompt"), isDisabled, isReadOnly: !isEditable }}
textareaProps={{
placeholder: t(getTypeSafei18nKey(`tasks:${taskType.id}.response_placeholder`)),
isDisabled,
isReadOnly: !isEditable,
}}
/>
</Stack>
</>
website/src/components/Tasks/EvaluateTask.tsx
+10 -6
View File
@@ -5,6 +5,8 @@ import { Sortable } from "src/components/Sortable/Sortable";
import { SurveyCard } from "src/components/Survey/SurveyCard";
import { TaskSurveyProps } from "src/components/Tasks/Task";
import { TaskHeader } from "src/components/Tasks/TaskHeader";
import { TaskType } from "src/types/Task";
import { RankTaskType } from "src/types/Tasks";
export const EvaluateTask = ({
task,
@@ -13,20 +15,22 @@ export const EvaluateTask = ({
isDisabled,
onReplyChanged,
onValidityChanged,
}: TaskSurveyProps<{ ranking: number[] }>) => {
}: TaskSurveyProps<RankTaskType, { ranking: number[] }>) => {
const cardColor = useColorModeValue("gray.50", "gray.800");
const [ranking, setRanking] = useState<number[]>(null);
let messages = [];
if (task.conversation) {
if (task.type !== TaskType.rank_initial_prompts) {
messages = task.conversation.messages;
messages = messages.map((message, index) => ({ ...message, id: index }));
}
useEffect(() => {
if (ranking === null) {
const defaultRanking = (task.replies ?? task.prompts).map((_, idx) => idx);
onReplyChanged({ ranking: defaultRanking });
if (task.type === TaskType.rank_initial_prompts) {
onReplyChanged({ ranking: task.prompts.map((_, idx) => idx) });
} else {
onReplyChanged({ ranking: task.replies.map((_, idx) => idx) });
}
onValidityChanged("DEFAULT");
} else {
onReplyChanged({ ranking });
@@ -34,7 +38,7 @@ export const EvaluateTask = ({
}
}, [task, ranking, onReplyChanged, onValidityChanged]);
const sortables = task.replies ? "replies" : "prompts";
const sortables = task.type === TaskType.rank_initial_prompts ? "prompts" : "replies";
return (
<div data-cy="task" data-task-type="evaluate-task">
website/src/components/Tasks/LabelTask/LabelTask.tsx
+53 -32
View File
@@ -1,12 +1,18 @@
import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
import { Box, useBoolean, useColorModeValue } from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { useEffect, useState } from "react";
import { MessageView } from "src/components/Messages";
import { LabelInputGroup } from "src/components/Messages/LabelInputGroup";
import { MessageTable } from "src/components/Messages/MessageTable";
import { LabelInputGroup } from "src/components/Survey/LabelInputGroup";
import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
import { TaskSurveyProps } from "src/components/Tasks/Task";
import { TaskHeader } from "src/components/Tasks/TaskHeader";
import { TaskType } from "src/types/Task";
import { LabelTaskType } from "src/types/Tasks";
const isRequired = (labelName: string, requiredLabels?: string[]) => {
return requiredLabels ? requiredLabels.includes(labelName) : false;
};
export const LabelTask = ({
task,
@@ -14,52 +20,67 @@ export const LabelTask = ({
isEditable,
onReplyChanged,
onValidityChanged,
}: TaskSurveyProps<{ text: string; labels: Record<string, number>; message_id: string }>) => {
const [sliderValues, setSliderValues] = useState<number[]>(new Array(task.valid_labels.length).fill(null));
}: TaskSurveyProps<LabelTaskType, { text: string; labels: Record<string, number>; message_id: string }>) => {
const { t } = useTranslation("labelling");
const [values, setValues] = useState<number[]>(new Array(task.labels.length).fill(null));
const [userInputMade, setUserInputMade] = useBoolean(false);
// Initial setup to run when the task changes
useEffect(() => {
console.assert(task.valid_labels.length === sliderValues.length);
const labels = Object.fromEntries(task.valid_labels.map((label, i) => [label, sliderValues[i]]));
onReplyChanged({ labels, text: task.reply || task.prompt, message_id: task.message_id });
onValidityChanged(sliderValues.every((value) => value !== null) ? "VALID" : "INVALID");
}, [task, sliderValues, onReplyChanged, onValidityChanged]);
setValues(new Array(task.labels.length).fill(null));
onValidityChanged(task.labels.some(({ name }) => isRequired(name, task.mandatory_labels)) ? "INVALID" : "DEFAULT");
setUserInputMade.off();
}, [task, setUserInputMade, onValidityChanged]);
// Update the reply and validity when the values change
useEffect(() => {
onReplyChanged({
text: "unused?",
labels: Object.fromEntries(task.labels.map(({ name }, idx) => [name, values[idx] || 0])),
message_id: task.message_id,
});
onValidityChanged(
task.labels.some(({ name }, idx) => values[idx] === null && isRequired(name, task.mandatory_labels))
? "INVALID"
: userInputMade
? "VALID"
: "DEFAULT"
);
}, [task, values, onReplyChanged, userInputMade, onValidityChanged]);
const cardColor = useColorModeValue("gray.50", "gray.800");
const isSpamTask = task.mode === "simple" && task.valid_labels.length === 1 && task.valid_labels[0] === "spam";
return (
<div data-cy="task" data-task-type="label-task">
<div data-cy="task" data-task-type={isSpamTask ? "spam-task" : "label-task"}>
<TwoColumnsWithCards>
<>
<TaskHeader taskType={taskType} />
{task.conversation ? (
{task.type !== TaskType.label_initial_prompt ? (
<Box mt="4" p={[4, 6]} borderRadius="lg" bg={cardColor}>
<MessageTable
messages={[
...(task.conversation?.messages ?? []),
{
text: task.reply,
is_assistant: task.type === TaskType.label_assistant_reply,
message_id: task.message_id,
},
]}
highlightLastMessage
/>
<MessageTable messages={task.conversation.messages} highlightLastMessage />
</Box>
) : (
<Box mt="4">
<MessageView text={task.prompt} is_assistant={false} id={task.message_id} />
<MessageView text={task.prompt} is_assistant={false} id={task.message_id} emojis={{}} user_emojis={[]} />
</Box>
)}
</>
<Flex direction="column" alignItems="stretch">
<Text>The highlighted message:</Text>
<LabelInputGroup
simple={task.mode === "simple"}
labelIDs={task.valid_labels}
isEditable={isEditable}
onChange={setSliderValues}
/>
</Flex>
<LabelInputGroup
labels={task.labels}
values={values}
requiredLabels={task.mandatory_labels}
isEditable={isEditable}
instructions={{
yesNoInstruction: t("label_highlighted_yes_no_instruction"),
flagInstruction: t("label_highlighted_flag_instruction"),
likertInstruction: t("label_highlighted_likert_instruction"),
}}
onChange={(values) => {
setValues(values);
setUserInputMade.on();
}}
/>
</TwoColumnsWithCards>
</div>
);
website/src/components/Tasks/Task/Task.stories.tsx
+8 -5
View File
@@ -7,8 +7,10 @@ export default {
component: Task,
};
const Template = ({ frontendId, task, trigger, mutate }) => {
return <Task frontendId={frontendId} task={task} trigger={trigger} mutate={mutate} />;
const Template = ({ frontendId, task, isLoading, completeTask, skipTask }) => {
return (
<Task frontendId={frontendId} task={task} isLoading={isLoading} completeTask={completeTask} skipTask={skipTask} />
);
};
export const Default = Template.bind({});
@@ -23,10 +25,11 @@ Default.args = {
type: "label_prompter_reply",
valid_labels: ["spam", "fails_task"],
},
trigger: (id, update_type, content) => {
isLoading: false,
completeTask: (id, update_type, content) => {
console.log(content);
},
mutate: () => {
console.log("mutate");
skipTask: () => {
console.log("skip");
},
};
website/src/components/Tasks/Task/Task.tsx
+143 -92
View File
@@ -1,5 +1,6 @@
import { useTranslation } from "next-i18next";
import { useRef, useState } from "react";
import { useCallback, useEffect, useReducer } from "react";
import { useMemo, useRef } from "react";
import { TaskControls } from "src/components/Survey/TaskControls";
import { CreateTask } from "src/components/Tasks/CreateTask";
import { EvaluateTask } from "src/components/Tasks/EvaluateTask";
@@ -8,15 +9,53 @@ import { TaskCategory, TaskInfo, TaskInfos } from "src/components/Tasks/TaskType
import { UnchangedWarning } from "src/components/Tasks/UnchangedWarning";
import { post } from "src/lib/api";
import { getTypeSafei18nKey } from "src/lib/i18n";
import { TaskContent, TaskReplyValidity } from "src/types/Task";
import { BaseTask, TaskContent, TaskReplyValidity } from "src/types/Task";
import { CreateTaskType, KnownTaskType, LabelTaskType, RankTaskType } from "src/types/Tasks";
import useSWRMutation from "swr/mutation";
export type TaskStatus = "NOT_SUBMITTABLE" | "DEFAULT" | "VALID" | "REVIEW" | "SUBMITTED";
interface EditMode {
mode: "EDIT";
replyValidity: TaskReplyValidity;
}
interface ReviewMode {
mode: "REVIEW";
}
interface DefaultWarnMode {
mode: "DEFAULT_WARN";
}
interface SubmittedMode {
mode: "SUBMITTED";
}
export interface TaskSurveyProps<T> {
// we need a task type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
task: any;
export type TaskStatus = EditMode | DefaultWarnMode | ReviewMode | SubmittedMode;
interface NewTask {
action: "NEW_TASK";
}
interface Review {
action: "REVIEW";
}
interface SetSubmitted {
action: "SET_SUBMITTED";
}
interface ReturnToEdit {
action: "RETURN_EDIT";
}
interface AcceptDefault {
action: "ACCEPT_DEFAULT";
}
interface UpdateValidity {
action: "UPDATE_VALIDITY";
replyValidity: TaskReplyValidity;
}
export interface TaskSurveyProps<TaskType extends BaseTask, T> {
task: TaskType;
taskType: TaskInfo;
isEditable: boolean;
isDisabled?: boolean;
@@ -24,19 +63,76 @@ export interface TaskSurveyProps<T> {
onValidityChanged: (validity: TaskReplyValidity) => void;
}
export const Task = ({ frontendId, task, trigger, mutate }) => {
interface TaskProps {
frontendId: string;
task: KnownTaskType;
isLoading: boolean;
completeTask: (TaskContent) => void;
skipTask: () => void;
}
export const Task = ({ frontendId, task, isLoading, completeTask, skipTask }: TaskProps) => {
const { t } = useTranslation("tasks");
const [taskStatus, setTaskStatus] = useState<TaskStatus>("NOT_SUBMITTABLE");
const [taskStatus, taskEvent] = useReducer(
(
status: TaskStatus,
event: NewTask | UpdateValidity | AcceptDefault | Review | ReturnToEdit | SetSubmitted
): TaskStatus => {
switch (event.action) {
case "NEW_TASK":
return { mode: "EDIT", replyValidity: "INVALID" };
case "UPDATE_VALIDITY":
return status.mode === "EDIT" ? { mode: "EDIT", replyValidity: event.replyValidity } : status;
case "ACCEPT_DEFAULT":
return status.mode === "DEFAULT_WARN" ? { mode: "REVIEW" } : status;
case "REVIEW": {
if (status.mode === "EDIT") {
switch (status.replyValidity) {
case "DEFAULT":
return { mode: "DEFAULT_WARN" };
case "VALID":
return { mode: "REVIEW" };
}
}
return status;
}
case "RETURN_EDIT": {
switch (status.mode) {
case "REVIEW":
return { mode: "EDIT", replyValidity: "VALID" };
case "DEFAULT_WARN":
return { mode: "EDIT", replyValidity: "DEFAULT" };
default:
return status;
}
}
case "SET_SUBMITTED": {
return status.mode === "REVIEW" ? { mode: "SUBMITTED" } : status;
}
}
},
{ mode: "EDIT", replyValidity: "INVALID" }
);
const replyContent = useRef<TaskContent>(null);
const [showUnchangedWarning, setShowUnchangedWarning] = useState(false);
const updateValidity = useCallback(
(replyValidity: TaskReplyValidity) => taskEvent({ action: "UPDATE_VALIDITY", replyValidity }),
[taskEvent]
);
useEffect(() => {
taskEvent({ action: "NEW_TASK" });
}, [task.id, updateValidity]);
const rootEl = useRef<HTMLDivElement>(null);
const taskType = TaskInfos.find((taskType) => taskType.type === task.type && taskType.mode === task.mode);
const taskType = useMemo(() => {
return TaskInfos.find((taskType) => taskType.type === task.type);
}, [task.type]);
const { trigger: sendRejection } = useSWRMutation("/api/reject_task", post, {
onSuccess: async () => {
mutate();
skipTask();
},
});
@@ -47,128 +143,83 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
});
};
const edit_mode = taskStatus === "NOT_SUBMITTABLE" || taskStatus === "DEFAULT" || taskStatus === "VALID";
const submitted = taskStatus === "SUBMITTED";
const onValidityChanged = (validity: TaskReplyValidity) => {
if (!edit_mode) return;
switch (validity) {
case "DEFAULT":
if (taskStatus !== "DEFAULT") setTaskStatus("DEFAULT");
break;
case "VALID":
if (taskStatus !== "VALID") setTaskStatus("VALID");
break;
case "INVALID":
if (taskStatus !== "NOT_SUBMITTABLE") setTaskStatus("NOT_SUBMITTABLE");
break;
}
};
const onReplyChanged = (content: TaskContent) => {
replyContent.current = content;
};
const reviewResponse = () => {
switch (taskStatus) {
case "DEFAULT":
setShowUnchangedWarning(true);
break;
case "VALID":
setTaskStatus("REVIEW");
break;
default:
return;
}
};
const editResponse = () => {
switch (taskStatus) {
case "REVIEW":
setTaskStatus("VALID");
break;
default:
return;
}
};
const onReplyChanged = useCallback(
(content: TaskContent) => {
replyContent.current = content;
},
[replyContent]
);
const submitResponse = () => {
switch (taskStatus) {
case "REVIEW": {
trigger({
id: frontendId,
update_type: taskType.update_type,
content: replyContent.current,
});
setTaskStatus("SUBMITTED");
scrollToTop(rootEl.current);
break;
}
default:
return;
if (taskStatus.mode === "REVIEW") {
completeTask({
id: frontendId,
update_type: taskType.update_type,
content: replyContent.current,
});
taskEvent({ action: "SET_SUBMITTED" });
scrollToTop(rootEl.current);
}
};
function taskTypeComponent() {
const taskTypeComponent = useMemo(() => {
switch (taskType.category) {
case TaskCategory.Create:
return (
<CreateTask
task={task}
task={task as CreateTaskType}
taskType={taskType}
isEditable={edit_mode}
isDisabled={submitted}
isEditable={taskStatus.mode === "EDIT"}
isDisabled={taskStatus.mode === "SUBMITTED"}
onReplyChanged={onReplyChanged}
onValidityChanged={onValidityChanged}
onValidityChanged={updateValidity}
/>
);
case TaskCategory.Evaluate:
return (
<EvaluateTask
task={task}
task={task as RankTaskType}
taskType={taskType}
isEditable={edit_mode}
isDisabled={submitted}
isEditable={taskStatus.mode === "EDIT"}
isDisabled={taskStatus.mode === "SUBMITTED"}
onReplyChanged={onReplyChanged}
onValidityChanged={onValidityChanged}
onValidityChanged={updateValidity}
/>
);
case TaskCategory.Label:
return (
<LabelTask
task={task}
task={task as LabelTaskType}
taskType={taskType}
isEditable={edit_mode}
isDisabled={submitted}
isEditable={taskStatus.mode === "EDIT"}
isDisabled={taskStatus.mode === "SUBMITTED"}
onReplyChanged={onReplyChanged}
onValidityChanged={onValidityChanged}
onValidityChanged={updateValidity}
/>
);
}
}
}, [task, taskType, taskStatus.mode, onReplyChanged, updateValidity]);
return (
<div ref={rootEl}>
{taskTypeComponent()}
{taskTypeComponent}
<TaskControls
task={task}
taskStatus={taskStatus}
onEdit={editResponse}
onReview={reviewResponse}
isLoading={isLoading}
onEdit={() => taskEvent({ action: "RETURN_EDIT" })}
onReview={() => taskEvent({ action: "REVIEW" })}
onSubmit={submitResponse}
onSkip={rejectTask}
/>
<UnchangedWarning
show={showUnchangedWarning}
show={taskStatus.mode === "DEFAULT_WARN"}
title={t(getTypeSafei18nKey(`${taskType.id}.unchanged_title`)) || t("default.unchanged_title")}
message={t(getTypeSafei18nKey(`${taskType.id}.unchanged_message`)) || t("default.unchanged_message")}
continueButtonText={"Continue anyway"}
onClose={() => setShowUnchangedWarning(false)}
onClose={() => taskEvent({ action: "RETURN_EDIT" })}
onContinueAnyway={() => {
if (taskStatus === "DEFAULT") {
setTaskStatus("REVIEW");
setShowUnchangedWarning(false);
}
taskEvent({ action: "ACCEPT_DEFAULT" });
}}
/>
</div>
website/src/components/UserTable.tsx
+1 -2
View File
@@ -4,8 +4,7 @@ import { Pencil } from "lucide-react";
import Link from "next/link";
import { memo, useState } from "react";
import { get } from "src/lib/api";
import { FetchUsersResponse } from "src/lib/oasst_api_client";
import type { User } from "src/types/Users";
import type { FetchUsersResponse, User } from "src/types/Users";
import useSWR from "swr";
import { DataTable, DataTableColumnDef, FilterItem } from "./DataTable";
website/src/hooks/tasks/useGenericTaskAPI.tsx
+28 -16
View File
@@ -1,26 +1,38 @@
import { useState } from "react";
import { get, post } from "src/lib/api";
import { BaseTask, TaskResponse, TaskType as TaskTypeEnum } from "src/types/Task";
import { TaskApiHook } from "src/types/Hooks";
import { BaseTask, TaskAvailableResponse, TaskResponse, TaskType as TaskTypeEnum } from "src/types/Task";
import useSWRImmutable from "swr/immutable";
import useSWRMutation from "swr/mutation";
export const useGenericTaskAPI = <TaskType extends BaseTask>(taskType: TaskTypeEnum) => {
type ConcreteTaskResponse = TaskResponse<TaskType>;
export const useGenericTaskAPI = <TaskType extends BaseTask>(taskType: TaskTypeEnum): TaskApiHook<TaskType> => {
const [response, setReponse] = useState<TaskResponse<TaskType>>({ taskAvailability: "AWAITING_INITIAL" });
// Note: We use isValidating to indiate we are loading beause it signals eash load, not just the first one.
const { isValidating: isLoading, mutate: requestNewTask } = useSWRImmutable<TaskAvailableResponse<TaskType>>(
"/api/new_task/" + taskType,
get,
{
onSuccess: (response) => {
setReponse({ taskAvailability: "AVAILABLE", ...response });
},
onError: () => {
// We could check for code 503 here for truely unavailable, but we need to do something with other errors anyway.
setReponse({ taskAvailability: "NONE_AVAILABLE" });
},
revalidateOnMount: true,
dedupingInterval: 500,
}
);
const [tasks, setTasks] = useState<ConcreteTaskResponse[]>([]);
const { isLoading, mutate, error } = useSWRImmutable<ConcreteTaskResponse>("/api/new_task/" + taskType, get, {
onSuccess: (data) => setTasks([data]),
revalidateOnMount: true,
dedupingInterval: 500,
});
const { trigger } = useSWRMutation("/api/update_task", post, {
onSuccess: async (newTask: ConcreteTaskResponse) => {
setTasks((oldTasks) => [...oldTasks, newTask]);
mutate();
const { trigger: completeTask } = useSWRMutation<TaskAvailableResponse<TaskType>>("/api/update_task", post, {
onSuccess: () => {
requestNewTask();
},
onError: () => {
// We could check for code 503 here for truely unavailable, but we need to do something with other errors anyway.
setReponse({ taskAvailability: "NONE_AVAILABLE" });
},
});
return { tasks, isLoading, trigger, error, reset: mutate };
return { response, isLoading, completeTask, skipTask: requestNewTask };
};
website/src/lib/api.ts
+5 -1
View File
@@ -6,8 +6,11 @@ const headers = {
"Content-Type": "application/json",
};
// Create Axios such that we always send credential cookies along with the
// request. This allows the Backend services to authenticate the user.
const api = axios.create({
headers,
withCredentials: true,
});
export const get = (url: string) => api.get(url).then((res) => res.data);
@@ -17,7 +20,8 @@ export const post = (url: string, { arg: data }) => api.post(url, data).then((re
api.interceptors.response.use(
(response) => response,
(error) => {
throw new OasstError(error.message ?? error, error.error_code);
const err = error?.response?.data;
throw new OasstError(err?.message ?? error, err?.errorCode, error?.response?.httpStatusCode || -1);
}
);
website/src/lib/auth.ts
+2 -2
View File
@@ -21,14 +21,14 @@ const withoutRole = (role: Role, handler: (arg0: NextApiRequest, arg1: NextApiRe
* Wraps any API Route handler and verifies that the user has the appropriate
* role before running the handler. Returns a 403 otherwise.
*/
const withRole = (role: Role, handler: (arg0: NextApiRequest, arg1: NextApiResponse) => void) => {
const withRole = (role: Role, handler: (arg0: NextApiRequest, arg1: NextApiResponse, token: JWT) => void) => {
return async (req: NextApiRequest, res: NextApiResponse) => {
const token = await getToken({ req });
if (!token || token.role !== role) {
res.status(403).end();
return;
}
return handler(req, res);
return handler(req, res, token);
};
};
website/src/lib/constants.ts
+43
View File
@@ -0,0 +1,43 @@
import {
useCreateAssistantReply,
useCreateInitialPrompt,
useCreatePrompterReply,
} from "src/hooks/tasks/useCreateReply";
import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
import {
useLabelAssistantReplyTask,
useLabelInitialPromptTask,
useLabelPrompterReplyTask,
} from "src/hooks/tasks/useLabelingTask";
import {
useRankAssistantRepliesTask,
useRankInitialPromptsTask,
useRankPrompterRepliesTask,
} from "src/hooks/tasks/useRankReplies";
import { TaskApiHooks } from "src/types/Hooks";
import { TaskType } from "src/types/Task";
export const ERROR_CODES = {
TASK_REQUESTED_TYPE_NOT_AVAILABLE: 1006,
TASK_INVALID_REQUEST_TYPE: 1000,
TASK_ACK_FAILED: 1001,
TASK_NACK_FAILED: 1002,
TASK_INVALID_RESPONSE_TYPE: 1003,
TASK_INTERACTION_REQUEST_FAILED: 1004,
TASK_GENERATION_FAILED: 1005,
TASK_AVAILABILITY_QUERY_FAILED: 1007,
TASK_MESSAGE_TOO_LONG: 1008,
};
export const taskApiHooks: TaskApiHooks = {
[TaskType.random]: useGenericTaskAPI,
[TaskType.assistant_reply]: useCreateAssistantReply,
[TaskType.initial_prompt]: useCreateInitialPrompt,
[TaskType.label_assistant_reply]: useLabelAssistantReplyTask,
[TaskType.label_initial_prompt]: useLabelInitialPromptTask,
[TaskType.label_prompter_reply]: useLabelPrompterReplyTask,
[TaskType.prompter_reply]: useCreatePrompterReply,
[TaskType.rank_assistant_replies]: useRankAssistantRepliesTask,
[TaskType.rank_initial_prompts]: useRankInitialPromptsTask,
[TaskType.rank_prompter_replies]: useRankPrompterRepliesTask,
};
website/src/lib/oasst_api_client.ts
+136 -153
View File
@@ -1,126 +1,34 @@
import type { Message } from "src/types/Conversation";
import type { EmojiOp, Message } from "src/types/Conversation";
import { LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
import type { AvailableTasks } from "src/types/Task";
import type { BackendUser, BackendUserCore, User } from "src/types/Users";
import type { BackendUser, BackendUserCore, FetchUsersParams, FetchUsersResponse } from "src/types/Users";
export class OasstError {
message: string;
errorCode: number;
httpStatusCode: number;
constructor(message: string, errorCode: number, httpStatusCode?: number) {
constructor(message: string, errorCode: number, httpStatusCode: number) {
this.message = message;
this.errorCode = errorCode;
this.httpStatusCode = httpStatusCode;
}
}
export type FetchUsersParams = {
limit: number;
cursor?: string;
direction: "forward" | "back";
searchDisplayName?: string;
sortKey?: "username" | "display_name";
};
export type FetchUsersResponse<T extends User | BackendUser = BackendUser> = {
items: T[];
next?: string;
prev?: string;
sort_key: "username" | "display_name";
order: "asc" | "desc";
};
export class OasstApiClient {
oasstApiUrl: string;
oasstApiKey: string;
userHeaders: Record<string, string> = {};
constructor(oasstApiUrl: string, oasstApiKey: string) {
constructor(oasstApiUrl: string, oasstApiKey: string, user?: BackendUserCore) {
this.oasstApiUrl = oasstApiUrl;
this.oasstApiKey = oasstApiKey;
if (user) {
this.userHeaders = {
"X-OASST-USER": `${user.auth_method}:${user.id}`,
};
}
}
private async post(path: string, body: any): Promise<any> {
const resp = await fetch(`${this.oasstApiUrl}${path}`, {
method: "POST",
headers: {
"X-API-Key": this.oasstApiKey,
"Content-Type": "application/json",
},
body: JSON.stringify(body),
});
if (resp.status === 204) {
return null;
}
if (resp.status >= 300) {
const errorText = await resp.text();
let error: any;
try {
error = JSON.parse(errorText);
} catch (e) {
throw new OasstError(errorText, 0, resp.status);
}
throw new OasstError(error.message ?? error, error.error_code, resp.status);
}
return await resp.json();
}
private async put(path: string): Promise<any> {
const resp = await fetch(`${this.oasstApiUrl}${path}`, {
method: "PUT",
headers: {
"X-API-Key": this.oasstApiKey,
},
});
if (resp.status === 204) {
return null;
}
if (resp.status >= 300) {
const errorText = await resp.text();
let error: any;
try {
error = JSON.parse(errorText);
} catch (e) {
throw new OasstError(errorText, 0, resp.status);
}
throw new OasstError(error.message ?? error, error.error_code, resp.status);
}
return await resp.json();
}
private async get(path: string): Promise<any> {
const resp = await fetch(`${this.oasstApiUrl}${path}`, {
method: "GET",
headers: {
"X-API-Key": this.oasstApiKey,
"Content-Type": "application/json",
},
});
if (resp.status === 204) {
return null;
}
if (resp.status >= 300) {
const errorText = await resp.text();
let error: any;
try {
error = JSON.parse(errorText);
} catch (e) {
throw new OasstError(errorText, 0, resp.status);
}
throw new OasstError(error.message ?? error, error.error_code, resp.status);
}
return await resp.json();
}
// TODO return a strongly typed Task?
// This method is used to store a task in RegisteredTask.task.
// This is a raw Json type, so we can't use it to strongly type the task.
@@ -132,13 +40,13 @@ export class OasstApiClient {
});
}
async ackTask(taskId: string, messageId: string): Promise<void> {
async ackTask(taskId: string, messageId: string): Promise<null> {
return this.post(`/api/v1/tasks/${taskId}/ack`, {
message_id: messageId,
});
}
async nackTask(taskId: string, reason: string): Promise<void> {
async nackTask(taskId: string, reason: string): Promise<null> {
return this.post(`/api/v1/tasks/${taskId}/nack`, {
reason,
});
@@ -170,8 +78,29 @@ export class OasstApiClient {
/**
* Returns the tasks availability information for given `user`.
*/
async fetch_tasks_availability(user: object): Promise<any> {
return this.post("/api/v1/tasks/availability", user);
async fetch_tasks_availability(user: object): Promise<AvailableTasks | null> {
return this.post<AvailableTasks>("/api/v1/tasks/availability", user);
}
/**
* Returns the `Message`s associated with `user_id` in the backend.
*/
async fetch_message(message_id: string, user: BackendUserCore): Promise<Message> {
return this.get<Message>(`/api/v1/messages/${message_id}?username=${user.id}&auth_method=${user.auth_method}`);
}
/**
* Send a report about a message
*/
async send_report(message_id: string, user: BackendUserCore, text: string) {
return this.post("/api/v1/text_labels", {
type: "text_labels",
message_id,
labels: [], // Not yet implemented
text,
is_report: true,
user,
});
}
/**
@@ -191,18 +120,12 @@ export class OasstApiClient {
/**
* Returns the `BackendUser` associated with `user_id`
*/
async fetch_user(user_id: string): Promise<BackendUser> {
async fetch_user(user_id: string): Promise<BackendUser | null> {
return this.get(`/api/v1/users/${user_id}`);
}
/**
* Returns the set of `BackendUser`s stored by the backend.
*
* @param {number} max_count - The maximum number of users to fetch.
* @param {string} cursor - The user's `display_name` to use when paginating.
* @param {boolean} isForward - If true and `cursor` is not empty, pages
* forward. If false and `cursor` is not empty, pages backwards.
* @returns {Promise<BackendUser[]>} A Promise that returns an array of `BackendUser` objects.
*/
async fetch_users({
direction,
@@ -210,53 +133,35 @@ export class OasstApiClient {
cursor,
searchDisplayName,
sortKey = "display_name",
}: FetchUsersParams): Promise<FetchUsersResponse> {
const params = new URLSearchParams({
}: FetchUsersParams): Promise<FetchUsersResponse | null> {
return this.get<FetchUsersResponse>(`/api/v1/users/cursor`, {
search_text: searchDisplayName,
sort_key: sortKey,
max_count: limit.toString(),
max_count: limit,
after: direction === "forward" ? cursor : undefined,
before: direction === "back" ? cursor : undefined,
});
// The backend API uses different query parameters depending on the
// pagination direction but they both take the same cursor value.
// Depending on direction, pick the right query param.
if (cursor !== "") {
params.append(direction === "forward" ? "after" : "before", cursor);
}
const BASE_URL = `/api/v1/users/cursor`;
const url = `${BASE_URL}/?${params.toString()}`;
return this.get(url);
}
// async fetch_user_by_display_name(name: string): Promise<BackendUser[]> {
// const params = new URLSearchParams({
// search_text: name,
// });
// const endpoint = `/api/v1/frontend_users/by_display_name`;
// return this.get(`${endpoint}?${params.toString()}`);
// }
/**
* Returns the `Message`s associated with `user_id` in the backend.
*/
async fetch_user_messages(user_id: string): Promise<Message[]> {
return this.get(`/api/v1/users/${user_id}/messages`);
async fetch_user_messages(user_id: string): Promise<Message[] | null> {
return this.get<Message[]>(`/api/v1/users/${user_id}/messages`);
}
/**
* Updates the backend's knowledge about the `user_id`.
*/
async set_user_status(user_id: string, is_enabled: boolean, notes): Promise<void> {
return this.put(`/api/v1/users/users/${user_id}?enabled=${is_enabled}&notes=${notes}`);
async set_user_status(user_id: string, is_enabled: boolean, notes: string): Promise<void> {
await this.put(`/api/v1/users/users/${user_id}?enabled=${is_enabled}&notes=${notes}`);
}
/**
* Returns the valid labels for messages.
*/
async fetch_valid_text(): Promise<any> {
return this.get(`/api/v1/text_labels/valid_labels`);
async fetch_valid_text(messageId?: string): Promise<any> {
return this.get("/api/v1/text_labels/valid_labels", { message_id: messageId });
}
/**
@@ -265,21 +170,99 @@ export class OasstApiClient {
async fetch_leaderboard(
time_frame: LeaderboardTimeFrame,
{ limit = 20 }: { limit?: number }
): Promise<LeaderboardReply> {
const params = new URLSearchParams({
limit: limit.toString(),
});
return this.get(`/api/v1/leaderboards/${time_frame}?${params.toString()}`);
): Promise<LeaderboardReply | null> {
return this.get<LeaderboardReply>(`/api/v1/leaderboards/${time_frame}`, { max_count: limit });
}
/**
* Returns the counts of all tasks (some might be zero)
*/
async fetch_available_tasks(user: BackendUserCore, lang: string): Promise<AvailableTasks> {
return this.post(`/api/v1/tasks/availability?lang=${lang}`, user);
async fetch_available_tasks(user: BackendUserCore, lang: string): Promise<AvailableTasks | null> {
return this.post<AvailableTasks>(`/api/v1/tasks/availability?lang=${lang}`, user);
}
/**
* Add/remove an emoji on a message for a user
*/
async set_user_message_emoji(message_id: string, user: BackendUserCore, emoji: string, op: EmojiOp): Promise<void> {
await this.post(`/api/v1/messages/${message_id}/emoji`, {
user,
emoji,
op,
});
}
private async post<T>(path: string, body: unknown) {
return this.request<T>("POST", path, {
body: JSON.stringify(body),
});
}
private async put<T>(path: string) {
return this.request<T>("PUT", path);
}
private async get<T>(path: string, query?: Record<string, string | number | boolean | undefined>) {
if (!query) {
return this.request<T>("GET", path);
}
const filteredQuery = Object.fromEntries(
Object.entries(query).filter(([, value]) => value !== undefined)
) as Record<string, string>;
const params = new URLSearchParams(filteredQuery).toString();
return this.request<T>("GET", `${path}?${params}`);
}
private async request<T>(method: "GET" | "POST" | "PUT", path: string, init?: RequestInit): Promise<T | null> {
const resp = await fetch(`${this.oasstApiUrl}${path}`, {
method,
...init,
headers: {
...init?.headers,
...this.userHeaders,
"X-API-Key": this.oasstApiKey,
"Content-Type": "application/json",
},
});
if (resp.status === 204) {
return null;
}
if (resp.status >= 300) {
const errorText = await resp.text();
let error;
try {
error = JSON.parse(errorText);
} catch (e) {
throw new OasstError(errorText, 0, resp.status);
}
throw new OasstError(error.message ?? error, error.error_code, resp.status);
}
return await resp.json();
}
fetch_my_messages(user: BackendUserCore) {
const params = new URLSearchParams({
username: user.id,
auth_method: user.auth_method,
});
return this.get<Message[]>(`/api/v1/messages?${params}`);
}
fetch_recent_messages() {
return this.get<Message[]>(`/api/v1/messages`);
}
fetch_message_children(messageId: string) {
return this.get<Message[]>(`/api/v1/messages/${messageId}/children`);
}
fetch_conversation(messageId: string) {
return this.get(`/api/v1/messages/${messageId}/conversation`);
}
}
const oasstApiClient = new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY);
export { oasstApiClient };
website/src/lib/oasst_client_factory.ts
+11
View File
@@ -0,0 +1,11 @@
import { JWT } from "next-auth/jwt";
import { OasstApiClient } from "src/lib/oasst_api_client";
import { getBackendUserCore } from "src/lib/users";
import { BackendUserCore } from "src/types/Users";
export const createApiClientFromUser = (user: BackendUserCore) =>
new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY, user);
export const createApiClient = async (token: JWT) => createApiClientFromUser(await getBackendUserCore(token.sub));
export const userlessApiClient = new OasstApiClient(process.env.FASTAPI_URL, process.env.FASTAPI_KEY);
website/src/pages/admin/manage_user/[id].tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import { getAdminLayout } from "src/components/Layout";
import { Role, RoleSelect } from "src/components/RoleSelect";
import { UserMessagesCell } from "src/components/UserMessagesCell";
import { post } from "src/lib/api";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { userlessApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
import useSWRMutation from "swr/mutation";
@@ -113,7 +113,7 @@ const ManageUser = ({ user }: InferGetServerSidePropsType<typeof getServerSidePr
* Fetch the user's data on the server side when rendering.
*/
export async function getServerSideProps({ query, locale }) {
const backend_user = await oasstApiClient.fetch_user(query.id);
const backend_user = await userlessApiClient.fetch_user(query.id);
const local_user = await prisma.user.findUnique({
where: { id: backend_user.id },
select: {
website/src/pages/api/admin/status.ts
+3 -3
View File
@@ -1,17 +1,17 @@
import { getToken } from "next-auth/jwt";
import { withRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { getBackendUserCore } from "src/lib/users";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
/**
* Returns tasks availability, stats, and tree manager stats.
*/
const handler = withRole("admin", async (req, res) => {
// NOTE: why are we using a dummy user here?
const dummyUser = {
id: "__dummy_user__",
display_name: "Dummy User",
auth_method: "local",
};
const oasstApiClient = createApiClientFromUser(dummyUser);
const [tasksAvailabilityOutcome, statsOutcome, treeManagerOutcome] = await Promise.allSettled([
oasstApiClient.fetch_tasks_availability(dummyUser),
oasstApiClient.fetch_stats(),
website/src/pages/api/admin/update_user.ts
+5 -8
View File
@@ -1,22 +1,19 @@
import { withRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
/**
* Update's the user's data in the database. Accessible only to admins.
*/
const handler = withRole("admin", async (req, res) => {
const handler = withRole("admin", async (req, res, token) => {
const { id, auth_method, user_id, notes, role } = req.body;
const oasstApiClient = await createApiClient(token);
// If the user is authorized by the web, update their role.
if (auth_method === "local") {
await prisma.user.update({
where: {
id,
},
data: {
role,
},
where: { id },
data: { role },
});
}
// Tell the backend the user's enabled or not enabled status.
website/src/pages/api/admin/user_messages.ts
+3 -2
View File
@@ -1,12 +1,13 @@
import { withRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import type { Message } from "src/types/Conversation";
/**
* Returns the messages recorded by the backend for a user.
*/
const handler = withRole("admin", async (req, res) => {
const handler = withRole("admin", async (req, res, token) => {
const { user } = req.query;
const oasstApiClient = await createApiClient(token);
const messages: Message[] = await oasstApiClient.fetch_user_messages(user as string);
res.status(200).json(messages);
});
website/src/pages/api/admin/users.ts
+4 -2
View File
@@ -1,6 +1,7 @@
import { withRole } from "src/lib/auth";
import { FetchUsersParams, oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
import { FetchUsersParams } from "src/types/Users";
/**
* The number of users to fetch in a single request. Could later be a query parameter.
@@ -16,9 +17,10 @@ const PAGE_SIZE = 20;
* - `direction`: Either "forward" or "backward" representing the pagination
* direction.
*/
const handler = withRole("admin", async (req, res) => {
const handler = withRole("admin", async (req, res, token) => {
const { cursor, direction, searchDisplayName = "", sortKey = "username" } = req.query;
const oasstApiClient = await createApiClient(token);
// First, get all the users according to the backend.
const { items: all_users, ...rest } = await oasstApiClient.fetch_users({
searchDisplayName: searchDisplayName as FetchUsersParams["searchDisplayName"],
website/src/pages/api/auth/[...nextauth].ts
+15
View File
@@ -150,6 +150,21 @@ const authOptions: AuthOptions = {
}
},
},
/*
* We maybe need this, we maybe don't. Checking in this uncommented until
* it's confirmed we can drop this.
cookies: {
sessionToken: {
name: `next-auth.session-token`,
options: {
httpOnly: true,
sameSite: "none",
path: "/",
secure: true,
},
},
},
*/
session: {
strategy: "jwt",
},
website/src/pages/api/available_tasks.ts
+2 -1
View File
@@ -1,9 +1,10 @@
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore, getUserLanguage } from "src/lib/users";
const handler = withoutRole("banned", async (req, res, token) => {
const user = await getBackendUserCore(token.sub);
const oasstApiClient = createApiClientFromUser(user);
const userLanguage = getUserLanguage(req);
const availableTasks = await oasstApiClient.fetch_available_tasks(user, userLanguage);
res.status(200).json(availableTasks);
website/src/pages/api/leaderboard.ts
+3 -2
View File
@@ -1,11 +1,12 @@
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import { LeaderboardTimeFrame } from "src/types/Leaderboard";
/**
* Returns the set of valid labels that can be applied to messages.
*/
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const oasstApiClient = await createApiClient(token);
const time_frame = (req.query.time_frame as LeaderboardTimeFrame) ?? LeaderboardTimeFrame.day;
const info = await oasstApiClient.fetch_leaderboard(time_frame, { limit: req.query.limit as unknown as number });
res.status(200).json(info);
website/src/pages/api/messages/[id]/children.ts
+4 -12
View File
@@ -1,18 +1,10 @@
import { withoutRole } from "src/lib/auth";
import { createApiClient } from "src/lib/oasst_client_factory";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/children`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const messages = await messagesRes.json();
// Send recieved messages to the client.
const client = await createApiClient(token);
const messages = await client.fetch_message_children(id as string);
res.status(200).json(messages);
});
website/src/pages/api/messages/[id]/conversation.ts
+4 -12
View File
@@ -1,18 +1,10 @@
import { withoutRole } from "src/lib/auth";
import { createApiClient } from "src/lib/oasst_client_factory";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/conversation`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const messages = await messagesRes.json();
// Send recieved messages to the client.
const client = await createApiClient(token);
const messages = await client.fetch_conversation(id as string);
res.status(200).json(messages);
});
website/src/pages/api/messages/[id]/emoji.ts
+31
View File
@@ -0,0 +1,31 @@
import { withoutRole } from "src/lib/auth";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
if (!id) {
res.status(400).end();
return;
}
const messageId = id as string;
const { emoji, op } = req.body;
const user = await getBackendUserCore(token.sub);
const oasstApiClient = createApiClientFromUser(user);
try {
await oasstApiClient.set_user_message_emoji(messageId, user, emoji, op);
} catch (err) {
console.error(JSON.stringify(err));
return res.status(500).json(err);
}
// Get updated emoji
const message = await oasstApiClient.fetch_message(messageId, user);
res.status(200).json({ emojis: message.emojis, user_emojis: message.user_emojis });
});
export default handler;
website/src/pages/api/messages/[id]/index.ts
+6 -12
View File
@@ -1,18 +1,12 @@
import { withoutRole } from "src/lib/auth";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const message = await messageRes.json();
// Send recieved messages to the client.
const user = await getBackendUserCore(token.sub);
const client = createApiClientFromUser(user);
const message = await client.fetch_message(id as string, user);
res.status(200).json(message);
});
website/src/pages/api/messages/[id]/parent.ts
+7 -21
View File
@@ -1,6 +1,8 @@
import { withoutRole } from "src/lib/auth";
import { createApiClient, createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
const { id } = req.query;
if (!id) {
@@ -8,32 +10,16 @@ const handler = withoutRole("banned", async (req, res) => {
return;
}
const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const message = await messageRes.json();
const user = await getBackendUserCore(token.sub);
const client = createApiClientFromUser(user);
const message = await client.fetch_message(id as string, user);
if (!message.parent_id) {
res.status(404).end();
return;
}
const parentRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${message.parent_id}`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
"Content-Type": "application/json",
},
});
const parent = await parentRes.json();
// Send recieved messages to the client.
const parent = await client.fetch_message(message.parent_id, user);
res.status(200).json(parent);
});
website/src/pages/api/messages/index.ts
+4 -10
View File
@@ -1,15 +1,9 @@
import { withoutRole } from "src/lib/auth";
import { createApiClient } from "src/lib/oasst_client_factory";
const handler = withoutRole("banned", async (req, res) => {
const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
},
});
const messages = await messagesRes.json();
// Send recieved messages to the client.
const handler = withoutRole("banned", async (req, res, token) => {
const client = await createApiClient(token);
const messages = await client.fetch_recent_messages();
res.status(200).json(messages);
});
website/src/pages/api/messages/user.ts
+3 -15
View File
@@ -1,23 +1,11 @@
import { withoutRole } from "src/lib/auth";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
const handler = withoutRole("banned", async (req, res, token) => {
//TODO: add params if needed
const user = await getBackendUserCore(token.sub);
const params = new URLSearchParams({
username: user.id,
auth_method: user.auth_method,
});
const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages?${params}`, {
method: "GET",
headers: {
"X-API-Key": process.env.FASTAPI_KEY,
},
});
const messages = await messagesRes.json();
// Send recieved messages to the client.
const client = createApiClientFromUser(user);
const messages = await client.fetch_my_messages(user);
res.status(200).json(messages);
});
website/src/pages/api/new_task/[task_type].ts
+10 -3
View File
@@ -1,5 +1,7 @@
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { ERROR_CODES } from "src/lib/constants";
import { OasstError } from "src/lib/oasst_api_client";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
import { getBackendUserCore, getUserLanguage } from "src/lib/users";
@@ -17,12 +19,17 @@ const handler = withoutRole("banned", async (req, res, token) => {
const userLanguage = getUserLanguage(req);
const user = await getBackendUserCore(token.sub);
const oasstApiClient = createApiClientFromUser(user);
let task;
try {
task = await oasstApiClient.fetchTask(task_type as string, user, userLanguage);
} catch (err) {
console.error(err);
res.status(500).json(err);
if (err instanceof OasstError && err.errorCode === ERROR_CODES.TASK_REQUESTED_TYPE_NOT_AVAILABLE) {
res.status(503).json({});
} else {
console.error(err);
res.status(500).json(err);
}
return;
}
website/src/pages/api/reject_task.ts
+8 -6
View File
@@ -1,19 +1,21 @@
import { Prisma } from "@prisma/client";
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
const handler = withoutRole("banned", async (req, res) => {
const handler = withoutRole("banned", async (req, res, token) => {
// Parse out the local task ID and the interaction contents.
const { id: frontendId, reason } = req.body;
const registeredTask = await prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } });
const [oasstApiClient, registeredTask] = await Promise.all([
createApiClient(token),
prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } }),
]);
const task = registeredTask.task as Prisma.JsonObject;
const id = task.id as string;
const taskId = (registeredTask.task as Prisma.JsonObject).id as string;
// Update the backend with the rejection
await oasstApiClient.nackTask(id, reason);
await oasstApiClient.nackTask(taskId, reason);
// Send the results to the client.
res.status(200).json({});
website/src/pages/api/report.ts
+25
View File
@@ -0,0 +1,25 @@
import { withoutRole } from "src/lib/auth";
import { createApiClientFromUser } from "src/lib/oasst_client_factory";
import { getBackendUserCore } from "src/lib/users";
/**
* Adds a report for a message
*
*/
const handler = withoutRole("banned", async (req, res, token) => {
// Parse out the local message_id, and the interaction contents.
const { message_id, text } = req.body;
const user = await getBackendUserCore(token.sub);
const oasstApiClient = createApiClientFromUser(user);
try {
await oasstApiClient.send_report(message_id, user, text);
} catch (err) {
console.error(JSON.stringify(err));
return res.status(500).json(err);
}
res.status(200).end();
});
export default handler;
website/src/pages/api/set_label.ts
+5 -2
View File
@@ -5,8 +5,10 @@ import { withoutRole } from "src/lib/auth";
*
*/
const handler = withoutRole("banned", async (req, res, token) => {
// TODO: move to oasst_api_client
// Parse out the local message_id, and the interaction contents.
const { message_id, label_map, text } = req.body;
const { message_id, label_map } = req.body;
const interactionRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/text_labels`, {
method: "POST",
headers: {
@@ -17,7 +19,8 @@ const handler = withoutRole("banned", async (req, res, token) => {
type: "text_labels",
message_id: message_id,
labels: label_map,
text: text,
text: "", // used only in reporting
is_report: false,
user: {
id: token.sub,
display_name: token.name || token.email,
website/src/pages/api/update_task.ts
+12 -7
View File
@@ -1,6 +1,6 @@
import { Prisma } from "@prisma/client";
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
import prisma from "src/lib/prismadb";
import { getBackendUserCore, getUserLanguage } from "src/lib/users";
@@ -18,13 +18,18 @@ const handler = withoutRole("banned", async (req, res, token) => {
// Parse out the local task ID and the interaction contents.
const { id: frontendId, content, update_type } = req.body;
// Record that the user has done meaningful work and is no longer new.
await prisma.user.update({ where: { id: token.sub }, data: { isNew: false } });
// do in parallel since they are independent
const [_, registeredTask, oasstApiClient] = await Promise.all([
// Record that the user has done meaningful work and is no longer new.
prisma.user.update({ where: { id: token.sub }, data: { isNew: false } }),
// Accept the task so that we can complete it, this will probably go away soon.
prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } }),
// Create client for upcoming requests
createApiClient(token),
]);
const taskId = (registeredTask.task as Prisma.JsonObject).id as string;
// Accept the task so that we can complete it, this will probably go away soon.
const registeredTask = await prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } });
const task = registeredTask.task as Prisma.JsonObject;
const taskId = task.id as string;
await oasstApiClient.ackTask(taskId, registeredTask.id);
// Log the interaction locally to create our user_post_id needed by the Task
website/src/pages/api/valid_labels.ts
+5 -3
View File
@@ -1,11 +1,13 @@
import { withoutRole } from "src/lib/auth";
import { oasstApiClient } from "src/lib/oasst_api_client";
import { createApiClient } from "src/lib/oasst_client_factory";
/**
* Returns the set of valid labels that can be applied to messages.
*/
const handler = withoutRole("banned", async (req, res) => {
const valid_labels = await oasstApiClient.fetch_valid_text();
const handler = withoutRole("banned", async (req, res, token) => {
const { message_id } = req.query;
const client = await createApiClient(token);
const valid_labels = await client.fetch_valid_text(message_id as string);
res.status(200).json(valid_labels);
});
website/src/pages/create/assistant_reply.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const AssistantReply = () => {
const { tasks, isLoading, reset, trigger } = useCreateAssistantReply();
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Reply as Assistant</title>
<meta name="description" content="Reply as Assistant." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const AssistantReply = () => <TaskPage type={TaskType.assistant_reply} />;
AssistantReply.getLayout = getDashboardLayout;
website/src/pages/create/initial_prompt.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const InitialPrompt = () => {
const { tasks, isLoading, reset, trigger } = useCreateInitialPrompt();
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Initial Prompt</title>
<meta name="description" content="Add an initial Prompt." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const InitialPrompt = () => <TaskPage type={TaskType.initial_prompt} />;
InitialPrompt.getLayout = getDashboardLayout;
website/src/pages/create/user_reply.tsx
+5 -28
View File
@@ -1,33 +1,10 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const UserReply = () => {
const { tasks, isLoading, reset, trigger } = useCreatePrompterReply();
const PrompterReply = () => <TaskPage type={TaskType.prompter_reply} />;
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
PrompterReply.getLayout = getDashboardLayout;
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Reply as User</title>
<meta name="description" content="Reply as User." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
UserReply.getLayout = getDashboardLayout;
export default UserReply;
export default PrompterReply;
website/src/pages/dashboard.tsx
+3
View File
@@ -11,6 +11,9 @@ export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_
import useSWR from "swr";
const Dashboard = () => {
// Adding a demonstrative call to the backend that includes the web's JWT.
useSWR(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/auth/check`, get);
const {
t,
i18n: { language },
website/src/pages/evaluate/rank_assistant_replies.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const RankAssistantReplies = () => {
const { tasks, isLoading, reset, trigger } = useRankAssistantRepliesTask();
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Rank Assistant Replies</title>
<meta name="description" content="Rank Assistant Replies." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const RankAssistantReplies = () => <TaskPage type={TaskType.rank_assistant_replies} />;
RankAssistantReplies.getLayout = getDashboardLayout;
website/src/pages/evaluate/rank_initial_prompts.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const RankInitialPrompts = () => {
const { tasks, isLoading, reset, trigger } = useRankInitialPromptsTask();
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Rank Initial Prompts</title>
<meta name="description" content="Rank initial prompts." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const RankInitialPrompts = () => <TaskPage type={TaskType.rank_initial_prompts} />;
RankInitialPrompts.getLayout = getDashboardLayout;
website/src/pages/evaluate/rank_user_replies.tsx
+5 -28
View File
@@ -1,33 +1,10 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const RankUserReplies = () => {
const { tasks, isLoading, reset, trigger } = useRankPrompterRepliesTask();
const RankPrompterReplies = () => <TaskPage type={TaskType.rank_prompter_replies} />;
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
RankPrompterReplies.getLayout = getDashboardLayout;
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Rank User Replies</title>
<meta name="description" content="Rank User Replies." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
RankUserReplies.getLayout = getDashboardLayout;
export default RankUserReplies;
export default RankPrompterReplies;
website/src/pages/label/label_assistant_reply.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const LabelAssistantReply = () => {
const { tasks, isLoading, trigger, reset } = useLabelAssistantReplyTask();
if (isLoading) {
return <LoadingScreen />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Label Assistant Reply</title>
<meta name="description" content="Label Assistant Reply" />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const LabelAssistantReply = () => <TaskPage type={TaskType.label_assistant_reply} />;
LabelAssistantReply.getLayout = getDashboardLayout;
website/src/pages/label/label_initial_prompt.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const LabelInitialPrompt = () => {
const { tasks, isLoading, trigger, reset } = useLabelInitialPromptTask();
if (isLoading) {
return <LoadingScreen />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Label Initial Prompt</title>
<meta name="description" content="Label Initial Prompt" />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const LabelInitialPrompt = () => <TaskPage type={TaskType.label_initial_prompt} />;
LabelInitialPrompt.getLayout = getDashboardLayout;
website/src/pages/label/label_prompter_reply.tsx
+3 -26
View File
@@ -1,32 +1,9 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
import { TaskPage } from "src/components/TaskPage/TaskPage";
import { TaskType } from "src/types/Task";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
const LabelPrompterReply = () => {
const { tasks, isLoading, trigger, reset } = useLabelPrompterReplyTask();
if (isLoading) {
return <LoadingScreen />;
}
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Label Prompter Reply</title>
<meta name="description" content="Label Prompter Reply" />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
const LabelPrompterReply = () => <TaskPage type={TaskType.label_prompter_reply} />;
LabelPrompterReply.getLayout = getDashboardLayout;
website/src/pages/messages/[id]/index.tsx
+6 -4
View File
@@ -1,5 +1,6 @@
import { Box, Text, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { getDashboardLayout } from "src/components/Layout";
import { MessageLoading } from "src/components/Loading/MessageLoading";
@@ -10,6 +11,7 @@ import { Message } from "src/types/Conversation";
import useSWRImmutable from "swr/immutable";
const MessageDetail = ({ id }: { id: string }) => {
const { t } = useTranslation(["message", "common"]);
const backgroundColor = useColorModeValue("white", "gray.800");
const { isLoading: isLoadingParent, data: parent } = useSWRImmutable<Message>(`/api/messages/${id}/parent`, get);
@@ -20,7 +22,7 @@ const MessageDetail = ({ id }: { id: string }) => {
return (
<>
<Head>
<title>Open Assistant</title>
<title>{t("common:title")}</title>
<meta
name="description"
content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
@@ -32,10 +34,10 @@ const MessageDetail = ({ id }: { id: string }) => {
<>
<Box pb="4">
<Text fontWeight="bold" fontSize="xl" pb="2">
Parent
{t("parent")}
</Text>
<Box bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base" width="fit-content">
<MessageTableEntry enabled item={parent} />
<MessageTableEntry enabled message={parent} />
</Box>
</Box>
</>
@@ -54,7 +56,7 @@ MessageDetail.getLayout = (page) => getDashboardLayout(page);
export const getServerSideProps = async ({ locale, query }) => ({
props: {
id: query.id,
...(await serverSideTranslations(locale, ["common"])),
...(await serverSideTranslations(locale, ["common", "message"])),
},
});
website/src/pages/tasks/random.tsx
+4 -28
View File
@@ -1,34 +1,10 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
import { TaskPage } from "src/components/TaskPage/TaskPage";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
import { TaskType } from "src/types/Task";
const RandomTask = () => {
const { tasks, isLoading, trigger, reset } = useGenericTaskAPI(TaskType.random);
const Random = () => <TaskPage type={TaskType.random} />;
if (isLoading) {
return <LoadingScreen text="Loading..." />;
}
Random.getLayout = getDashboardLayout;
if (tasks.length === 0) {
return <TaskEmptyState />;
}
return (
<>
<Head>
<title>Random Task</title>
<meta name="description" content="Random Task." />
</Head>
<Task key={tasks[0].task.id} frontendId={tasks[0].id} task={tasks[0].task} trigger={trigger} mutate={reset} />
</>
);
};
RandomTask.getLayout = (page) => getDashboardLayout(page);
export default RandomTask;
export default Random;
website/src/types/Conversation.ts
+17 -2
View File
@@ -1,7 +1,22 @@
export interface Message {
export type EmojiOp = "add" | "remove" | "toggle";
export interface MessageEmoji {
name: string;
count: number;
}
export interface MessageEmojis {
emojis: { [emoji: string]: number };
user_emojis: string[];
}
export interface Message extends MessageEmojis {
id: string;
text: string;
is_assistant: boolean;
id: string;
lang: string;
created_date: string; // iso date string
parent_id: string;
frontend_message_id?: string;
}
website/src/types/Hooks.ts
+16
View File
@@ -0,0 +1,16 @@
import { BaseTask, TaskContent, TaskResponse, TaskType } from "src/types/Task";
interface TaskInteraction {
id: string;
update_type: string;
content: TaskContent;
}
export type TaskApiHook<Task extends BaseTask> = {
response: TaskResponse<Task>;
isLoading: boolean;
completeTask: (interaction: TaskInteraction) => void;
skipTask: () => void;
};
export type TaskApiHooks = Record<TaskType, (args: TaskType) => TaskApiHook<BaseTask>>;
website/src/types/Task.ts
+16 -2
View File
@@ -1,4 +1,4 @@
export const enum TaskType {
export enum TaskType {
initial_prompt = "initial_prompt",
assistant_reply = "assistant_reply",
prompter_reply = "prompter_reply",
@@ -29,12 +29,26 @@ export interface BaseTask {
type: TaskType;
}
export interface TaskResponse<Task extends BaseTask> {
export interface TaskAvailableResponse<Task extends BaseTask> {
id: string;
userId: string;
task: Task;
}
interface TaskAvailable<Task extends BaseTask> extends TaskAvailableResponse<Task> {
taskAvailability: "AVAILABLE";
}
interface AwaitingInitialTask {
taskAvailability: "AWAITING_INITIAL";
}
interface NoTaskAvailable {
taskAvailability: "NONE_AVAILABLE";
}
export type TaskResponse<Task extends BaseTask> = TaskAvailable<Task> | AwaitingInitialTask | NoTaskAvailable;
export type TaskReplyValidity = "DEFAULT" | "VALID" | "INVALID";
export type AvailableTasks = { [taskType in TaskType]: number };
website/src/types/Tasks.ts
+30 -14
View File
@@ -1,4 +1,4 @@
import { Conversation } from "./Conversation";
import { Conversation, Message } from "./Conversation";
import { BaseTask, TaskType } from "./Task";
export interface CreateInitialPromptTask extends BaseTask {
@@ -16,6 +16,8 @@ export interface CreatePrompterReplyTask extends BaseTask {
conversation: Conversation;
}
export type CreateTaskType = CreateInitialPromptTask | CreateAssistantReplyTask | CreatePrompterReplyTask;
export interface RankInitialPromptsTask extends BaseTask {
type: TaskType.rank_initial_prompts;
prompts: string[];
@@ -33,29 +35,43 @@ export interface RankPrompterRepliesTask extends BaseTask {
replies: string[];
}
export interface LabelAssistantReplyTask extends BaseTask {
export type RankTaskType = RankInitialPromptsTask | RankAssistantRepliesTask | RankPrompterRepliesTask;
export interface Label {
display_text: string;
help_text: string;
name: string;
widget: "flag" | "yes_no" | "likert";
}
export interface BaseLabelTask extends BaseTask {
message_id: string;
labels: Label[];
valid_labels: string[];
disposition: "spam" | "quality";
mode: "simple" | "full";
mandatory_labels?: string[];
}
export interface LabelAssistantReplyTask extends BaseLabelTask {
type: TaskType.label_assistant_reply;
message_id: string;
conversation: Conversation;
reply_message: Message;
reply: string;
valid_labels: string[];
mode: "simple" | "full";
mandatory_labels?: string[];
}
export interface LabelPrompterReplyTask extends BaseTask {
export interface LabelPrompterReplyTask extends BaseLabelTask {
type: TaskType.label_prompter_reply;
message_id: string;
conversation: Conversation;
reply_message: Message;
reply: string;
valid_labels: string[];
mode: "simple" | "full";
mandatory_labels?: string[];
}
export interface LabelInitialPromptTask extends BaseTask {
export interface LabelInitialPromptTask extends BaseLabelTask {
type: TaskType.label_initial_prompt;
message_id: string;
valid_labels: string[];
prompt: string;
}
export type LabelTaskType = LabelInitialPromptTask | LabelAssistantReplyTask | LabelPrompterReplyTask;
export type KnownTaskType = CreateTaskType | RankTaskType | LabelTaskType;
website/src/types/Users.ts
+16
View File
@@ -51,3 +51,19 @@ export interface User extends BackendUser {
*/
role: string;
}
export type FetchUsersParams = {
limit: number;
cursor?: string;
direction: "forward" | "back";
searchDisplayName?: string;
sortKey?: "username" | "display_name";
};
export type FetchUsersResponse<T extends User | BackendUser = BackendUser> = {
items: T[];
next?: string;
prev?: string;
sort_key: "username" | "display_name";
order: "asc" | "desc";
};
website/styles/Home.module.css
+24 -28
View File
@@ -1,45 +1,41 @@
.App {
text-align: center;
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.AppHeader {
background: linear-gradient(
217deg,
rgba(255, 0, 0, 0.8),
rgba(255, 0, 0, 0) 70.71%
),
linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
background: black;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
background: linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
background: black;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.AppLink {
color: #61dafb;
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
website/styles/Theme/colors.tsx
+2
View File
@@ -5,6 +5,7 @@ export const colors = {
div: "white",
text: "black",
highlight: "blue.400",
active: "blue.400",
},
dark: {
bg: "gray.900",
@@ -12,5 +13,6 @@ export const colors = {
div: "gray.700",
text: "gray.200",
highlight: "blue.500",
active: "blue.500",
},
};
website/styles/Theme/index.tsx
+1 -5
View File
@@ -1,8 +1,4 @@
import {
type ThemeConfig,
extendTheme,
usePrefersReducedMotion,
} from "@chakra-ui/react";
import { type ThemeConfig, extendTheme, usePrefersReducedMotion } from "@chakra-ui/react";
import { containerTheme } from "./Components/Container";
import { StyleFunctionProps, Styles } from "@chakra-ui/theme-tools";
website/types/i18next.d.ts
Vendored
+4 -2
View File
@@ -1,9 +1,9 @@
import "i18next";
import type common from "public/locales/en/common.json";
import type dashboard from "public/locales/en/dashboard.json";
import type index from "public/locales/en/index.json";
import type leaderboard from "public/locales/en/leaderboard.json";
import type message from "public/locales/en/message.json";
import type labelling from "public/locales/en/labelling.json";
import type tasks from "public/locales/en/tasks.json";
declare module "i18next" {
@@ -14,6 +14,8 @@ declare module "i18next" {
index: typeof index;
leaderboard: typeof leaderboard;
tasks: typeof tasks;
message: typeof message;
labelling: typeof labelling;
};
}
}