Image Uploads, Markdown Styling, and Migration to IndexedDb

[Anajrim01]

This PR introduces a new feature enabling users to upload images alongside text messages in the chat application. Additionally, it fixes a few bugs related to markdown rendering. The following key changes have been made:

• IndexedDB: Switched from localStorage which has a limit of 5mb to IndexedDB.
• File Uploads: Added functionality to handle image file uploads and convert them to base64 format.
• Chat Message Structure: Updated the ChatMessage interface to support both text and image content, including image URLs and filenames.
• Submit Function: Modified the handleSubmit function to handle both text and image content, including images in the payload.
• Tokenization: Updated tokenization logic to correctly count tokens for both text and image content formats.
• Code Quality: Improved code readability and maintainability with descriptive variable names.
• Backward Compatibility: Ensured backward compatibility with existing text-only messages.
• Drag-and-Drop Fix: Fixed the drag-and-drop issue with description parsing in chat actions.
• Bug Fix: Fixed an issue (introduced in #111) where the title would be incorrectly updated after setting it, refreshing the window, and sending another message. The flag hasUpdatedTitle is now stored in local storage to persist across window refreshes.
• Bug Fix: Fixed an issue where the paragraph and tables wasn't properly displayed.
• CSS Styling for Markdown: Applied proper CSS styling to markdown, utilizing Tailwind CSS for a consistent and clean look.

TODO

• [x] Add support for image filenames without including them in the final payload.
• [x] Cost calculation for images.
• [x] Limit uploads to a maximum of 10 in one prompt.
• [x] Add logic to fetch dimensions of image.
• [x] ~Ensure that the feature is only available for users using OpenAI or those on the Pro plan (or something).~ Works with LLM's which support Vision too.
• [x] Refactor
• [x] Testing

User Interface Change

• [x] Fix UI and placement to ensure a seamless user experience (help needed).
• [x] Show user attachment in UI.

Checklist

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] My changes generate no new warnings

Maintainer Changes

• [x] Make corresponding changes to the documentation
• [x] SlickGPT Pro - maintainer needs to update proxy to support images as content
• [ ] Add support for image URLs (user interface change).
• [ ] Let user decide image resolution (detail).

Related Issues

Closes #77 Fixes #123 Fixes #124 Fixes #127

[vercel[bot]]

@Anajrim01 is attempting to deploy a commit to the ShipBit Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
slickgpt	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 7, 2024 9:53am

[Anajrim01]

Hello @Shackless,

I'm not sure how I'll be moving forward with adding image url support and letting user choose between low/high/auto (currently default to high).

Excluding that, what's left is ~the refactoring and~ you updating the SlickGPT Pro middleware to support image uploads.

Regarding the excluded features, I'd love your assistance in implementing it, and maybe even changing up the button for the image upload to some place else. I'm not sure about it yet, would love some help/feedback on it.

[Shackless]

@Anajrim01 Thank you! I'll take over as soon as I can find the time.

[Anajrim01]

What needs to be tested: - Firebase support - Overall functionality with Pro.

I've reviewed the code, and I don't see any major issues with the code which come up to me directly.