ac8a466cda
<!-- Clearly explain the need for these changes: --> Update and adds a basic credential field for use in integrations like reddit ### Changes 🏗️ <!-- Concisely describe all of the changes made in this pull request: --> - Reddit - Drops the Username and Password for reddit from the .env - Updates Reddit block with modern provider and credential system - moves clientid and secret to reading from `Settings().secrets` rather than input on the block - moves user agent to `Settings().config` - SMTP - update the block to support user password and modern credentials - Add `UserPasswordCredentials` - Default API key expiry to None explicitly to help type cohesion - add `UserPasswordCredentials` with a weird form of `bearer` which we ideally remove because `basic` is a more appropriate name. This is dependent on `Webhook _base` allowing a subset of `Credentials` - Update `Credentials` and `CredentialsType` - Fix various `OAuth2Credentials | APIKeyCredentials` -> `Credentials` mismatches between base and derived classes - Replace `router/@post(create_api_key_credentials)` with `create_credentials` which now takes a credential and is discriminated by `type` provided by the credential - UI/Frontend - Updated various pages to have saved credential types, icons, and text for User Pass Credentials - Update credential input to have an input/modals/selects for user/pass combos - Update the types to support having user/pass credentials too (we should make this more centralized) - Update Credential Providres to support user_password - Update `client.ts` to support the new streamlined credential creation method and endpoint - DX - Sort the provider names **again** TODO: - [x] Reactivate Conditionally Disabling Reddit ~~- [ ] Look into moving Webhooks base to allow subset of `Credentials` rather than requiring all webhooks to support the input of all valid `Credentials` types~~ Out of scope - [x] Figure out the `singleCredential` calculator in `credentials-input.tsx` so that it also respects User Pass credentials and isn't a logic mess ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: <!-- Put your test plan here: --> - [x] Test with agents --------- Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>
This is the frontend for AutoGPT's next generation
Getting Started
Run the following installation once.
npm install
# or
yarn install
# or
pnpm install
# or
bun install
Next, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
For subsequent runs, you do not have to npm install again. Simply do npm run dev.
If the project is updated via git, you will need to npm install after each update.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Deploy
TODO
Storybook
Storybook is a powerful development environment for UI components. It allows you to build UI components in isolation, making it easier to develop, test, and document your components independently from your main application.
Purpose in the Development Process
- Component Development: Develop and test UI components in isolation.
- Visual Testing: Easily spot visual regressions.
- Documentation: Automatically document components and their props.
- Collaboration: Share components with your team or stakeholders for feedback.
How to Use Storybook
-
Start Storybook: Run the following command to start the Storybook development server:
npm run storybookThis will start Storybook on port 6006. Open http://localhost:6006 in your browser to view your component library.
-
Build Storybook: To build a static version of Storybook for deployment, use:
npm run build-storybook -
Running Storybook Tests: Storybook tests can be run using:
npm run test-storybookFor CI environments, use:
npm run test-storybook:ci -
Writing Stories: Create
.stories.tsxfiles alongside your components to define different states and variations of your components.
By integrating Storybook into our development workflow, we can streamline UI development, improve component reusability, and maintain a consistent design system across the project.