DEV Community

fadingNA
fadingNA

Posted on

Dare to challenge hard thing

Planning for big contribute

In the upcoming 0.4 release, I aim to contribute to two notable open-source projects: ChatCraft.org and DocsGPT. My focus will be on addressing specific issues and implementing enhancements to improve user experience and functionality.

1. First issue ChatCraft.org: Migrating to Chakra UI V3

Issue: Migrate to Chakra V3

Pull Request: Migrate to Chakra V3

Migrate to Chakra V3 #752

  • Move from fork repo PR to upstream repo.

  • #749

@humphd @amnish04 @tarasglek

--

Issue:

Migrate to Chakra V3 #701

Recently, Chakra rolled out a new major version with lots of new components and updates styles. https://www.chakra-ui.com/blog/00-announcing-v3

It would be awesome to upgrade and give ChatCraft a much deserved modern look :D

Would also be interesting to explore the new components and discover places where they could be used for a better UX.

Maybe we should wait for a few patch releases before upgrading though.

  • Objective: Upgrade the ChatCraft.org interface to Chakra UI V3 to leverage new components and updated styles, providing a modern and consistent user experience.
Approach

Note : I have opened pull request but due to the big change and un review the code change so I have to plan ahead what to do and split into smaller pull request.

  • Objective: Update the project dependencies to Chakra UI version 3.0.
  • Details:
    • Modify the package.json file to include the latest Chakra UI version.
    • Update any related configurations required for the new version.

  • Objective: Eliminate hooks and components deprecated in Chakra UI 3.0.
  • Details:

  • Objective: Implement the ChatBase component, comprising the Header and Sidebar.
  • Details:
    • Develop the foundational ChatBase layout.
    • Ensure the application remains functional with this new structure.

  • Objective: Integrate essential components like Messages, Prompt Form, and Send Button.
  • Details:
    • Develop and incorporate these core components.
    • Ensure alignment with Chakra UI 3.0 standards.

  • Objective: Refine the styling of the newly added components.
  • Details:
    • Adjust CSS and Chakra UI style props.
    • Ensure the components achieve the desired appearance and responsiveness.

  • Objective: Update the Settings modal to be compatible with Chakra UI 3.0.
  • Details:
    • Revise the modal's structure and styling.
    • Test to ensure compatibility and proper functionality.

  • Objective: Ensure the application is responsive and mobile-friendly.
  • Details:
    • Apply the above changes to the mobile component.
    • Make adjustments to ensure mobile compatibility.

Result
  • Upgrading to Chakra UI V3 will enhance the visual appeal and usability of ChatCraft.org, making it more engaging for users.

2. Second issue DocsGPT: Frontend UI change on setting/Document & setting/APIKey

Issue: Bug Report:

πŸ› Bug Report: Imperfections in Settings/Document table #1440

πŸ“œ Description

  1. The pagination tab at the bottom should not move depending on the number of rows
  2. The search currently, only searches among the docs rendered in a page
  3. Remove type row from the table
  4. If one of the docs is syncable, then there is inconsistency in the delete row.

πŸ‘Ÿ Reproduction steps

Go to settings > documents Search a document, try inserting few documents The pagination tab shifts if there variable number of docs per page Search a document which is not there on a page but exists

πŸ‘ Expected behavior

  1. The pagination tab should be placed somewhere below the maximum height of the table or at the bottom of the page
  2. /sources/paginated endpoint should also be filtered based on the document name, so that the documents can be searched completely
  3. Since all docs are private, the type row can be removed
  4. The delete buttons should align uniformly.

πŸ‘Ž Actual Behavior with Screenshots

image image

πŸ’» Operating system

Linux

What browsers are you seeing the problem on?

Chrome

πŸ€– What development environment are you experiencing this bug on?

Docker

πŸ”’ Did you set the correct environment variables in the right path? List the environment variable names (not values please!)

Yes

πŸ“ƒ Provide any additional context for the Bug.

No response

πŸ“– Relevant log output

No response

πŸ‘€ Have you spent some time to check if this bug has been raised before?

  • [X] I checked and didn't find similar issue

πŸ”— Are you willing to submit PR?

None

πŸ§‘β€βš–οΈ Code of Conduct

  • [X] I agree to follow this project's Code of Conduct

Pull Request: Table Styling & Add search feature to backend:

Table Styling & Add search feature to backend #1442

  • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

  • #1440

  • Why was this change needed? (You can also link to an open issue here) uniform table nicely

  • Other information: update table styling uniformly

@manishmadan2882

Screenshot 2024-11-15 at 11 17 28β€―PM

Objective:
  • Improve the document table in DocsGPT by addressing UI imperfections and adding a search feature to enhance user experience.
Approach
  • Objective: Examine the document table to pinpoint imperfections, such as pagination inconsistencies and search limitations.
  • Details:
    • Investigate on Document components
    • Investigate on APIKey components

  • Objective: Modify the table’s design to ensure a consistent and user-friendly interface.
  • Details:
    • Change from css styling to tailwind css for more controllable and familiar of my knowledge

Result
  • Enhancing the document table’s functionality will streamline user interactions, making it easier to manage and locate documents within DocsGPT.

3. DocsGPT: Enabling Image Processing Capabilities

Issue: Bug Report:

πŸš€ Feature Allow our AI's to eat images. #1451

πŸ”– Feature description

@dartpain Basically allow our AI's to eat images. good place to start is just open ai llms, even docsgpt free service should work

🎀 Why is this feature needed ?

Accept image and encoded base64

  • Maybe user wants to send a message with an image when chatting with AI

✌️ How do you aim to achieve this?

  • When a source has an image, for example there is a link (publicly accessible) in markdown file that was ingested, we can pass it to llm inside classic rag retriever when its generating an answer.

πŸ”„οΈ Additional Information

No response

πŸ‘€ Have you spent some time to check if this feature request has been raised before?

  • [X] I checked and didn't find similar issue

Are you willing to submit PR?

Yes I am willing to submit a PR!

Objective
  • Extend DocsGPT’s capabilities to process images, allowing users to include images in their interactions with the AI.
Approach
  • Objective: Add the ability for DocsGPT to handle and understand images, making it more useful for tasks that include pictures.

  • Details:

    • Look into how we can make DocsGPT work with images and ensure it fits well with the current AI models.
    • Build a system to accept and process images, including ones encoded in base64.
    • Test everything to make sure DocsGPT can understand images and respond correctly.
    • Update the user guide to show how to use the new image feature easily.
Result
  • LLM_Completion able to eat image from base64 or url provided and return back the response to user along with prompt. In addition, validation the limit token per llm requirement and cost.

Conclusion

  • By focusing on these targeted contributions, I aim to enhance the functionality and user experience of ChatCraft.org and DocsGPT. This plan sets clear goals for my next contributions, for that approaches above quite teaching me a few things, if we have a good plan before develop we can reduce significant of time to achieve the requirement.

Top comments (0)