feat: added generic code snippet component

[Goldziher]

Pull Request Checklist

• New code has tests
• Code has documentation
• Pre-Commit (pre-commit run --all-files) was executed and passed
• Tests were ran and passed

Description

Close Issue(s)

[github-actions]

PR Analysis

• 🎯 Main theme: feat: added generic code snippet component
• 📝 PR summary: This PR adds a new generic code snippet component to the project. It includes tests and necessary dependencies.
• 📌 Type of PR: Enhancement
• 🧪 Relevant tests added: True
• ⏱️ Estimated effort to review [1-5]: 3, because the PR adds a new component with tests and dependencies, which requires a moderate review effort.
• 🔒 Security concerns: No security concerns found

PR Feedback

• 💡 General suggestions:

  • The PR looks good overall. The code snippet component is a useful addition to the project.
  • Consider adding more comments or docstrings to explain the purpose and usage of the component.
• 🤖 Code feedback:

  • relevant file: frontend/src/components/code-snippet.tsx
    suggestion: Consider adding prop types or TypeScript type annotations to the CodeSnippet component for better code readability and maintainability. [medium]
    relevant line: export function CodeSnippet({

  • relevant file: frontend/src/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-code-snippet.tsx
    suggestion: In the PromptConfigCodeSnippet component, consider extracting the tab rendering logic into a separate function or component for better modularity and readability. [medium]
    relevant line: return (

  • relevant file: frontend/src/components/logo.tsx
    suggestion: In the Logo component, consider using prop types or TypeScript type annotations for the width, height, and textSize props to ensure type safety. [medium]
    relevant line: export function Logo({

  • relevant file: frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/configs/[promptConfigId]/page.tsx
    suggestion: In the PromptConfiguration component, consider adding more spacing or dividers between different sections for better visual separation. [medium]
    relevant line:

How to use

Instructions

To invoke the PR-Agent, add a comment using one of the following commands:
/review: Request a review of your Pull Request.
/describe: Update the PR title and description based on the contents of the PR.
/improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback.
/ask <QUESTION>: Ask a question about the PR.
/update_changelog: Update the changelog based on the PR's contents.
/add_docs: Generate docstring for new components introduced in the PR.
/generate_labels: Generate labels for the PR based on the PR's contents.
see the tools guide for more details.

To edit any configuration parameter from the configuration.toml, add --config_path=new_value.
For example: /review --pr_reviewer.extra_instructions="focus on the file: ..."
To list the possible configuration parameters, add a /config comment.

[Goldziher]

/improve