feat: redesigned web UI

[ErikBjare]

Important

Refactor JavaScript from index.html to main.js, update HTML structure, and enhance CSS styles.

• JavaScript Refactor:
  • Extracted JavaScript from index.html to main.js.
  • main.js initializes Vue instance and handles conversation logic.
• HTML Changes:
  • Updated index.html to include main.js as a module script.
  • Simplified HTML structure by removing inline JavaScript.
• CSS Enhancements:
  • Updated style.css with new styles for chat components.
  • Added animations and improved button styles.

^{This description was created by for f676d21. It will automatically update as commits are pushed.}

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.43%. Comparing base (7231aa9) to head (f676d21).
Report is 1 commits behind head on master.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #167      +/-   ##
==========================================
- Coverage   80.47%   80.43%   -0.05%     
==========================================
  Files          56       56              
  Lines        3298     3301       +3     
==========================================
+ Hits         2654     2655       +1     
- Misses        644      646       +2     

Flag	Coverage Δ
anthropic/claude-3-haiku-20240307	79.36% <ø> (-0.05%)	⬇️
openai/gpt-4o-mini	79.15% <ø> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to f676d21 in 31 seconds

More details

• Looked at 1044 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. gptme/server/static/main.js:13

• Draft comment:
  Avoid using console.log in production code. Consider removing or replacing it with a proper logging mechanism.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment addresses a common best practice in production code, which is to avoid using console.log for logging purposes. This is a valid concern as console.log can lead to performance issues and cluttered logs in production environments. The comment is actionable as it suggests replacing console.log with a proper logging mechanism.
  The comment might be considered obvious to experienced developers, and the use of console.log might be intentional for debugging purposes during development. However, the comment is still relevant as it addresses a potential issue in production code.
  Even if the use of console.log is intentional for debugging, it is still a good practice to remind developers to remove or replace it before deploying to production.
  The comment is valid and should be kept as it addresses a best practice for production code and provides an actionable suggestion.

2. gptme/server/static/main.js:14

• Draft comment:
  Avoid using console.log in production code. Consider removing or replacing it with a proper logging mechanism.
• Reason this comment was not posted:
  Marked as duplicate.

3. gptme/server/static/main.js:246

• Draft comment:
  Consider implementing DOMPurify.sanitize to sanitize HTML and prevent XSS attacks.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment is relevant to the changes made in the diff, specifically the mdToHtml function where markdown is converted to HTML. The presence of a TODO comment suggests that the author is already aware of the need for sanitization, but the automated comment reinforces the importance of this security measure.
  The author might already be planning to implement this change, as indicated by the TODO comment. The automated comment might be redundant.
  Even if the author is aware, the automated comment serves as a reminder of the importance of addressing this security concern promptly.
  Keep the comment as it highlights a critical security issue that needs to be addressed, even though the author is already aware of it.

Workflow ID: wflow_jD1j8n6EzcTsdLSL

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.