✨ (openai) Add tools and functions support

[baptisteArno]

Closes #863

Got helped from #1162 for the implementation. Closing it in favor of this PR.

Summary by CodeRabbit

• New Features

  • Enhanced CodeEditor with additional properties for better form control and validation.
  • Introduced tools and functions in OpenAI integrations documentation for custom JavaScript execution.
  • Added capability to define and use custom JavaScript functions with the OpenAI assistant.
  • Expanded layout metadata options to include various input types and languages.

• Improvements

  • Updated the OpenAI actions to support new function execution features.

• Documentation

  • Added new sections for tools and functions in the OpenAI integrations guide.

• Refactor

  • Refactored components and actions to integrate new features and improve existing functionalities.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
builder-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 18, 2024 5:50pm
landing-page-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 18, 2024 5:50pm

[coderabbitai]

Walkthrough

The recent updates focus on enhancing form control and validation in a code editor component, expanding layout options for Zod fields, and integrating custom JavaScript functions within the OpenAI assistant interactions. This includes new UI elements for better user guidance and the ability to define and execute additional functions in various actions, as well as support for more diverse input types and programming languages in the layout metadata.

Changes

File Path	Change Summary
.../inputs/CodeEditor.tsx	Added new props for improved form control using Chakra UI elements.
.../forge/components/zodLayouts/ZodFieldLayout.tsx	Included blockDef and blockOptions in component props for extended layout configurations.
.../editor/blocks/integrations/openai.mdx	Documented new 'Tools' and 'Functions' sections for adding and using custom JavaScript functions in OpenAI integrations.
.../components/ConversationContainer/ConversationContainer.tsx	Implemented processing of client-side actions for conversation continuity.
.../blocks/openai/actions/askAssistant.tsx	Updated to allow custom JavaScript functions and added function fetching from OpenAI service.
.../blocks/openai/actions/createChatCompletion.tsx	Imported ToolCallPayload and updated schemas and options to support new functionality.
.../blocks/openai/helpers/parseToolParameters.ts	Added a new file for parsing tool parameters to match OpenAI FunctionParameters interface.
.../core/zod/extendWithTypebotLayout.ts	Extended ZodLayoutMetadata to include new inputType and lang options for diverse input types and languages.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 61bfe1b and db46f8b.

Files ignored due to path filters (4)

• apps/docs/images/blocks/integrations/openai/tools.png is excluded by: !**/*.png
• packages/embeds/js/package.json is excluded by: !**/*.json
• packages/embeds/nextjs/package.json is excluded by: !**/*.json
• packages/embeds/react/package.json is excluded by: !**/*.json

Files selected for processing (8)

• apps/builder/src/components/inputs/CodeEditor.tsx (4 hunks)
• apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx (7 hunks)
• apps/docs/editor/blocks/integrations/openai.mdx (2 hunks)
• packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx (3 hunks)
• packages/forge/blocks/openai/actions/askAssistant.tsx (5 hunks)
• packages/forge/blocks/openai/actions/createChatCompletion.tsx (5 hunks)
• packages/forge/blocks/openai/helpers/parseToolParameters.ts (1 hunks)
• packages/forge/core/zod/extendWithTypebotLayout.ts (1 hunks)

Files not reviewed due to errors (1)

• apps/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx (no review received)

Files skipped from review due to trivial changes (1)

• apps/docs/editor/blocks/integrations/openai.mdx

Additional comments: 12

packages/forge/blocks/openai/helpers/parseToolParameters.ts (1)

• 5-22: The function parseToolParameters correctly constructs an object of type OpenAI.FunctionParameters. It uses the reduce method to accumulate properties, ensuring that only parameters with a name are included. The required field is correctly populated with the names of parameters that are marked as required.

packages/forge/core/zod/extendWithTypebotLayout.ts (1)

• 11-12: The ZodLayoutMetadata interface has been correctly extended to include new inputType and lang options, which now support 'code' and programming languages respectively. This aligns with the PR objectives to enhance input types and languages within the layout metadata.

apps/builder/src/components/inputs/CodeEditor.tsx (1)

• 102-187: The CodeEditor component has been updated to include new props such as label, moreInfoTooltip, helperText, and isRequired. The use of Chakra UI's FormControl, FormLabel, and FormHelperText for form control and validation is correctly implemented. The component's props are properly passed down and used within the JSX, ensuring that the new UI elements are rendered as expected.

packages/forge/blocks/openai/actions/askAssistant.tsx (3)

• 27-44: The functions option has been added to the askAssistant function, allowing the definition and use of custom JavaScript functions. This is consistent with the PR's goal of enhancing the OpenAI integration with custom tools and functions.
• 85-118: The fetchAssistantFunctions function has been added to retrieve available assistant functions from the OpenAI service. The function checks for the presence of options.assistantId before proceeding, which is a good practice to avoid unnecessary API calls.
• 192-236: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [132-266]

The askAssistant function now includes logic to handle and execute custom functions based on the assistant's requirements. The use of AsyncFunction to dynamically execute code is a powerful feature but should be used with caution due to potential security implications. Ensure that the code executed by AsyncFunction is properly sandboxed and validated to prevent security vulnerabilities.

apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx (2)

• 25-25: The CodeEditor component is correctly imported and used within the ZodFieldLayout component. This allows for code editing capabilities within the layout, aligning with the PR's objectives to enhance the application's UI components.
• 238-258: The CodeEditor component is correctly rendered within the ZodFieldLayout when the inputType is 'code'. The properties such as defaultValue, lang, label, placeholder, helperText, isRequired, withVariableButton, and moreInfoTooltip are properly passed to the CodeEditor, ensuring that it is configured correctly.

packages/forge/blocks/openai/actions/createChatCompletion.tsx (4)

• 4-10: The import statement for ToolCallPayload and the ChatCompletionTool type are correctly added to support the new payload types related to the execution of tools and functions within the OpenAI chat completions.
• 37-54: The parameterSchema is correctly defined to describe the parameters for the OpenAI functions. It includes fields for the parameter's name, type, description, and whether it is required, which is essential for the correct execution of custom functions.
• 56-77: The functionToolItemSchema is correctly defined to describe the tools that can be executed by the OpenAI model. It includes the tool's name, description, parameters, and code, which are necessary for defining and executing custom JavaScript functions.
• 181-242: The logic to handle tool calls within the createChatCompletion action is correctly implemented. It constructs the tools array from the options and uses parseToolParameters to format the parameters. The AsyncFunction is used to execute the tool's code, and the results are appended to the messages array. This is a complex operation that should be carefully reviewed to ensure security and correctness.