diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 39d5d97a..00000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "rules": {},
-  "env": {
-    "es6": true,
-    "browser": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:storybook/recommended"
-  ],
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
-  },
-  "plugins": [
-    "react"
-  ]
-}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1ed7a804..31474ed2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,10 +1,10 @@
 {
-    "sonarlint.connectedMode.project": {
-        "connectionId": "hopper",
-        "projectKey": "fhswf_openai-ui_AY5mLbV1WNlYFiIpzZdP"
-    },
     "i18n-ally.localesPaths": [
         "src/i18n"
     ],
-    "react-i18n.i18nPaths": "src\\i18n"
+    "react-i18n.i18nPaths": "src\\i18n",
+    "sonarlint.connectedMode.project": {
+        "connectionId": "sonarqube-fh-swf-cloud",
+        "projectKey": "fhswf_openai-ui_3d78bdaa-d0c9-4d19-a2c6-65fa429b1112"
+    }
 }
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8811b467..46e7b667 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,1030 +1,51 @@
 ## [0.28.2](https://github.com/fhswf/openai-ui/compare/v0.28.1...v0.28.2) (2025-11-27)
 
-
 ### Bug Fixes
 
-* remove deprecated APIs ([41f7ffc](https://github.com/fhswf/openai-ui/commit/41f7ffc8dacd8eddd51a244076bc396f1d63f218))
-* remove deprecated APIs ([475f80d](https://github.com/fhswf/openai-ui/commit/475f80d456837da81c0a27f62e2e911cf7c6b7ab))
+* remove deprecated APIs ([41f7ffc](https://github.com/fhswf/openai-ui/commit/41f7ffc8dacd8eddd51a244076bc396f1d63f218))  
+  Removed usage of deprecated endpoints/APIs and updated call sites to the new interfaces.
 
-## [0.28.1](https://github.com/fhswf/openai-ui/compare/v0.28.0...v0.28.1) (2025-11-24)
+* remove deprecated APIs ([475f80d](https://github.com/fhswf/openai-ui/commit/475f80d456837da81c0a27f62e2e911cf7c6b7ab))  
+  Follow-up cleanup and tests adjusted for API changes.
 
+## [0.28.1](https://github.com/fhswf/openai-ui/compare/v0.28.0...v0.28.1) (2025-11-24)
 
 ### Bug Fixes
 
-* handle potential undefined currentChat in MessageMenu ([446ccbe](https://github.com/fhswf/openai-ui/commit/446ccbe35f4219b0f167324673f0bbdbe79ede62)), closes [#71](https://github.com/fhswf/openai-ui/issues/71)
+* handle potential undefined currentChat in MessageMenu ([446ccbe](https://github.com/fhswf/openai-ui/commit/446ccbe35f4219b0f167324673f0bbdbe79ede62)), closes [#71](https://github.com/fhswf/openai-ui/issues/71)  
+  Added guards/null checks to prevent runtime errors when currentChat is not set; improved unit/edge-case handling.
 
 # [0.28.0](https://github.com/fhswf/openai-ui/compare/v0.27.2...v0.28.0) (2025-11-10)
 
-
 ### Features
 
-* tool details ([2c80c01](https://github.com/fhswf/openai-ui/commit/2c80c0120331701332e06e36b0c52d3416be2af1))
+* tool details ([2c80c01](https://github.com/fhswf/openai-ui/commit/2c80c0120331701332e06e36b0c52d3416be2af1))  
+  Added UI and data plumbing to show detailed information for tool calls (arguments, outputs, timestamps).
 
 ## [0.27.2](https://github.com/fhswf/openai-ui/compare/v0.27.1...v0.27.2) (2025-11-04)
 
-
 ### Bug Fixes
 
-* handle missing source in web search call ([3fc0021](https://github.com/fhswf/openai-ui/commit/3fc00211e65200169dc925678376433cadcc0f73))
+* handle missing source in web search call ([3fc0021](https://github.com/fhswf/openai-ui/commit/3fc00211e65200169dc925678376433cadcc0f73))  
+  Added fallback/default handling when web search results lack the source field to avoid crashes.
 
 ## [0.27.1](https://github.com/fhswf/openai-ui/compare/v0.27.0...v0.27.1) (2025-10-31)
 
-
 ### Bug Fixes
 
-* handle missing information gracefully ([afd8437](https://github.com/fhswf/openai-ui/commit/afd8437d7e429588f8b96fd49658d7822b654ad6))
+* handle missing information gracefully ([afd8437](https://github.com/fhswf/openai-ui/commit/afd8437d7e429588f8b96fd49658d7822b654ad6))  
+  Defensive checks added across UI components to display placeholders instead of failing.
 
 # [0.27.0](https://github.com/fhswf/openai-ui/compare/v0.26.2...v0.27.0) (2025-10-31)
 
-
-### Bug Fixes
-
-* handle exception in JSON parsing ([0e5fd3b](https://github.com/fhswf/openai-ui/commit/0e5fd3bf84a5324186ad38606b7bcfd12fade4b3))
-* update tool when output item is done ([0c680ff](https://github.com/fhswf/openai-ui/commit/0c680ff4a6eb7f8da1f1a2e3fa5533781cdb7bd3))
-* use reviver function when loading state ([327631f](https://github.com/fhswf/openai-ui/commit/327631f2b32440293fca755ac6ba7b7c3dc7ab97))
-
-
-### Features
-
-* add code interpreter tool ([8ea8716](https://github.com/fhswf/openai-ui/commit/8ea871603afe3facfb9ac1d0fc42d4fd1399ba9c))
-* add sources for web search call ([a9f4a64](https://github.com/fhswf/openai-ui/commit/a9f4a64ed513adb5afb4d80c9183959c74057350))
-* add tool call details ([fd0db7f](https://github.com/fhswf/openai-ui/commit/fd0db7fddd06b7aca10ff5adf6a04a3b032492a3))
-* group tool calls ([b1e5165](https://github.com/fhswf/openai-ui/commit/b1e516557fcff9d7333ab34e79c72a100fe147e4))
-* handle more tools ([d0955ca](https://github.com/fhswf/openai-ui/commit/d0955ca5370fe1cdc086d4007772faabc04cb14f))
-
-## [0.26.2](https://github.com/fhswf/openai-ui/compare/v0.26.1...v0.26.2) (2025-09-23)
-
-
-### Bug Fixes
-
-* tracking permission issue ([ff489cf](https://github.com/fhswf/openai-ui/commit/ff489cf9742fd116dd73b779a69650008944a3f0))
-
-## [0.26.1](https://github.com/fhswf/openai-ui/compare/v0.26.0...v0.26.1) (2025-09-01)
-
-
-### Bug Fixes
-
-* display new tools in option menu ([b5ec253](https://github.com/fhswf/openai-ui/commit/b5ec2532f772252480d4e0ee31298e218b55714d))
-
-# [0.26.0](https://github.com/fhswf/openai-ui/compare/v0.25.1...v0.26.0) (2025-09-01)
-
-
-### Features
-
-* add code interpreter tool ([8d04e3d](https://github.com/fhswf/openai-ui/commit/8d04e3d15ff3a97fb2cb090c7e09ba8b961fefa8))
-
-## [0.25.1](https://github.com/fhswf/openai-ui/compare/v0.25.0...v0.25.1) (2025-08-22)
-
-
-### Bug Fixes
-
-* Handle security exception in navigator.storage.getDirectory() ([77f52e1](https://github.com/fhswf/openai-ui/commit/77f52e165a797c6c5be03d9b3ba2bcc0f09b612c))
-
-# [0.25.0](https://github.com/fhswf/openai-ui/compare/v0.24.0...v0.25.0) (2025-08-08)
-
-
-### Features
-
-* add gpt 5 models ([06c0803](https://github.com/fhswf/openai-ui/commit/06c0803447b623a9461ad0f6c09ef07bc046e22f))
-
-# [0.24.0](https://github.com/fhswf/openai-ui/compare/v0.23.0...v0.24.0) (2025-07-11)
-
-
-### Features
-
-* manage MCP services ([2586049](https://github.com/fhswf/openai-ui/commit/25860497d733a2fdadc692a8c8dd03c734ac1894))
-
-# [0.23.0](https://github.com/fhswf/openai-ui/compare/v0.22.0...v0.23.0) (2025-07-08)
-
-
-### Bug Fixes
-
-* backward compability with old tool option ([3770563](https://github.com/fhswf/openai-ui/commit/3770563aab383ae8a0afc081d901df4ece930f33))
-* i18n ([5ed0f95](https://github.com/fhswf/openai-ui/commit/5ed0f9537704a46751a2b0afb3def403c71fd796))
-* i18n ([7f7d6ea](https://github.com/fhswf/openai-ui/commit/7f7d6eaa5eb756ede3f38564fad565f5b175f037))
-* i18n ([da12f2d](https://github.com/fhswf/openai-ui/commit/da12f2db5fc56777fbdf07097b169147ed1184fc))
-* i18n ([1893767](https://github.com/fhswf/openai-ui/commit/1893767586e53fa42ac50b2b9b2d0de5cd722c1f))
-* i18n ([98eb6ce](https://github.com/fhswf/openai-ui/commit/98eb6cebd4ded8800c6d081d00308f6f855f7305))
-* i18n ([cde62b2](https://github.com/fhswf/openai-ui/commit/cde62b267b6b682efc2015fbb85ff76eb30b833e))
-* i18n ([2f83202](https://github.com/fhswf/openai-ui/commit/2f8320215130edb1a8dc8785708e3134d8a2efca))
-* i18n ([9e7b0e8](https://github.com/fhswf/openai-ui/commit/9e7b0e8f4d77f6222b8238b9f0e227e210306bc8))
-* i18n ([70582ce](https://github.com/fhswf/openai-ui/commit/70582ce3f36e10f7754fdde733672d14fe27b799))
-* improve image generation ([a28681e](https://github.com/fhswf/openai-ui/commit/a28681ea610cd5b65506db337ee37f70d3355d73))
-* update i18n configuration and remove unused import/export entries ([ad232fc](https://github.com/fhswf/openai-ui/commit/ad232fc17d2aa2d37e5fc840d823b872898ff0f5))
-
-
-### Features
-
-* add image generation ([f0869e3](https://github.com/fhswf/openai-ui/commit/f0869e3812468809f2707f9b6af507f0e90e2888))
-* add image generation ([7492507](https://github.com/fhswf/openai-ui/commit/74925076a06b2b535647a88ac2f857f3caf9a641))
-* add image generation ([657acb2](https://github.com/fhswf/openai-ui/commit/657acb2fc9d59876ee19969de3f6c0adffbd411d))
-* add image generation ([28e691c](https://github.com/fhswf/openai-ui/commit/28e691c06f77c8ed4c052e5a6ddc9635b494384a))
-* add image generation ([e5cc7db](https://github.com/fhswf/openai-ui/commit/e5cc7db29985b0befe1219515f613c7421993860))
-* add image generation ([07502e8](https://github.com/fhswf/openai-ui/commit/07502e8811b765c0b583e633aa97067fea73f37d))
-* add image generation ([be277a5](https://github.com/fhswf/openai-ui/commit/be277a583a344e6a4c0e2961a13abb6af378f6c3))
-* image handling ([d498d94](https://github.com/fhswf/openai-ui/commit/d498d947c3d9afea7665afacdc895ed1237e6a8d))
-* image handling ([63617ea](https://github.com/fhswf/openai-ui/commit/63617ea27ee244514e0bac80c9a44b6e7bf8c24f))
-* image handling ([5673797](https://github.com/fhswf/openai-ui/commit/5673797f4c8364fe899a9732b429c124b62dd481))
-* image handling ([dc88ab4](https://github.com/fhswf/openai-ui/commit/dc88ab42b38a90877d3b0752f0c89a29a0c714f0))
-* tool support ([edc53f2](https://github.com/fhswf/openai-ui/commit/edc53f29c71a3a812695dc50d237e8e1e7dabaaa))
-* tool support ([8c9e146](https://github.com/fhswf/openai-ui/commit/8c9e14620d9279b889b9dd2b8074ded1816f8bce))
-* tool support ([0f12503](https://github.com/fhswf/openai-ui/commit/0f12503ceeee9e441fca4fb036bbcadff15ada00))
-* tool support ([9793154](https://github.com/fhswf/openai-ui/commit/9793154e1ac7f78a1cf53348e20ade68a97075fb))
-* tool support ([b0da2e6](https://github.com/fhswf/openai-ui/commit/b0da2e65870941014106703f16fd585eb352c4cd))
-* tool support ([efeaa0e](https://github.com/fhswf/openai-ui/commit/efeaa0e21552199994b300d9f0dc1dd5c0470bfe))
-* tool support ([6871044](https://github.com/fhswf/openai-ui/commit/687104424e10c21b27db5bac80757b20de94f2a1))
-* tool support ([2b9c25e](https://github.com/fhswf/openai-ui/commit/2b9c25ec843513904369a68dab48de1126dd3f95))
-
-# [0.22.0](https://github.com/fhswf/openai-ui/compare/v0.21.4...v0.22.0) (2025-07-07)
-
-
-### Features
-
-* import/export settings ([4c9c282](https://github.com/fhswf/openai-ui/commit/4c9c2826986bb42d09aed5c1c1823970e76e17b3))
-
-## [0.21.4](https://github.com/fhswf/openai-ui/compare/v0.21.3...v0.21.4) (2025-06-26)
-
-
-### Bug Fixes
-
-* version bump nginx ([57e2d7a](https://github.com/fhswf/openai-ui/commit/57e2d7abe17059821c59409897d1494bbb6b5b65))
-
-## [0.21.3](https://github.com/fhswf/openai-ui/compare/v0.21.2...v0.21.3) (2025-06-05)
-
-
-### Bug Fixes
-
-* proxy for image load ([6b91081](https://github.com/fhswf/openai-ui/commit/6b91081956f530eb8810d0dd9dabe30bdbfcb84a))
-
-## [0.21.2](https://github.com/fhswf/openai-ui/compare/v0.21.1...v0.21.2) (2025-05-24)
-
-
-### Bug Fixes
-
-* tool menu / web search ([0d9e893](https://github.com/fhswf/openai-ui/commit/0d9e8930d991216d4a8deb72afed02c04ec96a57))
-
-## [0.21.1](https://github.com/fhswf/openai-ui/compare/v0.21.0...v0.21.1) (2025-05-07)
-
-
-### Bug Fixes
-
-* improve error handling ([b6fe140](https://github.com/fhswf/openai-ui/commit/b6fe140580ce9656d0e1a58dc9058fab900599c2))
-
-# [0.21.0](https://github.com/fhswf/openai-ui/compare/v0.20.3...v0.21.0) (2025-04-09)
-
-
-### Features
-
-* access for all members ([47e923e](https://github.com/fhswf/openai-ui/commit/47e923ef1da71b561366a5cd5d1a7029ef1684d6))
-
-## [0.20.3](https://github.com/fhswf/openai-ui/compare/v0.20.2...v0.20.3) (2025-03-30)
-
-
-### Bug Fixes
-
-* code quality issues ([2656899](https://github.com/fhswf/openai-ui/commit/2656899db9e5f39635df615ba8170fadf659e896))
-
-## [0.20.2](https://github.com/fhswf/openai-ui/compare/v0.20.1...v0.20.2) (2025-03-30)
-
-
-### Bug Fixes
-
-* code quality issues ([f04811e](https://github.com/fhswf/openai-ui/commit/f04811eddef1f156064f8f33630b493859b78a93))
-
-## [0.20.1](https://github.com/fhswf/openai-ui/compare/v0.20.0...v0.20.1) (2025-03-30)
-
-
-### Bug Fixes
-
-* layout glitch ([42582ab](https://github.com/fhswf/openai-ui/commit/42582abf431e8f380d1fae806e537cc94e7029de))
-
-# [0.20.0](https://github.com/fhswf/openai-ui/compare/v0.19.2...v0.20.0) (2025-03-30)
-
-
-### Features
-
-* speech input ([2bcac57](https://github.com/fhswf/openai-ui/commit/2bcac573d2d8ebe2ad4b60e475dbc9797ccf7446))
-
-## [0.19.2](https://github.com/fhswf/openai-ui/compare/v0.19.1...v0.19.2) (2025-03-28)
-
-
-### Bug Fixes
-
-* improve pie charts ([de7b172](https://github.com/fhswf/openai-ui/commit/de7b172cb9b4f713d14726f5bad493d13f93ab29))
-
-## [0.19.1](https://github.com/fhswf/openai-ui/compare/v0.19.0...v0.19.1) (2025-03-28)
-
-
-### Bug Fixes
-
-* summation error in per-role statistic ([13e97b5](https://github.com/fhswf/openai-ui/commit/13e97b59f5e9ffc4f2c28024ab2d2d2b1829ac75))
-
-# [0.19.0](https://github.com/fhswf/openai-ui/compare/v0.18.8...v0.19.0) (2025-03-28)
-
-
-### Features
-
-* add statistic by role ([4535d44](https://github.com/fhswf/openai-ui/commit/4535d4470243ef1c43428c5c404ecac38e1c8922))
-
-## [0.18.8](https://github.com/fhswf/openai-ui/compare/v0.18.7...v0.18.8) (2025-03-28)
-
-
-### Bug Fixes
-
-* improve usage statistic ([435e7af](https://github.com/fhswf/openai-ui/commit/435e7afb3f7c0ad78abb4dbc6cf7295a0e5051a3))
-
-## [0.18.7](https://github.com/fhswf/openai-ui/compare/v0.18.6...v0.18.7) (2025-03-27)
-
-
-### Bug Fixes
-
-* ui & loading improvements ([d816cc2](https://github.com/fhswf/openai-ui/commit/d816cc2561357510c3715a3880a1fc1fdcdb4887))
-
-## [0.18.6](https://github.com/fhswf/openai-ui/compare/v0.18.5...v0.18.6) (2025-03-27)
-
-
-### Bug Fixes
-
-* increase resource limits ([204a8ab](https://github.com/fhswf/openai-ui/commit/204a8ab58ab8890b71e6003dd08e90f188b2b722))
-
-## [0.18.5](https://github.com/fhswf/openai-ui/compare/v0.18.4...v0.18.5) (2025-03-26)
-
-
-### Bug Fixes
-
-* broken URL ([40eb2fc](https://github.com/fhswf/openai-ui/commit/40eb2fc09968a258bfb8ab78e890594b8a30cc67))
-
-## [0.18.4](https://github.com/fhswf/openai-ui/compare/v0.18.3...v0.18.4) (2025-03-26)
-
-
-### Bug Fixes
-
-* add missing i18n key ([7280c3a](https://github.com/fhswf/openai-ui/commit/7280c3afaae79577d6c0b02b1416f0cc6c50a856))
-* color palette for dashboard ([f4c2033](https://github.com/fhswf/openai-ui/commit/f4c2033e735b5c831160bba6891c18ecf3672c5c))
-
-## [0.18.3](https://github.com/fhswf/openai-ui/compare/v0.18.2...v0.18.3) (2025-03-26)
-
-
-### Bug Fixes
-
-* broken dashboard URL ([b21f570](https://github.com/fhswf/openai-ui/commit/b21f570e27dfbbd965eb231a1adeecd08aa9ed48))
-
-## [0.18.2](https://github.com/fhswf/openai-ui/compare/v0.18.1...v0.18.2) (2025-03-26)
-
-
-### Bug Fixes
-
-* broken URL ([d7b0f7e](https://github.com/fhswf/openai-ui/commit/d7b0f7e99e760c1618808d824aab174337cc0da8))
-
-## [0.18.1](https://github.com/fhswf/openai-ui/compare/v0.18.0...v0.18.1) (2025-03-26)
-
-
-### Bug Fixes
-
-* improve dashboard ([0479846](https://github.com/fhswf/openai-ui/commit/0479846c3f461db547c0aac905503415ee1dd52e))
-
-# [0.18.0](https://github.com/fhswf/openai-ui/compare/v0.17.9...v0.18.0) (2025-03-26)
-
-
-### Features
-
-* usage statistics ([f58dfab](https://github.com/fhswf/openai-ui/commit/f58dfab68d1c73051c2ab26928ae5911eba0eb4d))
-
-## [0.17.9](https://github.com/fhswf/openai-ui/compare/v0.17.8...v0.17.9) (2025-03-26)
-
-
-### Bug Fixes
-
-* broken metadata ([9b9a579](https://github.com/fhswf/openai-ui/commit/9b9a579185ad183ed9f59315fd52a9932b5e7bf6))
-
-## [0.17.8](https://github.com/fhswf/openai-ui/compare/v0.17.7...v0.17.8) (2025-03-26)
-
-
-### Bug Fixes
-
-* fix ci build ([e5441ec](https://github.com/fhswf/openai-ui/commit/e5441ec6c5f0493f6196ab13f65bbf2c5a1d0ca6))
-* fix ci build ([35ff2d9](https://github.com/fhswf/openai-ui/commit/35ff2d9656b1e730faea9f5b05b9cfc08e16294f))
-* fix ci build ([382ee8f](https://github.com/fhswf/openai-ui/commit/382ee8f9ea32ca04e3538daaa03af986c16f1cf0))
-
-## [0.17.7](https://github.com/fhswf/openai-ui/compare/v0.17.6...v0.17.7) (2025-03-26)
-
-
-### Bug Fixes
-
-* add release notes to metadata ([05354f7](https://github.com/fhswf/openai-ui/commit/05354f72b06678ce1fee354285d94f886a38af32))
-* add release notes to metadata ([77d0384](https://github.com/fhswf/openai-ui/commit/77d0384b7dd129c60cf635e2aa338da3d3a1c346))
-
-## [0.17.6](https://github.com/fhswf/openai-ui/compare/v0.17.5...v0.17.6) (2025-03-25)
-
-
-### Bug Fixes
-
-* improve render times ([414017e](https://github.com/fhswf/openai-ui/commit/414017e3cfd44bf4ce050a42f2d330a839e8af21))
-
-## [0.17.5](https://github.com/fhswf/openai-ui/compare/v0.17.4...v0.17.5) (2025-03-24)
-
-
-### Bug Fixes
-
-* nginx security update ([ccdaf65](https://github.com/fhswf/openai-ui/commit/ccdaf6593127b16ff5c6b6568228d36a4c0f44e9)), closes [FH-SWF#202503191000551](https://github.com/FH-SWF/issues/202503191000551)
-
-## [0.17.4](https://github.com/fhswf/openai-ui/compare/v0.17.3...v0.17.4) (2025-03-24)
-
-
-### Bug Fixes
-
-* ignore tools option if not defined ([ba73f0a](https://github.com/fhswf/openai-ui/commit/ba73f0a03939d8f6178d6b80f867ade4c23ebd18))
-
-## [0.17.3](https://github.com/fhswf/openai-ui/compare/v0.17.2...v0.17.3) (2025-03-22)
-
-
-### Bug Fixes
-
-* improve handling of expired tokens ([4123cb1](https://github.com/fhswf/openai-ui/commit/4123cb18b9cf30b622bf986035099847db584be0))
-
-## [0.17.2](https://github.com/fhswf/openai-ui/compare/v0.17.1...v0.17.2) (2025-03-20)
-
-
-### Bug Fixes
-
-* ui improvements ([64daa05](https://github.com/fhswf/openai-ui/commit/64daa0514111a25193a80bb485910af6d01fb393))
-
-## [0.17.1](https://github.com/fhswf/openai-ui/compare/v0.17.0...v0.17.1) (2025-03-19)
-
-
-### Bug Fixes
-
-* limit message text in chat history dialog to 5 lines ([0808d7b](https://github.com/fhswf/openai-ui/commit/0808d7bd3b1c356e7e1ee2ea948a73417f849488))
-
-# [0.17.0](https://github.com/fhswf/openai-ui/compare/v0.16.0...v0.17.0) (2025-03-19)
-
-
-### Features
-
-* improve chat history ([9dd918e](https://github.com/fhswf/openai-ui/commit/9dd918e55cda7cad8856dd5c597eb8dc967ae083))
-
-# [0.16.0](https://github.com/fhswf/openai-ui/compare/v0.15.1...v0.16.0) (2025-03-17)
-
-
-### Bug Fixes
-
-* chakra-ui nesting issue ([7f2a1c4](https://github.com/fhswf/openai-ui/commit/7f2a1c49c99c0fd34ea30aaae9184648430ad015))
-
-
-### Features
-
-* download options ([6f859e4](https://github.com/fhswf/openai-ui/commit/6f859e4e6910ded79316c356380d87c556048ad9))
-* download options ([849d00b](https://github.com/fhswf/openai-ui/commit/849d00bb284fda8cdd1d1dd4b04e44df6812fa99))
-* download options ([2e5910a](https://github.com/fhswf/openai-ui/commit/2e5910a57d061c934fbdf876d69b5fd681ea75e1))
-
-## [0.15.1](https://github.com/fhswf/openai-ui/compare/v0.15.0...v0.15.1) (2025-03-17)
-
-
 ### Bug Fixes
 
-* show tool usage ([e8418ff](https://github.com/fhswf/openai-ui/commit/e8418ff8bdbde3c06d5335a7eb1e09b87151dd6d))
+* handle exception in JSON parsing ([0e5fd3b](https://github.com/fhswf/openai-ui/commit/0e5fd3bf84a5324186ad38606b7bcfd12fade4b3))  
+  Try/catch around JSON.parse and fallback behavior added.
 
-# [0.15.0](https://github.com/fhswf/openai-ui/compare/v0.14.0...v0.15.0) (2025-03-17)
-
-
-### Bug Fixes
-
-* copy of code ([b56289c](https://github.com/fhswf/openai-ui/commit/b56289c8eb5925321b727d3afbfe4796f3575199))
-
-
-### Features
-
-* improved GitHub menu ([673dabf](https://github.com/fhswf/openai-ui/commit/673dabf1271c401b9ef64602990569401095600e))
-* Response API & web search ([47998a6](https://github.com/fhswf/openai-ui/commit/47998a69613e5d9bf3ae43629baf347295616b6f))
-* show token usage & elapsed time ([156569c](https://github.com/fhswf/openai-ui/commit/156569cb981dbe69a218d43d107dde419eff07d6))
-
-# [0.14.0](https://github.com/fhswf/openai-ui/compare/v0.13.17...v0.14.0) (2025-03-03)
-
-
-### Features
-
-* ui improvements ([a6bf9f1](https://github.com/fhswf/openai-ui/commit/a6bf9f197a345e1a63c95ba794468dee6f8af942))
-* ui improvements ([98e430a](https://github.com/fhswf/openai-ui/commit/98e430a75a2e19c1f6bf99abf70c60456932eb48))
-* ui updates ([8b55ad0](https://github.com/fhswf/openai-ui/commit/8b55ad07c1e8abc4d99d3d1e6532f5f9d1dc6b21))
-* ui updates ([18ebee7](https://github.com/fhswf/openai-ui/commit/18ebee7c6c72a511326c1ac58a76d86da76a5ae6))
-
-## [0.13.17](https://github.com/fhswf/openai-ui/compare/v0.13.16...v0.13.17) (2025-02-20)
-
-
-### Bug Fixes
-
-* **ui:** add hint whether app or history is active ([4ccb14e](https://github.com/fhswf/openai-ui/commit/4ccb14e8aca8b54a387df126ad55d8d27dede719))
-
-## [0.13.16](https://github.com/fhswf/openai-ui/compare/v0.13.15...v0.13.16) (2025-02-20)
-
-
-### Bug Fixes
-
-* use npm ci in Dockerfile ([6942758](https://github.com/fhswf/openai-ui/commit/694275898ca8b97b0fde2ee21ddc40d48ab17d29))
-
-## [0.13.15](https://github.com/fhswf/openai-ui/compare/v0.13.14...v0.13.15) (2025-02-20)
-
-
-### Bug Fixes
-
-* scroll to end when a chat message is added ([f4a53d1](https://github.com/fhswf/openai-ui/commit/f4a53d12a20148bd0087a477039a2e29150bf449))
-
-## [0.13.14](https://github.com/fhswf/openai-ui/compare/v0.13.13...v0.13.14) (2025-02-20)
-
-
-### Bug Fixes
+* update tool when output item is done ([0c680ff](https://github.com/fhswf/openai-ui/commit/0c680ff4a6eb7f8da1f1a2e3fa5533781cdb7bd3))  
+  State updates ensure tool instances refresh when outputs complete.
 
-* lazy rendering of markdown messages ([f16f50b](https://github.com/fhswf/openai-ui/commit/f16f50bfd174e5a04e5019bd29d7b85736901f69))
-
-## [0.13.13](https://github.com/fhswf/openai-ui/compare/v0.13.12...v0.13.13) (2025-02-20)
-
-
-### Bug Fixes
-
-* make sure currentApp is initialized properly ([ee4eb6f](https://github.com/fhswf/openai-ui/commit/ee4eb6f5a6bd4e6a0962aa24ab473c192da62d6c))
-
-## [0.13.12](https://github.com/fhswf/openai-ui/compare/v0.13.11...v0.13.12) (2025-02-20)
-
-
-### Bug Fixes
-
-* **ui:** improve responsiveness ([60c8e6d](https://github.com/fhswf/openai-ui/commit/60c8e6dc95584f48e99c86e5d628a58c70d61727))
-
-## [0.13.11](https://github.com/fhswf/openai-ui/compare/v0.13.10...v0.13.11) (2025-02-20)
-
-
-### Bug Fixes
-
-* prevent layout shift ([45c8494](https://github.com/fhswf/openai-ui/commit/45c8494bbee7cf3b962e6ae225f2005648d9edec))
-
-## [0.13.10](https://github.com/fhswf/openai-ui/compare/v0.13.9...v0.13.10) (2025-02-19)
-
-
-### Bug Fixes
-
-* formula rendering ([940860b](https://github.com/fhswf/openai-ui/commit/940860b47f922de711bdfdbb2dc642b141df6ea1))
-
-## [0.13.9](https://github.com/fhswf/openai-ui/compare/v0.13.8...v0.13.9) (2025-02-19)
-
-
-### Bug Fixes
-
-* ui improvements ([1242b85](https://github.com/fhswf/openai-ui/commit/1242b85cbde6ed5b368f9c78f3f358de0af4b48e))
-
-## [0.13.8](https://github.com/fhswf/openai-ui/compare/v0.13.7...v0.13.8) (2025-02-19)
-
-
-### Bug Fixes
-
-* redirect http to https ([042370c](https://github.com/fhswf/openai-ui/commit/042370c61b18ab711060a4d93bd39482df84b3ed))
-
-## [0.13.7](https://github.com/fhswf/openai-ui/compare/v0.13.6...v0.13.7) (2025-02-19)
-
-
-### Bug Fixes
-
-* correct access list ([1cc3a80](https://github.com/fhswf/openai-ui/commit/1cc3a80f4ae3c0b839b4eb27e58a7f1ed1d631a1))
-
-## [0.13.6](https://github.com/fhswf/openai-ui/compare/v0.13.5...v0.13.6) (2025-02-19)
-
-
-### Bug Fixes
-
-* timestamp of initial chatbot message ([86cefd6](https://github.com/fhswf/openai-ui/commit/86cefd64001391576778d533cf2da1d1548a26fc))
-
-## [0.13.5](https://github.com/fhswf/openai-ui/compare/v0.13.4...v0.13.5) (2025-02-19)
-
-
-### Bug Fixes
-
-* **ui:** ui improvements ([d7b9aa0](https://github.com/fhswf/openai-ui/commit/d7b9aa06f609440e1b8c296cda85b58afc36bd2c))
-
-## [0.13.4](https://github.com/fhswf/openai-ui/compare/v0.13.3...v0.13.4) (2025-02-18)
-
-
-### Bug Fixes
-
-* **ui:** message count in header bar ([d7bdfea](https://github.com/fhswf/openai-ui/commit/d7bdfeafcf8bb0b1b4150bef555a1f7408ad9d92))
-
-## [0.13.3](https://github.com/fhswf/openai-ui/compare/v0.13.2...v0.13.3) (2025-02-18)
-
-
-### Bug Fixes
-
-* chat initialization & ui improvents ([7b173a0](https://github.com/fhswf/openai-ui/commit/7b173a080ac448471120744444dd41e43bddbb3f))
-
-## [0.13.2](https://github.com/fhswf/openai-ui/compare/v0.13.1...v0.13.2) (2025-02-18)
-
-
-### Bug Fixes
-
-* **ui:** a11y issues ([beca43e](https://github.com/fhswf/openai-ui/commit/beca43e40b65aa7f2cc67710bc06b3198185e72d))
-
-## [0.13.1](https://github.com/fhswf/openai-ui/compare/v0.13.0...v0.13.1) (2025-02-17)
-
-
-### Bug Fixes
-
-* **ui:** submit key does not work in code editor ([5d891ee](https://github.com/fhswf/openai-ui/commit/5d891ee3a6ea4eb5717b9f464a39a441a7401985))
-
-# [0.13.0](https://github.com/fhswf/openai-ui/compare/v0.12.24...v0.13.0) (2025-02-17)
-
-
-### Features
-
-* improve message input ([397bd44](https://github.com/fhswf/openai-ui/commit/397bd445bd8df07a888adc1f986559099081e5d0))
-
-## [0.12.24](https://github.com/fhswf/openai-ui/compare/v0.12.23...v0.12.24) (2025-02-17)
-
-
-### Bug Fixes
-
-* **ui:** improve error handling ([5a28541](https://github.com/fhswf/openai-ui/commit/5a2854157307f199fbb01e99f25992361bcf073c))
-
-## [0.12.23](https://github.com/fhswf/openai-ui/compare/v0.12.22...v0.12.23) (2025-02-16)
-
-
-### Bug Fixes
-
-* handling invalid message data; layout changes ([133cd15](https://github.com/fhswf/openai-ui/commit/133cd15fe897f39708a79e6398bbc16a281628cb))
-
-## [0.12.22](https://github.com/fhswf/openai-ui/compare/v0.12.21...v0.12.22) (2025-02-16)
-
-
-### Bug Fixes
-
-* show initial welcome message ([0d86f5e](https://github.com/fhswf/openai-ui/commit/0d86f5ecd524162ae53e9688a85d3e114d52e7bc))
-
-## [0.12.21](https://github.com/fhswf/openai-ui/compare/v0.12.20...v0.12.21) (2025-02-16)
-
-
-### Bug Fixes
-
-* ui improvements ([215c363](https://github.com/fhswf/openai-ui/commit/215c36334a8aaa025fa6b9d9990da940c648764f))
-
-## [0.12.20](https://github.com/fhswf/openai-ui/compare/v0.12.19...v0.12.20) (2025-02-16)
-
-
-### Bug Fixes
-
-* use version 4 of sonarqube-scan-action ([3e18686](https://github.com/fhswf/openai-ui/commit/3e1868637b91a9db65fd170bff05188a4bf85402))
-
-## [0.12.19](https://github.com/fhswf/openai-ui/compare/v0.12.18...v0.12.19) (2025-02-16)
-
-
-### Bug Fixes
-
-* use version 4 of sonarqube-scan-action ([1e4d71f](https://github.com/fhswf/openai-ui/commit/1e4d71fadd2a4280356b6425c223c6fc4b9ee53c))
-
-## [0.12.18](https://github.com/fhswf/openai-ui/compare/v0.12.17...v0.12.18) (2025-02-16)
-
-
-### Bug Fixes
-
-* **test:** refactor tests to new defaults ([0c241b9](https://github.com/fhswf/openai-ui/commit/0c241b995e79406f947bbef0c8621d1463de1ca6))
-
-## [0.12.17](https://github.com/fhswf/openai-ui/compare/v0.12.16...v0.12.17) (2025-02-16)
-
-
-### Bug Fixes
-
-* **ui:** hide settings icon in chat mode ([4e18a5a](https://github.com/fhswf/openai-ui/commit/4e18a5a8004bd4edd1726a9179a1772eaa143399))
-
-## [0.12.16](https://github.com/fhswf/openai-ui/compare/v0.12.15...v0.12.16) (2025-02-16)
-
-
-### Bug Fixes
-
-* **build:** fix build scripts ([c9d4da1](https://github.com/fhswf/openai-ui/commit/c9d4da17d69fb13e59c5a9b37dce4a9da6dbfeb3))
-
-## [0.12.15](https://github.com/fhswf/openai-ui/compare/v0.12.14...v0.12.15) (2025-02-16)
-
-
-### Bug Fixes
-
-* catch errors in config parsing ([0e6c831](https://github.com/fhswf/openai-ui/commit/0e6c8318c14415e2ed11d94f91178ea963437405))
-
-## [0.12.14](https://github.com/fhswf/openai-ui/compare/v0.12.13...v0.12.14) (2025-02-16)
-
-
-### Bug Fixes
-
-* **build:** refactoring build scripts ([fa71579](https://github.com/fhswf/openai-ui/commit/fa715798466b1cc4b29a1fa29523c99a94ef845c))
-
-## [0.12.13](https://github.com/fhswf/openai-ui/compare/v0.12.12...v0.12.13) (2025-02-16)
-
-
-### Bug Fixes
-
-* **build:** update & commit manifest/metadata on release ([81149c8](https://github.com/fhswf/openai-ui/commit/81149c87d34e8dbf9d34c28582a5f18b1f3487b0))
-
-## [0.12.12](https://github.com/fhswf/openai-ui/compare/v0.12.11...v0.12.12) (2025-02-16)
-
-
-### Bug Fixes
-
-* **pwa:** icon path ([d526f6c](https://github.com/fhswf/openai-ui/commit/d526f6cf216c9ba7a6ab9bd3b05e028467b3ea80))
-* **pwa:** icon path ([fda1c78](https://github.com/fhswf/openai-ui/commit/fda1c78b523df4837666b32192b80da5746ba3c0))
-* useEffect() dependency ([7919005](https://github.com/fhswf/openai-ui/commit/7919005b09d524b88f9a60da7c516f8afe3e32df))
-
-## [0.12.11](https://github.com/fhswf/openai-ui/compare/v0.12.10...v0.12.11) (2025-02-15)
-
-
-### Bug Fixes
-
-* add icon for pwa ([e97909b](https://github.com/fhswf/openai-ui/commit/e97909b32fb5345ca17ea5c145750f3be8c3745c))
-
-## [0.12.10](https://github.com/fhswf/openai-ui/compare/v0.12.9...v0.12.10) (2025-02-15)
-
-
-### Bug Fixes
-
-* show version information in the app ([af8545d](https://github.com/fhswf/openai-ui/commit/af8545da58752ce54e44af0bb3367c62dc7b0130))
-
-## [0.12.9](https://github.com/fhswf/openai-ui/compare/v0.12.8...v0.12.9) (2025-02-15)
-
-
-### Bug Fixes
-
-* show version information in the app ([a072d0b](https://github.com/fhswf/openai-ui/commit/a072d0b8861de9eba405a2170d5811975f255d07))
-
-## [0.12.8](https://github.com/fhswf/openai-ui/compare/v0.12.7...v0.12.8) (2025-02-15)
-
-
-### Bug Fixes
-
-* show version information in the app ([83f15ce](https://github.com/fhswf/openai-ui/commit/83f15ced9a7b4421ef6d1ef569f8729cac99fe3d))
-
-## [0.12.7](https://github.com/fhswf/openai-ui/compare/v0.12.6...v0.12.7) (2025-02-15)
-
-
-### Bug Fixes
-
-* show version information in the app ([ee0a1df](https://github.com/fhswf/openai-ui/commit/ee0a1df7a97064fc602e0e800a1c1e1bb5719159))
-
-## [0.12.6](https://github.com/fhswf/openai-ui/compare/v0.12.5...v0.12.6) (2025-02-15)
-
-
-### Bug Fixes
-
-* **build:** add build sha to pod env ([cf007b6](https://github.com/fhswf/openai-ui/commit/cf007b6facc13e572fbaa47ccffe58b5f0872d90))
-
-## [0.12.5](https://github.com/fhswf/openai-ui/compare/v0.12.4...v0.12.5) (2025-02-15)
-
-
-### Bug Fixes
-
-* **build:** add release version to pod env ([1cc30db](https://github.com/fhswf/openai-ui/commit/1cc30db8f508965e6e257acef684f9ab32a29faf))
-
-## [0.12.4](https://github.com/fhswf/openai-ui/compare/v0.12.3...v0.12.4) (2025-02-15)
-
-
-### Bug Fixes
-
-* **build:** add release version to pod env ([10489d7](https://github.com/fhswf/openai-ui/commit/10489d74e0db431d62ffbc4a22fb6623cfa188bf))
-
-## [0.12.3](https://github.com/fhswf/openai-ui/compare/v0.12.2...v0.12.3) (2025-02-15)
-
-
-### Bug Fixes
-
-* **build:** add release version to pod env ([d17e339](https://github.com/fhswf/openai-ui/commit/d17e3396793aeb7ee17f1e117cf44b515a716c64))
-
-## [0.12.2](https://github.com/fhswf/openai-ui/compare/v0.12.1...v0.12.2) (2025-02-15)
-
-
-### Bug Fixes
-
-* **build:** pass release version between jobs ([088325f](https://github.com/fhswf/openai-ui/commit/088325f426367c258549e491a5584bb90e76a9db))
-
-## [0.12.1](https://github.com/fhswf/openai-ui/compare/v0.12.0...v0.12.1) (2025-02-15)
-
-
-### Bug Fixes
-
-* **test:** update test cases for chakra 3 ([b6aa9bf](https://github.com/fhswf/openai-ui/commit/b6aa9bf45906defbdf831dd44d223f0b4189ad3e))
-
-# [0.12.0](https://github.com/fhswf/openai-ui/compare/v0.11.4...v0.12.0) (2025-02-15)
-
-
-### Features
-
-* show user information on "block" page ([e88a938](https://github.com/fhswf/openai-ui/commit/e88a938ab45e92c66f5b020bdaa45014b7bf20a8))
-
-## [0.11.4](https://github.com/fhswf/openai-ui/compare/v0.11.3...v0.11.4) (2025-02-14)
-
-
-### Bug Fixes
-
-* **ui:** ui fixes ([5724bcf](https://github.com/fhswf/openai-ui/commit/5724bcf9550f779ea01548cded41531e22589a10))
-
-## [0.11.3](https://github.com/fhswf/openai-ui/compare/v0.11.2...v0.11.3) (2025-02-14)
-
-
-### Bug Fixes
-
-* **deployment:** add http endpoint ([42700e3](https://github.com/fhswf/openai-ui/commit/42700e33eac28a8aacaf57dc2915dd3c4235d8f8))
-
-## [0.11.2](https://github.com/fhswf/openai-ui/compare/v0.11.1...v0.11.2) (2025-02-14)
-
-
-### Bug Fixes
-
-* **deployment:** add http endpoint ([002929e](https://github.com/fhswf/openai-ui/commit/002929ef6a6997acfe3d1ba8b64be55f1042d5b2))
-
-## [0.11.1](https://github.com/fhswf/openai-ui/compare/v0.11.0...v0.11.1) (2025-02-13)
-
-
-### Bug Fixes
-
-* **test:** accept terms in test setup ([e084d1c](https://github.com/fhswf/openai-ui/commit/e084d1ccdb522b5e0e266ce0eb9b81a69c7eba11))
-
-# [0.11.0](https://github.com/fhswf/openai-ui/compare/v0.10.0...v0.11.0) (2025-02-13)
-
-
-### Features
-
-* chat download ([c12d456](https://github.com/fhswf/openai-ui/commit/c12d456c715399b211a1fa29c7a56c7f99af4397))
-
-# [0.10.0](https://github.com/fhswf/openai-ui/compare/v0.9.2...v0.10.0) (2025-02-13)
-
-
-### Features
-
-* update user list ([94031db](https://github.com/fhswf/openai-ui/commit/94031db5dc0cc779b06e1aac2c4889153025b838))
-
-## [0.9.2](https://github.com/fhswf/openai-ui/compare/v0.9.1...v0.9.2) (2025-02-06)
-
-
-### Bug Fixes
-
-* **ci:** update gthub actions ([842c1f9](https://github.com/fhswf/openai-ui/commit/842c1f98f5c2b7282e02e3cab75d69d36b14e42f))
-
-## [0.9.1](https://github.com/fhswf/openai-ui/compare/v0.9.0...v0.9.1) (2024-04-26)
-
-
-### Bug Fixes
-
-* broken message streaming for assistants ([#29](https://github.com/fhswf/openai-ui/issues/29)) ([042715c](https://github.com/fhswf/openai-ui/commit/042715c16238739bd047f2e00c2ff3b15c54c431))
-
-# [0.9.0](https://github.com/fhswf/openai-ui/compare/v0.8.2...v0.9.0) (2024-04-26)
-
-
-### Features
-
-* update assistant api to v2 ([#27](https://github.com/fhswf/openai-ui/issues/27)) ([97ace9b](https://github.com/fhswf/openai-ui/commit/97ace9bdf5988ea6622ca0a10891d2b8489b2717))
-
-## [0.8.2](https://github.com/fhswf/openai-ui/compare/v0.8.1...v0.8.2) (2024-04-25)
-
-
-### Bug Fixes
-
-* incorrect api url for assistant ([#24](https://github.com/fhswf/openai-ui/issues/24)) ([ebe6be7](https://github.com/fhswf/openai-ui/commit/ebe6be743c69afabddfa2ec1d0ef236dee0ab2cd))
-
-## [0.8.1](https://github.com/fhswf/openai-ui/compare/v0.8.0...v0.8.1) (2024-04-25)
-
-
-### Bug Fixes
-
-* use api proxy for assistant ([#22](https://github.com/fhswf/openai-ui/issues/22)) ([1fff9d2](https://github.com/fhswf/openai-ui/commit/1fff9d2caf2099f50d9c65b365106120649a50ae))
-
-# [0.8.0](https://github.com/fhswf/openai-ui/compare/v0.7.0...v0.8.0) (2024-04-25)
-
-
-### Features
-
-* assistant mode ([#20](https://github.com/fhswf/openai-ui/issues/20)) ([1eb01a4](https://github.com/fhswf/openai-ui/commit/1eb01a4b9359bb6a5119bbfe038dad447ac91d34)), closes [#15](https://github.com/fhswf/openai-ui/issues/15)
-
-# [0.7.0](https://github.com/fhswf/openai-ui/compare/v0.6.0...v0.7.0) (2024-03-23)
-
-
-### Features
-
-* **ui:** edit message ([#14](https://github.com/fhswf/openai-ui/issues/14)) ([da322a2](https://github.com/fhswf/openai-ui/commit/da322a2b27af90649f9029d4a60a29a05c872c44))
-
-# [0.6.0](https://github.com/fhswf/openai-ui/compare/v0.5.5...v0.6.0) (2024-03-21)
-
-
-### Features
-
-* **ui:** User and application info ([2b081cb](https://github.com/fhswf/openai-ui/commit/2b081cb3e20be10a6fd802bd28c272f0e14f6d03))
-
-## [0.5.5](https://github.com/fhswf/openai-ui/compare/v0.5.4...v0.5.5) (2024-03-20)
-
-
-### Bug Fixes
-
-* remove endless loop in workflow ([a7b9f20](https://github.com/fhswf/openai-ui/commit/a7b9f20c609ace335ace61589107c7740e57afd7))
-
-## [0.5.4](https://github.com/fhswf/openai-ui/compare/v0.5.3...v0.5.4) (2024-03-20)
-
-
-### Bug Fixes
-
-* favicon ([e14c8e3](https://github.com/fhswf/openai-ui/commit/e14c8e3d7a46f39f04269d16047348ecef3dae04))
-* markdown highlighting ([5b4c8ac](https://github.com/fhswf/openai-ui/commit/5b4c8ac052f124c345cc6441705dea428c640c85))
-
-## [0.5.3](https://github.com/fhswf/openai-ui/compare/v0.5.2...v0.5.3) (2024-03-20)
-
-
-### Bug Fixes
-
-* workflow permissions ([b76fc30](https://github.com/fhswf/openai-ui/commit/b76fc30efffd265f28e2bd98a23d27713aa24147))
-
-## [0.5.2](https://github.com/fhswf/openai-ui/compare/v0.5.1...v0.5.2) (2024-03-20)
-
-
-### Bug Fixes
-
-* cookies for cors ([1c24d60](https://github.com/fhswf/openai-ui/commit/1c24d60729378f455ea999306d91685fe7c57920))
-
-## [0.5.1](https://github.com/fhswf/openai-ui/compare/v0.5.0...v0.5.1) (2024-03-19)
-
-
-### Bug Fixes
-
-* option passing to openai service ([fd486b1](https://github.com/fhswf/openai-ui/commit/fd486b19245f5c21a17d5212d70b89ca8f6cf333))
-
-# [0.5.0](https://github.com/fhswf/openai-ui/compare/v0.4.2...v0.5.0) (2024-03-19)
-
-
-### Features
-
-* reset options ([af26282](https://github.com/fhswf/openai-ui/commit/af26282b2bd2c8af5153cde8e992f98e75df6ee4))
-
-## [0.4.2](https://github.com/fhswf/openai-ui/compare/v0.4.1...v0.4.2) (2024-03-19)
-
-
-### Bug Fixes
-
-* option handling ([20a3153](https://github.com/fhswf/openai-ui/commit/20a31531ed5a7fd9a44361b42498f518c2cc1166))
-
-## [0.4.1](https://github.com/fhswf/openai-ui/compare/v0.4.0...v0.4.1) (2024-03-19)
-
-
-### Bug Fixes
-
-* docker build ([0e1f967](https://github.com/fhswf/openai-ui/commit/0e1f967ccdefa4c6a94527c73a7d06020d583953))
-
-# [0.4.0](https://github.com/fhswf/openai-ui/compare/v0.3.4...v0.4.0) (2024-03-19)
-
-
-### Features
-
-* endpoint configuration ([621f9a8](https://github.com/fhswf/openai-ui/commit/621f9a8904c7ab1790e47042feb8fb4309898bb9))
-* **ui:** i18n ([e8d385e](https://github.com/fhswf/openai-ui/commit/e8d385ed572945fe4398acd5459917553eb49a3f))
-
-## [0.3.4](https://github.com/fhswf/openai-ui/compare/v0.3.3...v0.3.4) (2024-03-19)
-
-
-### Bug Fixes
-
-* build workflow ([b20e104](https://github.com/fhswf/openai-ui/commit/b20e104e95ca39348d632a3ad7c0d7d85bf8cfa7))
-
-## [0.3.3](https://github.com/fhswf/openai-ui/compare/v0.3.2...v0.3.3) (2024-03-19)
-
-
-### Bug Fixes
-
-* build workflow ([745fdb4](https://github.com/fhswf/openai-ui/commit/745fdb4dbf2dd94442b50c3f3a0ba7a8793ea057))
-
-## [0.3.2](https://github.com/fhswf/openai-ui/compare/v0.3.1...v0.3.2) (2024-03-19)
-
-
-### Bug Fixes
-
-* build workflow ([baa8b1e](https://github.com/fhswf/openai-ui/commit/baa8b1e43bdfb8ed1b5b508af07216015c243254))
-
-## [0.3.1](https://github.com/fhswf/openai-ui/compare/v0.3.0...v0.3.1) (2024-03-19)
-
-
-### Bug Fixes
-
-* build workflow ([46c3187](https://github.com/fhswf/openai-ui/commit/46c3187f087fb7be9cca17b169e35891a3da0b60))
-
-# [0.3.0](https://github.com/fhswf/openai-ui/compare/v0.2.0...v0.3.0) (2024-03-19)
-
-
-### Features
-
-* **build:** tag image with release ([2685692](https://github.com/fhswf/openai-ui/commit/2685692a39aae22dcd261d8628f735340c631d19))
-
-# [0.2.0](https://github.com/fhswf/openai-ui/compare/v0.1.2...v0.2.0) (2024-03-18)
-
-
-### Bug Fixes
-
-* error handling ([da92610](https://github.com/fhswf/openai-ui/commit/da9261024540902b0234a2bc7884fbae0fe4eddf))
-
-
-### Features
-
-* **chat:** add math support ([d07f2cf](https://github.com/fhswf/openai-ui/commit/d07f2cf93f5bd57d2bee6fee83a96418f2d6dcd5))
-
-# 0.1.2 (2024-03-18)
-
-
-### Bug Fixes
-
-* accept enter in chat message ([f67f1df](https://github.com/fhswf/openai-ui/commit/f67f1df4d6c8b9d951d3c2ff45fcf7916f60a120))
-* accept enter in chat message ([b1f4a07](https://github.com/fhswf/openai-ui/commit/b1f4a0791c55906b8c340f0c53950b839f8dbca2))
-* initial chat state ([3119e19](https://github.com/fhswf/openai-ui/commit/3119e19265d7e5ec4aee6adb5b4ce217f7345288))
-* sha256 hash for gravatar ([f00896e](https://github.com/fhswf/openai-ui/commit/f00896eede8b27f1863ea9d25ef7e9237c89ea24))
-* somebug ([b2f3dc4](https://github.com/fhswf/openai-ui/commit/b2f3dc4a3e8fbd5375f166a4b4fc5602e9d67cc1))
-* update Textarea on value change ([c55a8d9](https://github.com/fhswf/openai-ui/commit/c55a8d9f0d7528f7c3f4d7402ba3a2aab81553e5))
-
-
-### Features
-
-* add prompt list ([864a41f](https://github.com/fhswf/openai-ui/commit/864a41f54850ec464b63b043d23ffc8f70cdaa87))
-* add prompt list ([4f9a255](https://github.com/fhswf/openai-ui/commit/4f9a2555c5fea44ce5628022bdadefe37896317f))
-* add prompt list ([a643783](https://github.com/fhswf/openai-ui/commit/a643783623508a878abfc726540794a638b28241))
-* add prompt list ([c10dc0d](https://github.com/fhswf/openai-ui/commit/c10dc0dfb1efb0a7c813721d3a6b3a7cceb7ce36))
-* fix window ([07634c9](https://github.com/fhswf/openai-ui/commit/07634c95eaccd63849888ebf33aa6bd9653496d8))
-* init ui ([f927776](https://github.com/fhswf/openai-ui/commit/f9277766105b829d484ab74a649d4394fa4813e3))
-* init ui ([4772f30](https://github.com/fhswf/openai-ui/commit/4772f3091041e3c3cc20a7da8184ceb9317dd4da))
-* init ui ([420c1d2](https://github.com/fhswf/openai-ui/commit/420c1d23d449b2e1222740232fc1370c6727ca4e))
-* init ui ([8218f5a](https://github.com/fhswf/openai-ui/commit/8218f5aec908aeb746a61cf9a0bdf31ba7f00b1f))
-* **readme:** update readme.md ([44a0ace](https://github.com/fhswf/openai-ui/commit/44a0acecc1c85e1508bded94ffb06b81aed0da29))
-* **readme:** update readme.md ([705c841](https://github.com/fhswf/openai-ui/commit/705c841dc4145ca402bf10387558e5a22865f3bb))
-* **readme:** update readme.md ([ff2be92](https://github.com/fhswf/openai-ui/commit/ff2be929f7fc5c2ddee5645ab5b2f19750f9f207))
-* res readme ([655feef](https://github.com/fhswf/openai-ui/commit/655feef808c0555782609dd05d189b9ae15fb70f))
-* res readme ([e359b26](https://github.com/fhswf/openai-ui/commit/e359b26a1d4f1915e55b59af5e44c31387107917))
-* **ui:** base ui component ([d4ff894](https://github.com/fhswf/openai-ui/commit/d4ff894ce708791f57d46fef11daeb20729890c8))
-* **ui:** base ui component ([2f363a3](https://github.com/fhswf/openai-ui/commit/2f363a3f5ada9a41c2532705ef3970e1db3b06e0))
-* **ui:** build base ui ([fdbf995](https://github.com/fhswf/openai-ui/commit/fdbf995ddeb2fa2072a984471b8f0af68fe1df61))
-* **ui:** build base ui ([b0dc695](https://github.com/fhswf/openai-ui/commit/b0dc69581a10c5016980efe1ece57e233206da25))
-* **ui:** build base ui component ([cb9c5aa](https://github.com/fhswf/openai-ui/commit/cb9c5aa8e12febd26a0c9352c697cc84ecf049d0))
-* **ui:** build base ui component ([4b82457](https://github.com/fhswf/openai-ui/commit/4b82457ccac5be7baf60ea6e843938b6c071819f))
-* **ui:** build base ui component ([0a541f0](https://github.com/fhswf/openai-ui/commit/0a541f046a2e41e42ec8accd423d51982b3ed479))
-* **ui:** build base ui component ([464afc9](https://github.com/fhswf/openai-ui/commit/464afc9b5b639693984d99e10732dec3d2e31183))
-* **ui:** build base ui component ([5eaab5b](https://github.com/fhswf/openai-ui/commit/5eaab5b8aef7f9c12a99c09a6b39b0dd0ec95504))
-* **ui:** build base ui component ([3f76407](https://github.com/fhswf/openai-ui/commit/3f76407fa4af144bb8c722aad389c909b2575d1b))
-* **ui:** build base ui component ([8cc465e](https://github.com/fhswf/openai-ui/commit/8cc465e6621fafbd2371273bbe2ee3e2e9baef47))
-* **ui:** build base ui component ([7a0287e](https://github.com/fhswf/openai-ui/commit/7a0287e3357ee2c104dc01ca60d1e8d052007ab8))
-* **ui:** build base ui component ([9fc5689](https://github.com/fhswf/openai-ui/commit/9fc56893c0b7850e0856c52b1d0c738a5260a7e9))
-* **ui:** build base ui component ([9c506b2](https://github.com/fhswf/openai-ui/commit/9c506b2405903bed6307d13a9408d354a4bcce5d))
-* **ui:** build base ui component ([4168da1](https://github.com/fhswf/openai-ui/commit/4168da18fec64516126e73e4786a7a68fc9d1c12))
-* **ui:** build base ui component ([d31160e](https://github.com/fhswf/openai-ui/commit/d31160e2ca28b3b80cfb440c6691478ac5be60ea))
-* **ui:** build base ui component ([cd2e289](https://github.com/fhswf/openai-ui/commit/cd2e2893ef79137848cdfdbe35fc0bc1c18f39ae))
-* **ui:** build base ui component ([1a13e66](https://github.com/fhswf/openai-ui/commit/1a13e666ea07bb61dbeef7cd5f0359ca6f861802))
-* **ui:** build base ui component ([714b0bd](https://github.com/fhswf/openai-ui/commit/714b0bd5de9401706069d7a318a392658443e75f))
-* **ui:** build base ui component ([880572c](https://github.com/fhswf/openai-ui/commit/880572c46a97f580a19eee68ddbc6b6d24296b59))
-* **ui:** build base ui component ([7ccb111](https://github.com/fhswf/openai-ui/commit/7ccb11116e43758d19d98d0bb60f2843cf11cc11))
-* **ui:** component style ([fda481c](https://github.com/fhswf/openai-ui/commit/fda481cdb6b75bb89e5414caefae8d8c02a6273f))
-* **ui:** editor chat ([1aa891c](https://github.com/fhswf/openai-ui/commit/1aa891cbd528295ce1cede0adf8dfd9d58f96794))
-* **ui:** editor chat ([936d8fb](https://github.com/fhswf/openai-ui/commit/936d8fb9c3ff072aff7f5a75889f2ae5c16198a6))
-
-# 0.1.1 (2024-03-18)
-
-
-### Bug Fixes
-
-* accept enter in chat message ([f67f1df](https://github.com/fhswf/openai-ui/commit/f67f1df4d6c8b9d951d3c2ff45fcf7916f60a120))
-* accept enter in chat message ([b1f4a07](https://github.com/fhswf/openai-ui/commit/b1f4a0791c55906b8c340f0c53950b839f8dbca2))
-* initial chat state ([3119e19](https://github.com/fhswf/openai-ui/commit/3119e19265d7e5ec4aee6adb5b4ce217f7345288))
-* sha256 hash for gravatar ([f00896e](https://github.com/fhswf/openai-ui/commit/f00896eede8b27f1863ea9d25ef7e9237c89ea24))
-* somebug ([b2f3dc4](https://github.com/fhswf/openai-ui/commit/b2f3dc4a3e8fbd5375f166a4b4fc5602e9d67cc1))
-* update Textarea on value change ([c55a8d9](https://github.com/fhswf/openai-ui/commit/c55a8d9f0d7528f7c3f4d7402ba3a2aab81553e5))
-
-
-### Features
+* use reviver function when loading state ([327631f](https://github.com/fhswf/openai-ui/commit/327631f2b32440293fca755ac6ba7b7c3dc7ab97))  
+  JSON reviver restores complex types (dates, maps) when restoring persisted state.
 
-* add prompt list ([864a41f](https://github.com/fhswf/openai-ui/commit/864a41f54850ec464b63b043d23ffc8f70cdaa87))
-* add prompt list ([4f9a255](https://github.com/fhswf/openai-ui/commit/4f9a2555c5fea44ce5628022bdadefe37896317f))
-* add prompt list ([a643783](https://github.com/fhswf/openai-ui/commit/a643783623508a878abfc726540794a638b28241))
-* add prompt list ([c10dc0d](https://github.com/fhswf/openai-ui/commit/c10dc0dfb1efb0a7c813721d3a6b3a7cceb7ce36))
-* fix window ([07634c9](https://github.com/fhswf/openai-ui/commit/07634c95eaccd63849888ebf33aa6bd9653496d8))
-* init ui ([f927776](https://github.com/fhswf/openai-ui/commit/f9277766105b829d484ab74a649d4394fa4813e3))
-* init ui ([4772f30](https://github.com/fhswf/openai-ui/commit/4772f3091041e3c3cc20a7da8184ceb9317dd4da))
-* init ui ([420c1d2](https://github.com/fhswf/openai-ui/commit/420c1d23d449b2e1222740232fc1370c6727ca4e))
-* init ui ([8218f5a](https://github.com/fhswf/openai-ui/commit/8218f5aec908aeb746a61cf9a0bdf31ba7f00b1f))
-* **readme:** update readme.md ([44a0ace](https://github.com/fhswf/openai-ui/commit/44a0acecc1c85e1508bded94ffb06b81aed0da29))
-* **readme:** update readme.md ([705c841](https://github.com/fhswf/openai-ui/commit/705c841dc4145ca402bf10387558e5a22865f3bb))
-* **readme:** update readme.md ([ff2be92](https://github.com/fhswf/openai-ui/commit/ff2be929f7fc5c2ddee5645ab5b2f19750f9f207))
-* res readme ([655feef](https://github.com/fhswf/openai-ui/commit/655feef808c0555782609dd05d189b9ae15fb70f))
-* res readme ([e359b26](https://github.com/fhswf/openai-ui/commit/e359b26a1d4f1915e55b59af5e44c31387107917))
-* **ui:** base ui component ([d4ff894](https://github.com/fhswf/openai-ui/commit/d4ff894ce708791f57d46fef11daeb20729890c8))
-* **ui:** base ui component ([2f363a3](https://github.com/fhswf/openai-ui/commit/2f363a3f5ada9a41c2532705ef3970e1db3b06e0))
-* **ui:** build base ui ([fdbf995](https://github.com/fhswf/openai-ui/commit/fdbf995ddeb2fa2072a984471b8f0af68fe1df61))
-* **ui:** build base ui ([b0dc695](https://github.com/fhswf/openai-ui/commit/b0dc69581a10c5016980efe1ece57e233206da25))
-* **ui:** build base ui component ([cb9c5aa](https://github.com/fhswf/openai-ui/commit/cb9c5aa8e12febd26a0c9352c697cc84ecf049d0))
-* **ui:** build base ui component ([4b82457](https://github.com/fhswf/openai-ui/commit/4b82457ccac5be7baf60ea6e843938b6c071819f))
-* **ui:** build base ui component ([0a541f0](https://github.com/fhswf/openai-ui/commit/0a541f046a2e41e42ec8accd423d51982b3ed479))
-* **ui:** build base ui component ([464afc9](https://github.com/fhswf/openai-ui/commit/464afc9b5b639693984d99e10732dec3d2e31183))
-* **ui:** build base ui component ([5eaab5b](https://github.com/fhswf/openai-ui/commit/5eaab5b8aef7f9c12a99c09a6b39b0dd0ec95504))
-* **ui:** build base ui component ([3f76407](https://github.com/fhswf/openai-ui/commit/3f76407fa4af144bb8c722aad389c909b2575d1b))
-* **ui:** build base ui component ([8cc465e](https://github.com/fhswf/openai-ui/commit/8cc465e6621fafbd2371273bbe2ee3e2e9baef47))
-* **ui:** build base ui component ([7a0287e](https://github.com/fhswf/openai-ui/commit/7a0287e3357ee2c104dc01ca60d1e8d052007ab8))
-* **ui:** build base ui component ([9fc5689](https://github.com/fhswf/openai-ui/commit/9fc56893c0b7850e0856c52b1d0c738a5260a7e9))
-* **ui:** build base ui component ([9c506b2](https://github.com/fhswf/openai-ui/commit/9c506b2405903bed6307d13a9408d354a4bcce5d))
-* **ui:** build base ui component ([4168da1](https://github.com/fhswf/openai-ui/commit/4168da18fec64516126e73e4786a7a68fc9d1c12))
-* **ui:** build base ui component ([d31160e](https://github.com/fhswf/openai-ui/commit/d31160e2ca28b3b80cfb440c6691478ac5be60ea))
-* **ui:** build base ui component ([cd2e289](https://github.com/fhswf/openai-ui/commit/cd2e2893ef79137848cdfdbe35fc0bc1c18f39ae))
-* **ui:** build base ui component ([1a13e66](https://github.com/fhswf/openai-ui/commit/1a13e666ea07bb61dbeef7cd5f0359ca6f861802))
-* **ui:** build base ui component ([714b0bd](https://github.com/fhswf/openai-ui/commit/714b0bd5de9401706069d7a318a392658443e75f))
-* **ui:** build base ui component ([880572c](https://github.com/fhswf/openai-ui/commit/880572c46a97f580a19eee68ddbc6b6d24296b59))
-* **ui:** build base ui component ([7ccb111](https://github.com/fhswf/openai-ui/commit/7ccb11116e43758d19d98d0bb60f2843cf11cc11))
-* **ui:** component style ([fda481c](https://github.com/fhswf/openai-ui/commit/fda481cdb6b75bb89e5414caefae8d8c02a6273f))
-* **ui:** editor chat ([1aa891c](https://github.com/fhswf/openai-ui/commit/1aa891cbd528295ce1cede0adf8dfd9d58f96794))
-* **ui:** editor chat ([936d8fb](https://github.com/fhswf/openai-ui/commit/936d8fb9c3ff072aff7f5a75889f2ae5c16198a6))
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..9075d4a2
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,60 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactPlugin from "eslint-plugin-react";
+import prettierPlugin from "eslint-plugin-prettier";
+import prettierConfig from "eslint-config-prettier";
+import { FlatCompat } from "@eslint/eslintrc";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import tseslint from "typescript-eslint";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+});
+
+export default [
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    {
+        files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2020,
+            sourceType: "module",
+            globals: {
+                ...globals.browser,
+                ...globals.es2020,
+                Atomics: "readonly",
+                SharedArrayBuffer: "readonly",
+            },
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+        plugins: {
+            react: reactPlugin,
+            prettier: prettierPlugin,
+        },
+        rules: {
+            ...prettierConfig.rules,
+            "prettier/prettier": "error",
+            "react/react-in-jsx-scope": "off", // Not needed in React 17+
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-unused-vars": "warn",
+            "@typescript-eslint/no-empty-object-type": "off",
+            "@typescript-eslint/no-unused-expressions": "off",
+            "no-unused-vars": "off", // Use typescript-eslint version
+        },
+        settings: {
+            react: {
+                version: "detect",
+            },
+        },
+    },
+    // Storybook specific configuration
+    ...compat.extends("plugin:storybook/recommended"),
+];
diff --git a/package.json b/package.json
index dca606b4..a746976a 100644
--- a/package.json
+++ b/package.json
@@ -163,6 +163,7 @@
     }
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
     "@playwright/test": "^1.56.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
@@ -176,8 +177,12 @@
     "css-loader": "^6.7.3",
     "cypress": "^14.2.1",
     "eslint": "^9.20.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-storybook": "^10.1.0",
     "file-loader": "^6.2.0",
+    "globals": "^16.5.0",
     "html-webpack-plugin": "^5.5.0",
     "less": "^4.2.2",
     "less-loader": "^11.1.0",
@@ -190,8 +195,10 @@
     "prop-types": "^15.8.1",
     "semantic-release": "^25.0.2",
     "semantic-release-replace-plugin": "^1.2.7",
+    "storybook": "^10.1.0",
     "style-loader": "^4.0.0",
     "typescript": "^5.8.2",
+    "typescript-eslint": "^8.48.0",
     "url-loader": "^4.1.1",
     "vite": "^6.3.4",
     "vite-plugin-compression2": "^1.3.3",
diff --git a/playwright.config.ts b/playwright.config.ts
index f4cb363a..b596983f 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -27,6 +27,8 @@ export default defineConfig({
     /* Base URL to use in actions like `await page.goto('')`. */
     baseURL: 'http://localhost:5173',
 
+    locale: 'de-DE',
+
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
@@ -61,27 +63,38 @@ export default defineConfig({
         storageState: 'playwright/.auth/user.json'
       },
       dependencies: ['setup'],
+
     },
 
     /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
+    {
+      name: 'Mobile Chrome',
+      use: {
+        ...devices['Pixel 5'],
+        storageState: 'playwright/.auth/user.json'
+      },
+      dependencies: ['setup'],
+    },
+    {
+      name: 'Mobile Safari',
+      use: {
+        ...devices['iPhone 12'],
+        storageState: 'playwright/.auth/user.json'
+      },
+      dependencies: ['setup'],
+    },
 
     /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
+    {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge', storageState: 'playwright/.auth/user.json' },
+      dependencies: ['setup'],
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome', storageState: 'playwright/.auth/user.json' },
+      dependencies: ['setup'],
+    },
   ],
 
   /* Run your local dev server before starting the tests */
diff --git a/playwright/tests/authorized/image_delete.spec.ts b/playwright/tests/authorized/image_delete.spec.ts
new file mode 100644
index 00000000..91a97f0d
--- /dev/null
+++ b/playwright/tests/authorized/image_delete.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from '../baseFixtures';
+
+test('Image Delete', async ({ page, browserName }) => {
+    test.skip(browserName === 'webkit', "Skipping Webkit due to issues with OPFS");
+
+    await page.goto("");
+
+    // Ensure chat is ready
+    await expect(page.getByTestId('ChatTextArea')).toBeVisible();
+
+    // Create a dummy image file
+    const buffer = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==', 'base64');
+
+    // Upload an image
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.getByTestId('UploadFileBtn').click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles({
+        name: 'test_image_delete.png',
+        mimeType: 'image/png',
+        buffer: buffer,
+    });
+
+    // Verify image is visible
+    const imageLocator = page.locator('img[alt="test_image_delete.png"]');
+    await expect(imageLocator).toBeVisible();
+
+    // Click delete button
+    await page.getByLabel('Delete image').click();
+
+    // Verify image is gone
+    await expect(imageLocator).not.toBeVisible();
+});
diff --git a/playwright/tests/authorized/image_drop.spec.ts b/playwright/tests/authorized/image_drop.spec.ts
new file mode 100644
index 00000000..804691a9
--- /dev/null
+++ b/playwright/tests/authorized/image_drop.spec.ts
@@ -0,0 +1,54 @@
+import { test, expect } from '../baseFixtures';
+
+
+test('Image Drop', async ({ page, browserName }) => {
+    test.skip(browserName === 'webkit', "Skipping Webkit due to issues with OPFS");
+
+    await page.goto("");
+
+    // Ensure chat is ready
+    await expect(page.getByTestId('ChatTextArea')).toBeVisible();
+
+    // Create a dummy image file
+    const buffer = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==', 'base64');
+
+    // Test clicking the upload button
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.getByTestId('UploadFileBtn').click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles({
+        name: 'test_image_click.png',
+        mimeType: 'image/png',
+        buffer: buffer,
+    });
+    await expect(page.locator('img[alt="test_image_click.png"]')).toBeVisible();
+
+    // Test drag and drop
+    // We can use dispatchEvent to simulate a drop event on the dropzone
+    const dataTransfer = await page.evaluateHandle((data) => {
+        const dt = new DataTransfer();
+        const binaryString = atob(data.buffer);
+        const bytes = new Uint8Array(binaryString.length);
+        for (let i = 0; i < binaryString.length; i++) {
+            bytes[i] = binaryString.codePointAt(i) || 0;
+        }
+        const file = new File([bytes], 'test_image_drop.png', { type: 'image/png' });
+        dt.items.add(file);
+        return dt;
+    }, { buffer: buffer.toString('base64') });
+
+    await page.getByTestId('file-input').dispatchEvent('drop', { dataTransfer });
+    await expect(page.locator('img[alt="test_image_drop.png"]')).toBeVisible();
+
+    // Test sending the message with the image
+    // This verifies that the OPFS image is correctly converted to base64 and sent to the API
+    // without causing a 400 error.
+    await page.getByTestId('ChatTextArea').fill("Test message with image");
+    await page.getByTestId('SendMessageBtn').click();
+
+    // Wait for the user message to appear in the chat history
+    // It should contain the image
+    const userMessage = page.locator('[data-testid^="ChatMessage-"]').filter({ has: page.locator('img[alt="test_image_drop.png"]') });
+    await expect(userMessage).toBeVisible();
+    await expect(userMessage.locator('img[alt="test_image_drop.png"]')).toBeVisible({ timeout: 15000 });
+});
diff --git a/playwright/tests/authorized/image_generation.spec.ts b/playwright/tests/authorized/image_generation.spec.ts
new file mode 100644
index 00000000..b325cab3
--- /dev/null
+++ b/playwright/tests/authorized/image_generation.spec.ts
@@ -0,0 +1,67 @@
+import { test, expect } from '../baseFixtures';
+
+test('Image Generation', async ({ page, browserName }) => {
+    test.skip(browserName === 'webkit', "Skipping Webkit due to issues with OPFS");
+
+    // Mock the OpenAI API response
+    await page.route('**/v1/responses', async route => {
+        const responseBody = [
+            {
+                type: 'response.created',
+                response: {
+                    id: 'resp_mock_123',
+                }
+            },
+            {
+                type: 'response.output_item.done',
+                item: {
+                    id: 'item_mock_123',
+                    output_format: 'png',
+                    result: 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==', // 1x1 red pixel
+                }
+            },
+            {
+                type: 'response.completed',
+                response: {
+                    usage: {
+                        total_tokens: 10,
+                        input_tokens: 5,
+                        output_tokens: 5
+                    }
+                }
+            }
+        ];
+
+        // Simulate SSE stream
+        const stream = responseBody.map(event => `data: ${JSON.stringify(event)}\n\n`).join('');
+
+        await route.fulfill({
+            status: 200,
+            contentType: 'text/event-stream',
+            body: stream,
+        });
+    });
+
+    // Enable console logging
+    page.on('console', msg => console.log(`BROWSER LOG: ${msg.text()}`));
+
+    await page.goto("");
+
+    // Ensure chat is ready
+    await expect(page.getByTestId('ChatTextArea')).toBeVisible();
+
+    // Send a message to trigger image generation
+    await page.getByTestId('ChatTextArea').fill('Generate a red pixel');
+    await page.getByTestId('SendMessageBtn').click();
+
+    // Check for error toast
+    const errorToast = page.locator('.chakra-toast');
+    if (await errorToast.isVisible()) {
+        console.log('Error Toast found:', await errorToast.textContent());
+    }
+
+    // Verify the image is displayed
+    // Verify the image is displayed
+    // The key in message.images is the item id
+    await expect(page.getByTestId('generated-image-item_mock_123')).toBeVisible({ timeout: 10000 });
+});
diff --git a/playwright/tests/authorized/message_edit.spec.ts b/playwright/tests/authorized/message_edit.spec.ts
new file mode 100644
index 00000000..ed2f2e65
--- /dev/null
+++ b/playwright/tests/authorized/message_edit.spec.ts
@@ -0,0 +1,63 @@
+import { test, expect } from '../baseFixtures';
+
+test.describe("Message Editing", () => {
+    test("should populate input when editing a message with text and image", async ({ page, browserName }) => {
+        test.skip(browserName === 'webkit', "Skipping Webkit due to issues with OPFS");
+        await page.goto("/");
+
+        // Ensure chat is ready
+        await expect(page.getByTestId('ChatTextArea')).toBeVisible();
+
+        // 1. Drop an image
+        const buffer = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==', 'base64');
+        const fileChooserPromise = page.waitForEvent('filechooser');
+        await page.getByTestId('UploadFileBtn').click();
+        const fileChooser = await fileChooserPromise;
+        await fileChooser.setFiles({
+            name: 'test_image_edit.png',
+            mimeType: 'image/png',
+            buffer: buffer,
+        });
+
+        // Wait for image to appear in input
+        // Check if Skeleton appears first (implies state update happened)
+        // Note: Skeleton might be too fast to catch, but if it hangs, we might see it.
+        // We'll just wait for img with longer timeout.
+        await expect(page.locator('[data-testid="MessageInputBar"] img')).toBeVisible({ timeout: 15000 });
+
+        // 2. Add text
+        await page.getByTestId('ChatTextArea').fill("Test message with image");
+
+        // Get initial message count
+        const initialCount = await page.locator('[data-testid^="ChatMessage-"]').count();
+        console.log("Initial message count:", initialCount);
+
+        // 3. Send message
+        await expect(page.getByTestId('SendMessageBtn')).toBeEnabled();
+        await page.getByTestId('SendMessageBtn').click();
+
+        // Wait for message count to increase
+        await expect(page.locator('[data-testid^="ChatMessage-"]')).toHaveCount(initialCount + 1, { timeout: 1000 }).catch(() => {
+            // If it fails, check if it's more than expected (e.g. assistant response added too)
+            // We'll rely on finding the specific message content next
+        });
+
+        // Wait for message to appear in chat
+        // The user message should contain the text
+        const userMessage = page.locator('[data-testid^="ChatMessage-"]').filter({ has: page.locator('img[alt="test_image_edit.png"]') });
+        await expect(userMessage).toBeVisible();
+        await expect(userMessage).toContainText("Test message with image");
+
+        // 4. Click edit button on the last user message
+        // The edit button might be hidden until hover
+        await userMessage.hover();
+        await userMessage.getByTestId('EditMessageBtn').click();
+
+        // 5. Verify input is populated
+        await expect(page.getByTestId('ChatTextArea')).toHaveValue("Test message with image");
+
+        // 6. Verify image is present in the input area (preview)
+        // In MessageInput, images are rendered in a stack. We can check for the img tag with the alt text.
+        await expect(page.locator('[data-testid="MessageInputBar"] img[alt="test_image_edit.png"]')).toBeVisible();
+    });
+});
diff --git a/playwright/tests/unauthorized/no-affiliation.spec.ts b/playwright/tests/unauthorized/no-affiliation.spec.ts
index 53b3959c..55b6c7e8 100644
--- a/playwright/tests/unauthorized/no-affiliation.spec.ts
+++ b/playwright/tests/unauthorized/no-affiliation.spec.ts
@@ -5,7 +5,7 @@ import { test, expect } from '../baseFixtures';
 test('No Affiliation Access Denied', async ({ browser }) => {
     const page = await browser.newPage({ storageState: undefined });
 
-    await page.goto('https://openai.ki.fh-swf.de');
+    await page.goto("");
     await expect(page.getByRole('button', { name: 'SSO Login mit der FH Kennung' })).toBeVisible();
     await expect(page.getByRole('button', { name: 'Cluster Login' })).toBeVisible();
     await page.getByRole('button', { name: 'Cluster Login' }).click();
@@ -16,5 +16,5 @@ test('No Affiliation Access Denied', async ({ browser }) => {
     await page.getByRole('textbox', { name: 'Cluster Benutzername:' }).press('Tab');
     await page.getByRole('textbox', { name: 'Cluster Kennwort:' }).fill('test');
     await page.getByRole('button', { name: 'Login Cluster' }).click();
-    await expect(page.locator('h1')).toContainText('Kein Zugriff');
+    await expect(page.getByTestId('no-access-message')).toBeVisible();
 });
\ No newline at end of file
diff --git a/src/assets/style/common.less b/src/assets/style/common.less
index 326b66b0..b92d5df8 100644
--- a/src/assets/style/common.less
+++ b/src/assets/style/common.less
@@ -79,13 +79,6 @@
 }
 
 [data-theme="dark"] {
-  // --background-color-gray: #121212;
-  // --background-color: #202020;
-  // --border-color: #353535;
-  // --text-color: #f6f6f6;
-  // --text-color-gray: #656565;
-
-  // --background-color-gray: #292c34;
   --background-color: #2e323a;
   --background-color-gray: #282c34;
   --border-color: #181a21;
diff --git a/src/chat/Chat.tsx b/src/chat/Chat.tsx
index 5cfc3b23..ce90664e 100644
--- a/src/chat/Chat.tsx
+++ b/src/chat/Chat.tsx
@@ -1,139 +1,166 @@
-import React, { useEffect } from 'react'
+import React from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { Alert, Button, Center, Grid, GridItem, Heading, HStack, Text } from "@chakra-ui/react"
-import { Toaster, toaster } from "../components/ui/toaster"
-import { ChatMessage } from './ChatMessage'
-import { MessageHeader } from './MessageHeader';
-import { ChatSideBar } from './ChatSideBar'
-
-import { Apps } from './apps/index'
-import { ChatList } from './ChatList'
-import { classnames } from '../components/utils'
-import { useGlobal } from './context'
-
-import styles from './style/chat.module.less'
-import { ScrollView } from './component'
-import './style.less'
-
-import { Config } from './Config'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import remarkMath from 'remark-math'
-import smartypants from 'remark-smartypants'
-import rehypeKatex from 'rehype-katex'
-import { func } from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { t } from 'i18next';
-import { MessageInput } from './MessageInput';
-import { use } from 'chai';
+import {
+  Alert,
+  Button,
+  Center,
+  Grid,
+  GridItem,
+  Heading,
+  HStack,
+  Text,
+} from "@chakra-ui/react";
+import { Toaster, toaster } from "../components/ui/toaster";
+import { ChatMessage } from "./ChatMessage";
+import { MessageHeader } from "./MessageHeader";
+import { ChatSideBar } from "./ChatSideBar";
+import { classnames } from "../components/utils";
+import { useGlobal } from "./context";
+
+import styles from "./style/chat.module.less";
+import "./style.less";
+
+import { Config } from "./Config";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import smartypants from "remark-smartypants";
+import { useTranslation } from "react-i18next";
+import { t } from "i18next";
+import { MessageInput } from "./MessageInput";
 import {
   ATTR_ERROR_TYPE,
   ATTR_EXCEPTION_MESSAGE,
-  ATTR_EXCEPTION_STACKTRACE
-} from '@opentelemetry/semantic-conventions';
-import { logger, SeverityNumber } from './utils/instrumentation'
+  ATTR_EXCEPTION_STACKTRACE,
+} from "@opentelemetry/semantic-conventions";
+import { logger, SeverityNumber } from "./utils/instrumentation";
+
+type ErrorFallbackProps = {
+  readonly error: Error;
+  readonly resetErrorBoundary: () => void;
+};
 
-function ErrorFallback({ error, resetErrorBoundary }) {
+function ErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
+  console.log("error: %o %s", error.stack, typeof error.stack);
 
-  console.log("error: %o %s", error.stack, typeof error.stack)
+  const stackTrace = React.useMemo(() => {
+    return error.stack.split("\n").map((line, index) => ({
+      id: `trace-${index}`,
+      content: line,
+    }));
+  }, [error.stack]);
 
   logger.emit({
     severityNumber: SeverityNumber.ERROR,
     severityText: "ERROR",
     body: { message: error.message, stack: error.stack.toString() },
-    attributes: { [ATTR_ERROR_TYPE]: 'exception', [ATTR_EXCEPTION_MESSAGE]: error.message, [ATTR_EXCEPTION_STACKTRACE]: error.stack.toString() },
+    attributes: {
+      [ATTR_ERROR_TYPE]: "exception",
+      [ATTR_EXCEPTION_MESSAGE]: error.message,
+      [ATTR_EXCEPTION_STACKTRACE]: error.stack.toString(),
+    },
   });
 
-  //const t = (key) => key
-  // const { t } = useTranslation();
-
   const resetSettings = () => {
-    console.log("resetSettings")
+    console.log("resetSettings");
     localStorage.setItem("SESSIONS", "");
-    window.location.reload();
-  }
+    globalThis.location.reload();
+  };
 
   return (
     <Center height="100%" margin="10ex">
-      <Alert.Root variant="surface" status="error" >
+      <Alert.Root variant="surface" status="error">
         <Alert.Indicator />
         <Alert.Content>
-          <Alert.Title as="h2" fontSize="lg">{t("An error occurred") + ": " + error.name}</Alert.Title>
+          <Alert.Title as="h2" fontSize="lg">
+            {t("An error occurred") + ": " + error.name}
+          </Alert.Title>
           <Alert.Description>
             {error.message}
 
-            <Heading paddingBlockStart="1ex" as="h3" fontSize="md">Stacktrace:</Heading>
-            {error.stack.split("\n").map((line, index) => <Text key={index}>{line}</Text>)}
+            <Heading paddingBlockStart="1ex" as="h3" fontSize="md">
+              Stacktrace:
+            </Heading>
+            {stackTrace.map((line) => (
+              <Text key={line.id}>{line.content}</Text>
+            ))}
           </Alert.Description>
           <HStack justify="end" spacing="2">
-            <Button variant="subtle" onClick={resetSettings}>{t("Reset settings")}</Button>
-            <Button variant="solid" onClick={resetErrorBoundary}>{t("Try again")}</Button>
+            <Button variant="subtle" onClick={resetSettings}>
+              {t("Reset settings")}
+            </Button>
+            <Button variant="solid" onClick={resetErrorBoundary}>
+              {t("Try again")}
+            </Button>
           </HStack>
         </Alert.Content>
       </Alert.Root>
-    </Center >
-  )
+    </Center>
+  );
 }
 
 export default function Chat() {
-  const { is, user } = useGlobal()
+  const { is, user } = useGlobal();
   const { t } = useTranslation();
-  const chatStyle = is?.fullScreen ? styles.full : styles.normal
+  const chatStyle = is?.fullScreen ? styles.full : styles.normal;
+
+  globalThis.onerror = function (message, source, lineno, colno, error) {
+    const errorMessage =
+      typeof message === "string"
+        ? message
+        : (message as ErrorEvent)?.message || "Unknown Error";
 
-  window.onerror = function (message, source, lineno, colno, error) {
     logger.emit({
       severityNumber: SeverityNumber.ERROR,
       severityText: "ERROR",
-      body: { message: typeof message === 'string' ? message : message?.toString(), source, lineno, colno, stack: error.stack.toString() },
-      attributes: { [ATTR_ERROR_TYPE]: 'exception', [ATTR_EXCEPTION_MESSAGE]: error.message.toString(), [ATTR_EXCEPTION_STACKTRACE]: error.stack.toString() },
+      body: {
+        message: errorMessage,
+        source,
+        lineno,
+        colno,
+        stack: error?.stack?.toString(),
+      },
+      attributes: {
+        [ATTR_ERROR_TYPE]: "exception",
+        [ATTR_EXCEPTION_MESSAGE]: error?.message?.toString() || errorMessage,
+        [ATTR_EXCEPTION_STACKTRACE]: error?.stack?.toString(),
+      },
+    });
+    console.log("window.onerror: %o %o", error, error?.stack);
+    toaster.create({
+      type: "error",
+      title: "An Error Occurred",
+      description: `${errorMessage}, ${source}, ${lineno}, ${colno}`,
     });
-    console.log("window.onerror: %o %o", error, error.stack)
-    toaster.create({ type: "error", title: "An Error Occurred", description: (`${message}, ${source}, ${lineno}, ${colno}`) })
     return true;
-  }
-
-
-
+  };
 
   /**
    * Check if the user is allowed to access the chat
-   * @returns {boolean} true if the user is allowed to access the chat 
+   * @returns {boolean} true if the user is allowed to access the chat
    */
   function checkUser() {
-    if (!(user?.affiliations && user.affiliations['fh-swf.de']))
-      return false
-    else
-      return true
+    return user?.affiliations?.["fh-swf.de"];
   }
 
-  const userText = `
-  # Kein Zugriff
-
-Der Zugriff auf den Chat ist nur für Mitglieder der FH SWF möglich. Wenn du ein Mitglied bist, melde dich bitte mit Deiner Hochschulkennung an.
-`
+  const userText = t("user_not_allowed");
 
   if (!checkUser()) {
     return (
       <div className={classnames(styles.chat, chatStyle)}>
         <MessageHeader />
         <div className={styles.chat_inner}>
-
-          <div>
-            <Markdown
-              remarkPlugins={[remarkGfm, smartypants]}
-            >
+          <div className={styles.no_access} data-testid="no-access-message">
+            <Markdown remarkPlugins={[remarkGfm, smartypants]}>
               {userText}
             </Markdown>
-            <div>
-              <p>Ihre Benutzerdaten lauten:</p>
 
-              <pre>
-                {JSON.stringify(user, null, 2)}
-              </pre>
-            </div>
+            <p>Ihre Benutzerdaten lauten:</p>
+
+            <pre>{JSON.stringify(user, null, 2)}</pre>
           </div>
         </div>
-      </div>)
+      </div>
+    );
   }
 
   return (
@@ -150,37 +177,30 @@ Der Zugriff auf den Chat ist nur für Mitglieder der FH SWF möglich. Wenn du ei
           <MessageHeader />
         </GridItem>
 
-        <GridItem gridArea={"side"} as="aside" className={is?.toolbar ? styles.showToolbar : styles.hideToolbar}>
+        <GridItem
+          gridArea={"side"}
+          as="aside"
+          className={is?.toolbar ? styles.showToolbar : styles.hideToolbar}
+        >
           <ChatSideBar />
         </GridItem>
 
-        {
-          is?.config ?
-            <Config />
-            :
-            <GridItem as="main" gridArea={"main"} overflow="auto">
-              <ErrorBoundary fallbackRender={ErrorFallback}>
-                <div className={styles.chat_content}>
-
-                  {
-
-                    is?.sidebar && <div className={styles.sider} data-testid="ConversationSideBar">
-                      <ScrollView>
-                        {is?.apps ? <Apps /> : <ChatList />}
-                      </ScrollView>
-                    </div>
-                  }
-                  <ChatMessage />
-                </div>
-              </ErrorBoundary>
-            </GridItem>
-
-        }
+        {is?.config ? (
+          <Config />
+        ) : (
+          <GridItem as="main" gridArea={"main"} overflow="auto">
+            <ErrorBoundary fallbackRender={ErrorFallback}>
+              <div className={styles.chat_content}>
+                <ChatMessage />
+              </div>
+            </ErrorBoundary>
+          </GridItem>
+        )}
 
         <GridItem gridArea={"input"}>
           <MessageInput />
         </GridItem>
       </Grid>
     </ErrorBoundary>
-  )
+  );
 }
diff --git a/src/chat/ChatApp.tsx b/src/chat/ChatApp.tsx
index 80d120e6..698b89af 100644
--- a/src/chat/ChatApp.tsx
+++ b/src/chat/ChatApp.tsx
@@ -1,33 +1,20 @@
-import React, { Suspense, useEffect } from 'react'
-import { ChatProvider, useGlobal } from "./context"
-import { AppsProvider } from './apps/context'
-import { useTheme } from '../components/hooks'
-import { Theme, ProgressCircle } from "@chakra-ui/react"
-
-import './style.less'
-const Chat = React.lazy(() => import("./Chat"))
-
+import React, { Suspense } from "react";
+import { ChatProvider } from "./context";
+import { AppsProvider } from "./apps/context";
+import { ProgressCircle } from "@chakra-ui/react";
 
+import "./style.less";
+const Chat = React.lazy(() => import("./Chat"));
 
 export default function ChatApp() {
-  const [current, toggleCurrent] = useTheme()
-
-  
-  const loading = (
-    <ProgressCircle.Root
-      size="lg"
-      color="blue.400"
-    />
-  )
+  const loading = <ProgressCircle.Root size="lg" color="blue.400" />;
   return (
     <Suspense fallback={loading}>
       <ChatProvider>
         <AppsProvider>
-          <Theme value={current}>
-            <Chat />
-          </Theme>
+          <Chat />
         </AppsProvider>
       </ChatProvider>
     </Suspense>
-  )
+  );
 }
diff --git a/src/chat/ChatHistory.tsx b/src/chat/ChatHistory.tsx
index bd071f65..d12bc111 100644
--- a/src/chat/ChatHistory.tsx
+++ b/src/chat/ChatHistory.tsx
@@ -1,17 +1,13 @@
-import React from 'react'
-import { useMessage } from './hooks/useMessage'
+import React from "react";
+import { useMessage } from "./hooks/useMessage";
 
 export function ChatHistory() {
-  const { message } = useMessage()
+  const { message } = useMessage();
   return (
     <div>
-      {
-        message?.messages?.map(item =>
-          <div key={item.id}>
-            {item.content}
-          </div>
-        )
-      }
+      {message?.messages?.map((item) => (
+        <div key={item.id}>{item.content}</div>
+      ))}
     </div>
-  )
+  );
 }
diff --git a/src/chat/ChatImage.jsx b/src/chat/ChatImage.jsx
deleted file mode 100644
index db1fa55c..00000000
--- a/src/chat/ChatImage.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-
-export function ChatImage() {
-  return (
-    <div>ChatImage</div>
-  )
-}
diff --git a/src/chat/ChatList.jsx b/src/chat/ChatList.jsx
deleted file mode 100644
index dd5915cd..00000000
--- a/src/chat/ChatList.jsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { Button, Card, Field, Flex, HStack, IconButton, Spacer, Textarea } from "@chakra-ui/react"
-import { FiEdit } from "react-icons/fi";
-import { MdOutlineDelete } from "react-icons/md";
-import { IoAdd } from "react-icons/io5";
-import { useGlobal } from './context'
-import { classnames } from '../components/utils'
-import styles from './style/list.module.less'
-import { useTranslation } from 'react-i18next'
-import { t } from 'i18next'
-
-export function ListEmpty() {
-  return (
-    <div className={classnames('flex-column')}>
-      <Icon type="message" />
-      <Title type="h3">No conversations found<br />{t("Start a new conversation to begin storing them locally.")}</Title>
-    </div>
-  )
-}
-
-
-export function ColorIcon({ onChange }) {
-  const [color, setColor] = useState(1);
-  const [ico, setIco] = useState("files");
-  const icoRef = useRef(null)
-  const iconList = ["files", "scan-text", "message", "translation", "lab", "recommendations", "prompts", "productivity", "game", "engineers", "finance", "social-media", "designers", "programming", "write", "assistants", "education", "shark", "legal", "tape", "ui", "models", "mathematics", "science", "stopwatch"]
-  function handleSelectColor(colors, icos) {
-    colors && setColor(colors)
-    icos && setIco(icos)
-    onChange && onChange([color, ico])
-  }
-  const content = (
-    <div className={styles.tip}>
-      <div className={styles.colors}>
-        <div className={styles.colors_box}>
-          {new Array(15).fill(1).map((_, index) =>
-            <div
-              style={{ backgroundColor: `var(--tag-color-${index})` }}
-              key={index}
-              onClick={() => handleSelectColor(index)}
-              className={classnames(styles.colors_item, styles[`color-${index}`], color === index ? styles.colors_currColor : null)} />
-          )}
-        </div>
-        <div className={styles.colors_box}>
-          {iconList.map((item) =>
-            <div
-              onClick={() => handleSelectColor(null, item)}
-              key={item}
-              style={{ backgroundColor: ico === item && `var(--tag-color-${color})` }}
-              className={classnames(styles.colors_item, `ico-${item}`, ico === item ? styles.colors_currIco : null)} />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-  return (
-    <Popover content={content}>
-      <TagIco ico={ico} color={color} ref={icoRef} />
-    </Popover>
-  )
-}
-
-export const TagIco = React.forwardRef(({ ico, color, ...rest }, ref) => <div ref={ref} {...rest} className={classnames(styles.colors_item, `ico-${ico}`)} style={{ color: '#fff', backgroundColor: `var(--tag-color-${color})` }} />)
-
-export function EditItem(props) {
-  const { modifyChat, setState } = useGlobal()
-  const [title, setTitle] = useState(props.title);
-  const [icon, setIcon] = useState(props.icon);
-  return (
-    <Card.Root variant="subtle" colorPalette="teal">
-      <Card.Body>
-        <Card.Title>{t("Edit Conversation")}</Card.Title>
-        <Field.Root>
-          <Field.Label>{t("Icon")}</Field.Label>
-          <HStack>
-            <ColorIcon onChange={setIcon} />
-          </HStack>
-        </Field.Root>
-        <Field.Root>
-          <Field.Label>{t("Title")}</Field.Label>
-          <Textarea rows={3} variant="filled" value={title} onChange={evt => setTitle(evt.target.value)} data-testid="editConversationTextArea" />
-          <Field.HelperText>{t("Edit the title of the conversation.")}</Field.HelperText>
-        </Field.Root>
-      </Card.Body>
-      <Card.Footer justifyContent="center">
-        <Button onClick={() => setState({ currentEditor: null })} data-testid="editConversationCancelBtn">{t("Cancel")}</Button>
-        <Button onClick={() => modifyChat({ title, icon }, props.index)} type="primary" data-testid="editConversationSaveBtn">{t("Save")}</Button>
-      </Card.Footer>
-    </Card.Root>
-  )
-}
-
-export function ChatItem(props) {
-  const { icon } = props
-  const [color, ico] = icon || [1, 'files']
-  const { setState, removeChat, currentChat, currentEditor } = useGlobal()
-  const item =
-    (
-      <Card.Root
-        data-testid="ConversationCard" size="sm" onClick={() => setState({ currentChat: props.index })}
-        variant={currentChat === props.index ? "elevated" : "solid"}>
-
-        <Card.Header>
-          <Flex>
-            <TagIco ico={ico} color={color} />
-            <Spacer />
-            <IconButton aria-label="edit" size="xs" variant="ghost" data-testid="editConversation" onClick={() => setState({ currentEditor: props.index })} >
-              <FiEdit />
-            </IconButton>
-            <IconButton aria-label="delete" size="xs" variant="ghost" onClick={() => removeChat(props.index)} >
-              <MdOutlineDelete />
-            </IconButton>
-          </Flex>
-        </Card.Header>
-        <Card.Body>
-          <Card.Title data-testid="ConversationTitle" as={'h4'}>{props.title}</Card.Title>
-          <Card.Description>{t("count_messages", { count: props.messages.length })}</Card.Description>
-        </Card.Body>
-      </Card.Root >
-    )
-
-
-  if (currentEditor == props.index) {
-    return <EditItem {...props} />
-  }
-  else {
-    return item
-  }
-}
-
-
-export function ChatList() {
-  const { chat, newChat, currentApp } = useGlobal()
-
-
-  return (
-    <Flex gap="4" direction="column" data-testid="ConversationList">
-      {chat.length ? chat.map((item, index) => <ChatItem key={index} index={index} {...item} />) : <ListEmpty />}
-      <Button alignSelf="center"
-        type="primary"
-        onClick={() => newChat(currentApp)}
-        variant="surface"
-        data-testid="ConversationCreateBtn"><IoAdd />{t("New Conversation")}</Button>
-    </Flex>
-  )
-}
diff --git a/src/chat/ChatMessage.tsx b/src/chat/ChatMessage.tsx
index 9f2cbe76..49bfcd7d 100644
--- a/src/chat/ChatMessage.tsx
+++ b/src/chat/ChatMessage.tsx
@@ -1,299 +1,470 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from "react";
 import { Tool } from "openai/resources/responses/responses.mjs";
 
-import { Accordion, Avatar, Badge, Card, Heading, HStack, Icon, IconButton, Popover, Skeleton, Spacer, Span, Stack, Tag, Text, VStack } from "@chakra-ui/react";
-import { Tooltip } from "../components/ui/tooltip"
-import { GrDocumentDownload } from "react-icons/gr";
-import { AiOutlineOpenAI } from "react-icons/ai";
+import {
+  Accordion,
+  Avatar,
+  Badge,
+  Card,
+  Heading,
+  HStack,
+  IconButton,
+  Popover,
+  Skeleton,
+  Spacer,
+  Span,
+  Stack,
+  Tag,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { Tooltip } from "../components/ui/tooltip";
 import { AiOutlineDelete } from "react-icons/ai";
-import { MdOutlineCancel, MdOutlineInput, MdOutlineOutput } from "react-icons/md";
-import { MdOutlineSend } from "react-icons/md";
-import { RiSendPlane2Line } from "react-icons/ri";
-import { MdEdit } from "react-icons/md";
-import { classnames } from '../components/utils'
-
-import { useGlobal } from './context'
-import { CopyIcon, ScrollView } from './component'
-import { LazyRenderer } from './MessageRender'
-import { useMessage } from './hooks/useMessage'
-import { dateFormat } from './utils'
-import avatar_black from '../assets/images/OpenAI-black-monoblossom.svg'
-import avatar_white from '../assets/images/OpenAI-white-monoblossom.svg'
-import styles from './style/message.module.less'
+import {
+  MdOutlineInput,
+  MdOutlineOutput,
+  MdEdit
+} from "react-icons/md";
+import { classnames } from "../components/utils";
 
+import { useGlobal } from "./context";
+import { CopyIcon, ScrollView, OPFSImage } from "./component";
+import { LazyRenderer } from "./MessageRender";
+import { useMessage } from "./hooks/useMessage";
+import { dateFormat } from "./utils";
+import avatar_black from "../assets/images/OpenAI-black-monoblossom.svg";
+import avatar_white from "../assets/images/OpenAI-white-monoblossom.svg";
+import styles from "./style/message.module.less";
 import { useTranslation } from "react-i18next";
-
-import { MessageInput } from './MessageInput';
 import { processLaTeX } from "./utils/latex";
-import { MessagesPage } from 'openai/resources/beta/threads/messages.mjs';
-import { IoTimerOutline } from 'react-icons/io5';
-
-
-export function MessageItem(props) {
-  const { content, images, sentTime, role, id, dataTestId, usage, startTime, endTime, toolsUsed } = props
-  const { removeMessage, editMessage, user, options, is } = useGlobal()
-  const { t } = useTranslation();
-  const avatar = options.general.theme === 'dark' ? avatar_white : avatar_black
-
-  //console.log("MessageItem props:", props);
+import { IoTimerOutline } from "react-icons/io5";
 
-  type UsageProps = {
-    usage?: {
-      input_tokens: number;
-      output_tokens: number;
-    };
-    startTime?: number;
-    endTime?: number;
+type UsageProps = {
+  usage?: {
+    input_tokens: number;
+    output_tokens: number;
   };
+  startTime?: number;
+  endTime?: number;
+};
 
-  function Usage(props: UsageProps) {
-    const { usage, startTime, endTime } = props
-    const formatter = new Intl.NumberFormat()
+function Usage(props: UsageProps) {
+  const { usage, startTime, endTime } = props;
+  const formatter = new Intl.NumberFormat();
 
-    if (!usage) {
-      return null
-    }
-    const elapsed = props.startTime && props.endTime ? props.endTime - props.startTime : null
+  if (!usage) {
+    return null;
+  }
+  const elapsed =
+    props.startTime && props.endTime ? props.endTime - props.startTime : null;
 
-    return (
-      <HStack>
-        {elapsed &&
-          <HStack gap="0.2ex">
-            <IoTimerOutline />
-            <Text>{formatter.format(elapsed)}ms</Text>
-          </HStack>
-        }
-        <HStack gap="0.2ex">
-          <MdOutlineInput />
-          <Text>{formatter.format(usage.input_tokens)}t</Text>
-        </HStack>
+  return (
+    <HStack>
+      {elapsed !== null && (
         <HStack gap="0.2ex">
-          <MdOutlineOutput />
-          <Text>{formatter.format(usage.output_tokens)}t</Text>
+          <IoTimerOutline />
+          <Text>{formatter.format(elapsed)}ms</Text>
         </HStack>
-      </HStack >
-    )
+      )}
+      <HStack gap="0.2ex">
+        <MdOutlineInput />
+        <Text>{formatter.format(usage.input_tokens)}t</Text>
+      </HStack>
+      <HStack gap="0.2ex">
+        <MdOutlineOutput />
+        <Text>{formatter.format(usage.output_tokens)}t</Text>
+      </HStack>
+    </HStack>
+  );
+}
+
+function renderToolDetails(tools: Tool[], key: string, t: any) {
+  return (
+    <Accordion.Root>
+      {tools
+        .map((tool, index) => {
+          const info: any = { ...tool };
+          console.log("Tool:", tool);
+          switch ((tool as any).type) {
+            case "mcp_list_tools":
+              info.title = "" + tool.server_label;
+              info.items = (
+                <dl>
+                  {/* @ts-ignore */}
+                  {tool.tools.map((_t) => (
+                    <React.Fragment key={_t.id}>
+                      <dt>{_t.name}</dt>{" "}
+                      <dd>
+                        {_t.description || t("No description available.")}{" "}
+                      </dd>
+                    </React.Fragment>
+                  ))}
+                </dl>
+              );
+              break;
+            case "mcp_call": {
+              let parsedArgs = {};
+              try {
+                parsedArgs = JSON.parse(tool.arguments || "{}");
+              } catch (error) {
+                console.error("Error parsing tool arguments:", error);
+                parsedArgs = {};
+              }
+              info.title = "" + tool.name;
+              info.items = (
+                <VStack alignItems="flex-start">
+                  <Text>
+                    {Object.entries(parsedArgs).map(
+                      ([key, value], index) => (
+                        <React.Fragment key={index}>
+                          <dt>{key}</dt>
+                          <dd>{value as any}</dd>
+                        </React.Fragment>
+                      )
+                    ) || t("No arguments provided.")}
+                  </Text>
+                  <LazyRenderer>
+                    {tool.output ||
+                      t("No additional information available.")}
+                  </LazyRenderer>
+                </VStack>
+              );
+              break;
+            }
+            case "reasoning":
+              info.title = t("Reasoning Step") + " " + (index + 1);
+              info.items = info.summary?.length ? (
+                <ul>
+                  {info.summary.map((item, index) => (
+                    <li key={index}>
+                      {<LazyRenderer>{item.text}</LazyRenderer>}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <Text>{t("No information available.")}</Text>
+              );
+              break;
+            case "web_search_call":
+              info.title = "" + tool.action?.query;
+              info.items = (
+                <VStack alignItems="flex-start">
+                  <Text>{t("Search Results:")}</Text>
+                  <ul>
+                    {tool.action?.sources?.map((result, index) => (
+                      <React.Fragment key={index}>
+                        <li>
+                          <a
+                            href={result.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {result.url}
+                          </a>{" "}
+                        </li>
+                      </React.Fragment>
+                    ))}
+                  </ul>
+                </VStack>
+              );
+              break;
+            case "code_interpreter_call":
+              info.title = t("Code Interpreter Step") + " " + (index + 1);
+              info.items = (
+                <VStack alignItems="flex-start">
+                  <Text>{t("Code")}:</Text>
+                  <LazyRenderer>
+                    {"```python\n" + tool.code + "\n```" ||
+                      t("No additional information available.")}
+                  </LazyRenderer>
+                  <Text>{t("Outputs")}:</Text>
+                  {tool.outputs?.map((output, index) => (
+                    <LazyRenderer key={index}>
+                      {"```json\n" + JSON.stringify(output) + "\n```"}
+                    </LazyRenderer>
+                  ))}
+                </VStack>
+              );
+              break;
+          }
+          return info;
+        })
+        ?.map((tool, index) => (
+          <Accordion.Item
+            key={index}
+            value={tool.id}
+            justifyContent="space-between"
+            padding="2"
+          >
+            <Accordion.ItemTrigger>
+              <Span flex="1">
+                {tool.title ||
+                  tool.action?.query ||
+                  t(key) + " " + (index + 1)}
+              </Span>
+              <Accordion.ItemIndicator />
+            </Accordion.ItemTrigger>
+            <Accordion.ItemContent>
+              <Accordion.ItemBody>
+                {tool.items || t("No additional information available.")}
+              </Accordion.ItemBody>
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        ))}
+    </Accordion.Root>
+  );
+}
+
+function ToolUse(props) {
+  const { toolsUsed } = props;
+  const { t } = useTranslation();
+
+  if (!toolsUsed) {
+    return null;
   }
 
-  function ToolUse(props) {
-    const { toolsUsed } = props
+  const groupedTools = Array.from(
+    Map.groupBy<string, Tool>(toolsUsed, (tool) => tool.type)
+  );
+  console.log("Grouped tools:", groupedTools);
+
+  return (
+    <HStack>
+      {groupedTools.map(([key, tools]) => (
+        <Popover.Root key={key.toString()} size="lg">
+          <Popover.Trigger>
+            <Tooltip content={t(key + "_description")}>
+              <Tag.Root size={"md"}>
+                <Tag.Label>{t(key.toString())}</Tag.Label>
+                <Tag.EndElement alignSelf={"baseline"}>
+                  <Badge colorPalette="green" size={"xs"}>
+                    {tools.length}
+                  </Badge>
+                </Tag.EndElement>
+              </Tag.Root>
+            </Tooltip>
+          </Popover.Trigger>
+          <Popover.Positioner>
+            <Popover.Content width="70vw" height="70vh">
+              <Popover.CloseTrigger />
+              <Popover.Arrow>
+                <Popover.ArrowTip />
+              </Popover.Arrow>
+              <Popover.Body overflowY={"auto"}>
+                <Popover.Title>
+                  <Heading>{t(key + "_title")}</Heading>
+                </Popover.Title>
+                <Popover.Description>
+                  {renderToolDetails(tools, key, t)}
+                </Popover.Description>
+              </Popover.Body>
+            </Popover.Content>
+          </Popover.Positioner>
+        </Popover.Root>
+      ))}
+    </HStack>
+  );
+}
+
+function ImageBlobRenderer({ image, fileName }) {
+  const [src, setSrc] = useState<string | null>(null);
 
-    if (!toolsUsed) {
-      return null;
+  useEffect(() => {
+    if (image.blob) {
+      image.blob.arrayBuffer().then((buffer) => {
+        const base64 = buffer.toString("base64");
+        setSrc(`data:${image.mime_type};base64,${base64}`);
+      });
     }
+  }, [image]);
 
-    const groupedTools = Array.from(Map.groupBy<String, Tool>(toolsUsed, tool => tool.type));
-    console.log("Grouped tools:", groupedTools);
+  if (!src) return <Skeleton className={styles.image} />;
 
-    return (
-      <HStack>
-        {groupedTools.map(([key, tools]) => (
-          <Popover.Root key={key.toString()} size="lg">
-            <Popover.Trigger>
-              <Tooltip content={t(key + "_description")}>
-                <Tag.Root size={'md'}>
-                  <Tag.Label>{t(key.toString())}</Tag.Label>
-                  <Tag.EndElement alignSelf={"baseline"}><Badge colorPalette="green" size={'xs'}>{tools.length}</Badge></Tag.EndElement>
-                </Tag.Root>
-              </Tooltip>
-            </Popover.Trigger>
-            <Popover.Positioner>
-              <Popover.Content width="70vw" height="70vh">
-                <Popover.CloseTrigger />
-                <Popover.Arrow>
-                  <Popover.ArrowTip />
-                </Popover.Arrow>
-                <Popover.Body overflowY={"auto"}>
-                  <Popover.Title><Heading>{t(key + "_title")}</Heading></Popover.Title>
-                  <Popover.Description >
-                    {renderToolDetails(tools, key)}
-                  </Popover.Description>
-                </Popover.Body>
-              </Popover.Content>
-            </Popover.Positioner>
-          </Popover.Root>
-        ))}
-      </HStack>
-    );
+  return (
+    <img
+      src={src}
+      alt={fileName}
+      className={styles.image}
+      data-testid={`generated-image-${fileName}`}
+    />
+  );
+}
 
-    function renderToolDetails(tools: Tool[], key: String) {
-      return <Accordion.Root>
-        {tools
-          .map((tool, index) => {
-            const info = { ...tool };
-            console.log("Tool:", tool);
-            switch (tool.type) {
-              case "mcp_list_tools":
-                info.title = "" + tool.server_label;
-                info.items = (<dl>{tool.tools.map(_t => <><dt key={_t.id}>{_t.name}</dt> <dd>{_t.description || t("No description available.")} </dd></>)}</dl>);
-                break;
-              case "mcp_call":
-                let parsedArgs = {};
-                try {
-                  parsedArgs = JSON.parse(tool.arguments || '{}');
-                } catch (error) {
-                  console.error("Error parsing tool arguments:", error);
-                  parsedArgs = {};
-                }
-                info.title = "" + tool.name;
-                info.items = (
-                  <VStack alignItems="flex-start">
-                    <Text>{Object.entries(parsedArgs).map(([key, value], index) => <React.Fragment key={index}><dt>{key}</dt><dd>{value}</dd></React.Fragment>) || t("No arguments provided.")}</Text>
-                    <LazyRenderer>{tool.output || t("No additional information available.")}</LazyRenderer>
-                  </VStack>
-                );
-                break;
-              case "reasoning":
-                info.title = t("Reasoning Step") + " " + (index + 1);
-                info.items = info.summary?.length ? (<ul>{info.summary.map((item, index) => (<li key={index}>{(<LazyRenderer>{item.text}</LazyRenderer>)}</li>))}</ul>) : (<Text>{t("No information available.")}</Text>);
-                break;
-              case "web_search_call":
-                info.title = "" + tool.action?.query;
-                info.items = (
-                  <VStack alignItems="flex-start">
-                    <Text>{t("Search Results:")}</Text>
-                    <ul>{tool.action?.sources?.map((result, index) => <React.Fragment key={index}><li><a href={result.url} target="_blank" rel="noopener noreferrer">{result.url}</a> </li></React.Fragment>)}</ul>
-                  </VStack>
-                );
-                break;
-              case "code_interpreter_call":
-                info.title = t("Code Interpreter Step") + " " + (index + 1);
-                info.items = (
-                  <VStack alignItems="flex-start">
-                    <Text>{t("Code")}:</Text>
-                    <LazyRenderer>{"```python\n" + tool.code + "\n```" || t("No additional information available.")}</LazyRenderer>
-                    <Text>{t("Outputs")}:</Text>
-                    {tool.outputs?.map((output, index) => <LazyRenderer key={index}>{"```json\n" + JSON.stringify(output) + "\n```"}</LazyRenderer>)}
-                  </VStack>
-                );
-                break;
-            }
-            return info;
-          })
-          ?.map((tool, index) => (
-            <Accordion.Item key={index} value={tool.id} justifyContent="space-between" padding="2">
-              <Accordion.ItemTrigger>
-                <Span flex="1">{tool.title || tool.action?.query || (t(key) + " " + (index + 1))}</Span>
-                <Accordion.ItemIndicator />
-              </Accordion.ItemTrigger>
-              <Accordion.ItemContent>
-                <Accordion.ItemBody>
-                  {tool.items || t("No additional information available.")}
-                </Accordion.ItemBody>
-              </Accordion.ItemContent>
+export function MessageItem(props) {
+  const {
+    content,
+    images,
+    sentTime,
+    role,
+    id,
+    dataTestId,
+    usage,
+    startTime,
+    endTime,
+    toolsUsed,
+  } = props;
+  const { removeMessage, editMessage, user, options, is } = useGlobal();
+  const { t } = useTranslation();
+  const avatar = options.general.theme === "dark" ? avatar_white : avatar_black;
+
+  //console.log("MessageItem props:", props);
 
-            </Accordion.Item>
-          ))}
-      </Accordion.Root>;
-    }
-  }
 
-  let message = ""
-  let image_url = null
+
+
+
+  let message = "";
+  let image_url = null;
+  let image_name = null;
   if (typeof content == "string") {
-    message = processLaTeX(content)
-  }
-  else {
+    message = processLaTeX(content);
+  } else {
     content?.map((item, index) => {
       if (item.type === "input_text") {
-        message += item.text
+        message += item.text;
+      } else if (item.type === "input_image") {
+        image_url = item.image_url;
+        image_name = item.name;
       }
-      else if (item.type === "input_image") {
-        image_url = item.image_url
-      }
-    })
+    });
   }
 
   return (
-    <Card.Root data-testid={dataTestId} className={classnames(styles.message, role === "user" ? styles.user : styles.assistant)} >
-      <Card.Header justifyContent={role === 'user' ? 'flex-end' : 'flex-start'}>
+    <Card.Root
+      data-testid={dataTestId}
+      className={classnames(
+        styles.message,
+        role === "user" ? styles.user : styles.assistant
+      )}
+    >
+      <Card.Header justifyContent={role === "user" ? "flex-end" : "flex-start"}>
         <HStack>
           <Avatar.Root size="sm">
             <Avatar.Fallback name={user?.name} />
-            <Avatar.Image src={role === 'user' ? user?.avatar : avatar} />
+            <Avatar.Image src={role === "user" ? user?.avatar : avatar} />
           </Avatar.Root>
           <Text>{dateFormat(sentTime)}</Text>
           <ToolUse toolsUsed={toolsUsed} />
         </HStack>
       </Card.Header>
       <Card.Body>
-        <LazyRenderer isVisible={is.thinking}>
-          {message}
-        </LazyRenderer>
-        {images && Object.entries(images)?.map(([fileName, image], index) => {
-          if (image.src) {
-            // If image has a src, use it directly
-            return (<img key={fileName} src={image.src} alt={fileName} className={styles.generated_image} />)
-          } else if (image.url) {
-            // create data URL from blob
-            return image.blob.arrayBuffer().then(buffer => {
-              const binary = String.fromCharCode(...new Uint8Array(buffer));
-              const base64 = btoa(binary);
-              const image_url = `data:${image.mime_type};base64,${base64}`;
-              console.log("Image URL:", image_url);
-              return (<img key={fileName} src={image_url} alt={fileName} className={styles.image} />)
-            });
-          }
-          return (
-            <Skeleton key={fileName} className={styles.image} />
-          )
-        })}
-        {image_url && <img src={image_url} alt="image" className={styles.image} />}
+        <LazyRenderer isVisible={is.thinking}>{message}</LazyRenderer>
+        {images &&
+          Object.entries(images)?.map(([fileName, image]: [string, any], index) => {
+            if (image.src) {
+              // If image has a src, use it directly
+              return (
+                <img
+                  key={fileName}
+                  src={image.src}
+                  alt={fileName}
+                  className={styles.generated_image}
+                  data-testid={`generated-image-${fileName}`}
+                />
+              );
+            } else if (image.url?.startsWith("opfs://")) {
+              return (
+                <OPFSImage
+                  key={fileName}
+                  src={image.url}
+                  alt={fileName}
+                  className={styles.generated_image}
+                  data-testid={`generated-image-${fileName}`}
+                />
+              );
+            } else if (image.url && image.blob) {
+              return (
+                <ImageBlobRenderer
+                  key={fileName}
+                  image={image}
+                  fileName={fileName}
+                />
+              );
+            }
+            return <Skeleton key={fileName} className={styles.image} />;
+          })}
+        {image_url &&
+          (image_url.startsWith("opfs://") ? (
+            <OPFSImage
+              src={image_url}
+              alt={image_name || "User content"}
+              className={styles.image}
+              data-testid="included-image"
+            />
+          ) : (
+            <img
+              src={image_url}
+              alt={image_name || "User content"}
+              className={styles.image}
+              data-testid="included-image"
+            />
+          ))}
       </Card.Body>
       <Card.Footer>
         <HStack width={"100%"} justifyContent="space-between">
           <Usage usage={usage} startTime={startTime} endTime={endTime} />
           <Spacer />
           <Tooltip content={t("Remove Message")}>
-            <IconButton minWidth="24px" size="sm" variant="ghost" onClick={() => removeMessage(id)} >
+            <IconButton
+              minWidth="24px"
+              size="sm"
+              variant="ghost"
+              onClick={() => removeMessage(id)}
+            >
               <AiOutlineDelete />
             </IconButton>
           </Tooltip>
-          {
-            role === 'user' ?
-              <React.Fragment>
-                {false && <Icon className={styles.icon} type="reload" />}
-                <IconButton minWidth="24px" size="sm" variant="ghost" onClick={() => editMessage(id)}>
-                  <MdEdit />
-                </IconButton>
-              </React.Fragment>
-              :
-              <CopyIcon value={content} />}
+          {role === "user" ? (
+            <React.Fragment>
+              <IconButton
+                minWidth="24px"
+                size="sm"
+                variant="ghost"
+                onClick={() => editMessage(id)}
+                data-testid="EditMessageBtn"
+              >
+                <MdEdit />
+              </IconButton>
+            </React.Fragment>
+          ) : (
+            <CopyIcon value={content} />
+          )}
         </HStack>
       </Card.Footer>
     </Card.Root>
-  )
+  );
 }
 
 export function MessageContainer() {
-  const { options } = useGlobal()
-  const { message } = useMessage()
-  const { messages = [] } = message || {}
+  const { options } = useGlobal();
+  const { message } = useMessage();
+  const { messages = [] } = message || {};
 
   return (
     <React.Fragment>
       {
         <Stack data-testid="ChatListContainer">
           {messages
-            .filter(message => message.role !== "system")
-            .map((item, index) => <MessageItem key={item.id || item.sentTime} {...item} dataTestId={`ChatMessage-${index}`} />)}
+            .filter((message) => message.role !== "system")
+            .map((item, index) => (
+              <MessageItem
+                key={item.id || item.sentTime}
+                {...item}
+                dataTestId={`ChatMessage-${index}`}
+              />
+            ))}
         </Stack>
       }
     </React.Fragment>
-  )
-
+  );
 }
 
 export function ChatMessage() {
-  const { is, setState } = useGlobal()
-
+  const { is, setState } = useGlobal();
 
   return (
-
     <ScrollView id="chat_list" data-testid="ChatList">
       <MessageContainer />
     </ScrollView>
-
-  )
+  );
 }
-
diff --git a/src/chat/ChatOptions.tsx b/src/chat/ChatOptions.tsx
index 571ef266..8c0941f4 100644
--- a/src/chat/ChatOptions.tsx
+++ b/src/chat/ChatOptions.tsx
@@ -1,41 +1,62 @@
-import React from 'react'
-import { Radio, RadioGroup } from '../components/ui/radio'
-import { Switch } from '../components/ui/switch'
-
-import { useGlobal } from './context'
-import { themeOptions, languageOptions, sendCommandOptions, modelOptions } from './utils/options'
-import { Button, Card, Field, FileUploadFileAcceptDetails, Heading, Input, Stack, createListCollection } from "@chakra-ui/react";
-
-import { Select } from "@chakra-ui/react"
-import { FileUpload } from "@chakra-ui/react"
-import { Slider } from "@chakra-ui/react"
-
-
-import { useOptions } from './hooks'
-import { t } from 'i18next'
-import { initState } from './context/initState'
-import { GlobalState } from './context/types'
-import { Trans } from 'react-i18next'
-import { exportSettings, importSettings } from './utils/settings'
-import { HiUpload } from "react-icons/hi"
+import React from "react";
+import { Radio, RadioGroup } from "../components/ui/radio";
+import { Switch } from "../components/ui/switch";
+
+import { useGlobal } from "./context";
+import {
+  themeOptions,
+  languageOptions,
+  sendCommandOptions,
+  modelOptions,
+} from "./utils/options";
+import {
+  Button,
+  Card,
+  Field,
+  FileUploadFileAcceptDetails,
+  Heading,
+  Input,
+  Stack,
+  createListCollection,
+} from "@chakra-ui/react";
+
+import { Select } from "@chakra-ui/react";
+import { FileUpload } from "@chakra-ui/react";
+import { Slider } from "@chakra-ui/react";
+
+import { useOptions } from "./hooks";
+import { t } from "i18next";
+import { initState } from "./context/initState";
+import { GlobalState } from "./context/types";
+import { Trans } from "react-i18next";
+import { exportSettings, importSettings } from "./utils/settings";
+import { HiUpload } from "react-icons/hi";
 import { toaster } from "../components/ui/toaster";
 
-
 export function ChatOptions() {
-  const { options } = useGlobal()
-  const { openai, general } = options
-  const { setGeneral, setModel } = useOptions()
-  const { setState, setIs, is } = useGlobal()
-
-  const tempMarks = [...Array(11).keys()].map((i) => ({ value: 0.2 * i, label: (0.2 * i).toFixed(1) }));
-  const topPMarks = [...Array(11).keys()].map((i) => ({ value: 0.1 * i, label: (0.1 * i).toFixed(1) }));
-  const tokenMarks = [...Array(4).keys()].map((i) => ({ value: 1024 * 2 ** i, label: (1024 * 2 ** i).toString() }));
+  const { options } = useGlobal();
+  const { openai, general } = options;
+  const { setGeneral, setModel } = useOptions();
+  const { setState, setIs, is } = useGlobal();
+
+  const tempMarks = [...new Array(11).keys()].map((i) => ({
+    value: 0.2 * i,
+    label: (0.2 * i).toFixed(1),
+  }));
+  const topPMarks = [...new Array(11).keys()].map((i) => ({
+    value: 0.1 * i,
+    label: (0.1 * i).toFixed(1),
+  }));
+  const tokenMarks = [...new Array(4).keys()].map((i) => ({
+    value: 1024 * 2 ** i,
+    label: (1024 * 2 ** i).toString(),
+  }));
 
   return (
     <Card.Root w="100%">
       <Card.Header paddingBlockEnd={2} data-testid="SettingsHeader">
         <Card.Title>{t("chat_settings")}</Card.Title>
-      </Card.Header >
+      </Card.Header>
       <Card.Body overflowY={"auto"}>
         <Stack gap="4">
           <Heading size="md">{t("import_export")}</Heading>
@@ -44,15 +65,21 @@ export function ChatOptions() {
           <Stack direction={{ base: "column", md: "row" }}>
             <Field.Root>
               <Field.Label>{t("export_settings")}</Field.Label>
-              <Button variant="outline" colorPalette="blue" onClick={exportSettings}>{t("export")}</Button>
+              <Button
+                variant="outline"
+                colorPalette="blue"
+                onClick={exportSettings}
+              >
+                {t("export")}
+              </Button>
               <Field.HelperText>{t("export_settings_help")}</Field.HelperText>
             </Field.Root>
 
             <Field.Root>
               <Field.Label>{t("import_settings")}</Field.Label>
 
-
-              <FileUpload.Root accept={["application/json"]}
+              <FileUpload.Root
+                accept={["application/json"]}
                 onFileAccept={(details: FileUploadFileAcceptDetails) => {
                   if (details.files.length > 0) {
                     const file = details.files[0];
@@ -65,19 +92,21 @@ export function ChatOptions() {
                           description: t("import_settings_success_desc"),
                           duration: 5000,
                           type: "success",
-                        })
+                        });
                       })
                       .catch((error) => {
-                        console.error('Error importing settings:', error);
+                        console.error("Error importing settings:", error);
                         toaster.create({
                           title: t("import_settings_error"),
-                          description: error.message || t("import_settings_error_desc"),
+                          description:
+                            error.message || t("import_settings_error_desc"),
                           duration: 5000,
                           type: "error",
-                        })
-                      })
+                        });
+                      });
                   }
-                }}>
+                }}
+              >
                 <FileUpload.HiddenInput />
                 <FileUpload.Trigger asChild>
                   <Button variant="outline" size="sm">
@@ -104,16 +133,20 @@ export function ChatOptions() {
             </Field.Root>
           </Stack>
 
-
           <Heading size="md">{t("general")}</Heading>
 
           <Field.Root mt="4">
             <Field.Label>{t("theme_style")}</Field.Label>
-            <RadioGroup data-testid="OptionDarkModeSelect" value={general.theme}
-              onValueChange={(ev) => setGeneral({ theme: ev.value })}>
+            <RadioGroup
+              data-testid="OptionDarkModeSelect"
+              value={general.theme}
+              onValueChange={(ev) => setGeneral({ theme: ev.value })}
+            >
               <Stack direction="row">
                 {themeOptions.map((item) => (
-                  <Radio key={item.value} value={item.value}>{item.label}</Radio>
+                  <Radio key={item.value} value={item.value}>
+                    {item.label}
+                  </Radio>
                 ))}
               </Stack>
             </RadioGroup>
@@ -122,10 +155,15 @@ export function ChatOptions() {
 
           <Field.Root mt="4">
             <Field.Label>{t("send")}</Field.Label>
-            <RadioGroup value={general.sendCommand} onValueChange={(ev) => setGeneral({ sendCommand: ev.value })}>
+            <RadioGroup
+              value={general.sendCommand}
+              onValueChange={(ev) => setGeneral({ sendCommand: ev.value })}
+            >
               <Stack direction="row">
                 {sendCommandOptions.map((item) => (
-                  <Radio key={item.value} value={item.value}>{item.label}</Radio>
+                  <Radio key={item.value} value={item.value}>
+                    {item.label}
+                  </Radio>
                 ))}
               </Stack>
             </RadioGroup>
@@ -133,8 +171,12 @@ export function ChatOptions() {
           </Field.Root>
 
           <Field.Root mt="4">
-
-            <Select.Root collection={createListCollection({ items: languageOptions })} maxWidth="30em" onValueChange={val => setGeneral({ language: val.value })} data-testid="SetLanguageSelect">
+            <Select.Root
+              collection={createListCollection({ items: languageOptions })}
+              maxWidth="30em"
+              onValueChange={(val) => setGeneral({ language: val.value })}
+              data-testid="SetLanguageSelect"
+            >
               <Select.Label>{t("language")}</Select.Label>
               <Select.Trigger>
                 <Select.ValueText placeholder={general.language} />
@@ -166,24 +208,39 @@ export function ChatOptions() {
             </SelectRoot>
 
             <Field.HelperText>{t("fontsize_help")}</Field.HelperText>
-          </Field.Root> */ }
+          </Field.Root> */}
 
           <Field.Root mt="4">
-
-            <Switch id="gravatar" checked={general.gravatar} onChange={(value) => {
-              console.log("onChange: ", value.target.checked);
-              setGeneral({ ...options.general, gravatar: value.target.checked });
-            }}>{t("gravatar")}</Switch>
-
-            <Field.HelperText><Trans t={t}>help_gravatar</Trans></Field.HelperText>
+            <Switch
+              id="gravatar"
+              checked={general.gravatar}
+              onChange={(value) => {
+                console.log("onChange: ", value.target.checked);
+                setGeneral({
+                  ...options.general,
+                  gravatar: value.target.checked,
+                });
+              }}
+            >
+              {t("gravatar")}
+            </Switch>
+
+            <Field.HelperText>
+              <Trans t={t}>help_gravatar</Trans>
+            </Field.HelperText>
           </Field.Root>
 
-
-          <Heading size="md" paddingBlockStart="2em">{t("Global OpenAI Config")}</Heading>
+          <Heading size="md" paddingBlockStart="2em">
+            {t("Global OpenAI Config")}
+          </Heading>
 
           <Field.Root mt="4">
-            <Select.Root collection={createListCollection({ items: modelOptions })} maxWidth="30em" onValueChange={val => setModel({ model: val.value[0] })}
-              data-testid="ChangeAIModelSelect">
+            <Select.Root
+              collection={createListCollection({ items: modelOptions })}
+              maxWidth="30em"
+              onValueChange={(val) => setModel({ model: val.value[0] })}
+              data-testid="ChangeAIModelSelect"
+            >
               <Select.Label>{t("openai_model_help")}</Select.Label>
               <Select.Trigger>
                 <Select.ValueText placeholder={openai.model} />
@@ -200,9 +257,17 @@ export function ChatOptions() {
           </Field.Root>
 
           <Field.Root mt="4">
-            <Slider.Root colorPalette="blue"
-              size="md" width="60ex" min={0} max={8192} step={256} value={[openai.max_tokens]}
-              onValueChange={ev => setModel({ max_tokens: ev.value[0] })} data-testid="MaxTokensInput">
+            <Slider.Root
+              colorPalette="blue"
+              size="md"
+              width="60ex"
+              min={0}
+              max={8192}
+              step={256}
+              value={[openai.max_tokens]}
+              onValueChange={(ev) => setModel({ max_tokens: ev.value[0] })}
+              data-testid="MaxTokensInput"
+            >
               <Slider.Label>{t("max_tokens")}</Slider.Label>
               <Slider.Control>
                 <Slider.Track>
@@ -219,7 +284,17 @@ export function ChatOptions() {
           </Field.Root>
 
           <Field.Root mt="4">
-            <Slider.Root colorPalette="blue" size="md" width="60ex" min={0} max={2} step={0.01} value={[openai.temperature]} onValueChange={ev => setModel({ temperature: ev.value[0] })} data-testid="SetTemperatureInput">
+            <Slider.Root
+              colorPalette="blue"
+              size="md"
+              width="60ex"
+              min={0}
+              max={2}
+              step={0.01}
+              value={[openai.temperature]}
+              onValueChange={(ev) => setModel({ temperature: ev.value[0] })}
+              data-testid="SetTemperatureInput"
+            >
               <Slider.Label>{t("temperature")}</Slider.Label>
               <Slider.Control>
                 <Slider.Track>
@@ -236,7 +311,17 @@ export function ChatOptions() {
           </Field.Root>
 
           <Field.Root mt="4">
-            <Slider.Root colorPalette="blue" size="md" width="60ex" min={0} max={1} step={0.01} value={[openai.top_p]} onValueChange={ev => setModel({ top_p: ev.value[0] })} data-testid="SetTopPInput">
+            <Slider.Root
+              colorPalette="blue"
+              size="md"
+              width="60ex"
+              min={0}
+              max={1}
+              step={0.01}
+              value={[openai.top_p]}
+              onValueChange={(ev) => setModel({ top_p: ev.value[0] })}
+              data-testid="SetTopPInput"
+            >
               <Slider.Label>{t("top_p")}</Slider.Label>
               <Slider.Control>
                 <Slider.Track>
@@ -252,33 +337,69 @@ export function ChatOptions() {
             <Field.HelperText>{t("top_p_help")}</Field.HelperText>
           </Field.Root>
 
-          <Heading size="md" desc={t("custom_endpoint_desc")} paddingBlockStart="2em">{t("Custom API Endpoint")}</Heading>
+          <Heading
+            size="md"
+            desc={t("custom_endpoint_desc")}
+            paddingBlockStart="2em"
+          >
+            {t("Custom API Endpoint")}
+          </Heading>
 
           <Field.Root mt="4">
             <Field.Label>{t("api_base_url")}</Field.Label>
-            <Input width="60ex" value={openai.baseUrl} placeholder="Api Base Url" onChange={ev => setModel({ baseUrl: ev.target.value })} data-testid="ApiBaseURLInput" />
+            <Input
+              width="60ex"
+              value={openai.baseUrl}
+              placeholder="Api Base Url"
+              onChange={(ev) => setModel({ baseUrl: ev.target.value })}
+              data-testid="ApiBaseURLInput"
+            />
             <Field.HelperText>{t("api_base_url_help")}</Field.HelperText>
           </Field.Root>
 
           <Field.Root mt="4">
             <Field.Label>{t("api_key")}</Field.Label>
-            <Input width="60ex" value={openai.apiKey} onChange={ev => setModel({ apiKey: ev.target.value })} type="password" data-testid="APIKeyInput" />
+            <Input
+              width="60ex"
+              value={openai.apiKey}
+              onChange={(ev) => setModel({ apiKey: ev.target.value })}
+              type="password"
+              data-testid="APIKeyInput"
+            />
             <Field.HelperText>{t("api_key_help")}</Field.HelperText>
           </Field.Root>
 
           <Field.Root mt="4">
             <Field.Label>{t("organization_id")}</Field.Label>
-            <Input width="60ex" value={openai.organizationId} placeholder="OpenAI Organization ID" onChange={ev => setModel({ organizationId: ev.target.value })} data-testid="APIOrganisationIDInput" />
+            <Input
+              width="60ex"
+              value={openai.organizationId}
+              placeholder="OpenAI Organization ID"
+              onChange={(ev) => setModel({ organizationId: ev.target.value })}
+              data-testid="APIOrganisationIDInput"
+            />
             <Field.HelperText>{t("organization_id_help")}</Field.HelperText>
           </Field.Root>
-
         </Stack>
       </Card.Body>
 
       <Card.Footer paddingBlockStart={2}>
-        <Button variant="outline" colorPalette="red" onClick={() => setState(initState)} data-testid="SettingsRefreshBtn">{t("Reset")}</Button>
-        <Button type="primary" onClick={() => setIs({ config: !is.config })} data-testid="SettingsCloseBtn">{t("Close")}</Button>
+        <Button
+          variant="outline"
+          colorPalette="red"
+          onClick={() => setState(initState)}
+          data-testid="SettingsRefreshBtn"
+        >
+          {t("Reset")}
+        </Button>
+        <Button
+          type="primary"
+          onClick={() => setIs({ config: !is.config })}
+          data-testid="SettingsCloseBtn"
+        >
+          {t("Close")}
+        </Button>
       </Card.Footer>
-    </Card.Root >
-  )
+    </Card.Root>
+  );
 }
diff --git a/src/chat/ChatSideBar.tsx b/src/chat/ChatSideBar.tsx
index ec29a38e..c8a513b5 100644
--- a/src/chat/ChatSideBar.tsx
+++ b/src/chat/ChatSideBar.tsx
@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import { Icon, Panel } from '../components'
-import { Tooltip } from "../components/ui/tooltip"
+import React, { useEffect, useState } from "react";
+import { Tooltip } from "../components/ui/tooltip";
 
 import {
   DialogBody,
@@ -11,9 +10,15 @@ import {
   DialogRoot,
   DialogTitle,
   DialogTrigger,
-} from "../components/ui/dialog"
-import { Avatar, Box, Button, Heading, IconButton, Link, Spacer, Stack, Text, VStack } from "@chakra-ui/react"
-import { IoHelpCircleOutline } from "react-icons/io5";
+} from "../components/ui/dialog";
+import {
+  Button,
+  IconButton,
+  Link,
+  Spacer,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
 import { IoInformationCircleOutline } from "react-icons/io5";
 import { IoSettingsOutline } from "react-icons/io5";
 import { IoApps } from "react-icons/io5";
@@ -22,46 +27,53 @@ import { MdOutlineDarkMode } from "react-icons/md";
 import { MdOutlineLightMode } from "react-icons/md";
 import { TbArrowsMinimize } from "react-icons/tb";
 import { TbArrowsMaximize } from "react-icons/tb";
-import { useGlobal } from './context'
-import { classnames } from '../components/utils'
-import { useOptions } from './hooks'
-import { t } from 'i18next'
-import Markdown from 'react-markdown'
-import remarkMath from 'remark-math'
-import smartypants from 'remark-smartypants'
-import remarkGfm from 'remark-gfm'
-import rehypeKatex from 'rehype-katex'
-
-import styles from './style/sider.module.less'
-import 'katex/dist/katex.min.css'
-import semver from 'semver'
-
+import { useGlobal } from "./context";
+import { classnames } from "../components/utils";
+import { useOptions } from "./hooks";
+import { t } from "i18next";
+import Markdown from "react-markdown";
+import remarkMath from "remark-math";
+import smartypants from "remark-smartypants";
+import remarkGfm from "remark-gfm";
+import rehypeKatex from "rehype-katex";
+
+import styles from "./style/sider.module.less";
+import "katex/dist/katex.min.css";
+import semver from "semver";
 
 const ICONS = {
-  "help": IoInformationCircleOutline,
-  "apps": IoApps,
-  "history": RiChatHistoryLine,
-  "config": IoSettingsOutline,
-  "dark": MdOutlineDarkMode,
-  "light": MdOutlineLightMode,
+  help: IoInformationCircleOutline,
+  apps: IoApps,
+  history: RiChatHistoryLine,
+  config: IoSettingsOutline,
+  dark: MdOutlineDarkMode,
+  light: MdOutlineLightMode,
   "min-screen": TbArrowsMinimize,
-  "full-screen": TbArrowsMaximize
-}
+  "full-screen": TbArrowsMaximize,
+};
 
 const Option = (props) => {
-
-  const { type, onClick, tooltip, dataTestId } = props
-  let testId = dataTestId ? { 'data-testid': dataTestId } : {}
+  const { type, onClick, tooltip, dataTestId } = props;
+  const testId = dataTestId ? { "data-testid": dataTestId } : {};
   if (!ICONS[type]) {
-    console.error(`Icon ${type} not found`)
-    return null
+    console.error(`Icon ${type} not found`);
+    return null;
   }
   return (
-    <Tooltip content={tooltip}><IconButton aria-label={tooltip} variant={props.variant || "ghost"} onClick={onClick} {...testId} >{ICONS[type]()}</IconButton></Tooltip>
-  )
-}
-
-let text = `
+    <Tooltip content={tooltip}>
+      <IconButton
+        aria-label={tooltip}
+        variant={props.variant || "ghost"}
+        onClick={onClick}
+        {...testId}
+      >
+        {ICONS[type]()}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+const text = `
 ## Datenschutzhinweise
 
 Diese Anwendung ermöglicht den Zugriff auf die Chat-Funktion von
@@ -111,119 +123,145 @@ Der Quellcode der Anwendung ist auf GitHub in folgenden Repositories verfügbar:
 
 - Chat-Client: [github.com/fhswf/openai-ui](https://github.com/fhswf/openai-ui)
 - Proxy-Server: [github.com/fhswf/openai-proxy](https://github.com/fhswf/openai-proxy)
-`
-
+`;
 
 export function ChatSideBar() {
-
-  const [open, setOpen] = useState(false)
-  const [metadata, setMetadata] = useState({})
-  const [newRelease, setNewRelease] = useState(false)
-  const { is, setIs, setState, options, user, version, release } = useGlobal()
-  const { setGeneral, setAccount } = useOptions()
-
+  const [open, setOpen] = useState(false);
+  const [metadata, setMetadata] = useState({});
+  const [newRelease, setNewRelease] = useState(false);
+  const { is, setState, options, version, release } = useGlobal();
+  const { setGeneral, setAccount } = useOptions();
 
   const acceptTerms = () => {
-    setAccount({ terms: true })
-    setOpen(false)
-  }
-
-
-
-  const toggleHistory = () => {
-    if (!is.apps) {
-      setIs({ sidebar: !is.sidebar })
-
-    }
-    else {
-      setIs({ apps: false, sidebar: true })
-    }
-  }
-
-  const toggleApps = () => {
-    if (is.apps) {
-      setIs({ sidebar: !is.sidebar })
-
-    }
-    else {
-      setIs({ apps: true, sidebar: true })
-    }
-  }
+    setAccount({ terms: true });
+    setOpen(false);
+  };
 
   useEffect(() => {
-    fetch("/metadata.json")
+    fetch("/metadata.json", { cache: "no-cache" })
       .then((response) => response.json())
       .then((data) => {
-        console.log(data)
-        setMetadata(data)
+        console.log(data);
+        setMetadata(data);
         if (semver.gt(data.release, version) || !release) {
-          console.log('New release: %s', data.release)
-          setNewRelease(true)
-          setState({ version: data.release })
+          console.log("New release: %s", data.release);
+          setNewRelease(true);
+          setState({ version: data.release });
           fetch(`${data.repo_url}/releases/tags/v${data.release}`)
             .then((response) => response.json())
             .then((data) => {
-              console.log("release data: %j", data)
-              setState({ release: data })
+              console.log("release data: %j", data);
+              setState({ release: data });
             })
             .catch((error) => {
-              console.error("Error fetching release data: %s", error)
-            })
+              console.error("Error fetching release data: %s", error);
+            });
         }
       });
   }, [version]);
 
   return (
-    <VStack role="toolbar"
+    <VStack
+      role="toolbar"
       as="aside"
       hideBelow={is.toolbar ? "base" : "md"}
-      className={classnames(styles.sider, 'flex-c-sb flex-column')}
-      data-testid="LeftSideBar">
-
-      <div className={classnames(styles.tool, 'flex-c-sb flex-column')} data-testid="BottomLeftSideBar">
-        <Option type={options.general.theme}
-          onClick={() => setGeneral({ theme: options.general.theme === 'light' ? 'dark' : 'light' })}
+      className={classnames(styles.sider, "flex-c-sb flex-column")}
+      data-testid="LeftSideBar"
+    >
+      <div
+        className={classnames(styles.tool, "flex-c-sb flex-column")}
+        data-testid="BottomLeftSideBar"
+      >
+        <Option
+          type={options.general.theme}
+          onClick={() =>
+            setGeneral({
+              theme: options.general.theme === "light" ? "dark" : "light",
+            })
+          }
           tooltip={t("Theme")}
-          dataTestId="OptionDarkModeSelect" />
-        <Option dataTestId="OpenConfigBtn" type="config" onClick={() => setState({ is: { ...is, config: !is.config } })} tooltip={t("Config")} />
-        <Option type={`${is.fullScreen ? 'min' : 'full'}-screen`} onClick={() => setState({ is: { ...is, fullScreen: !is.fullScreen } })}
-          tooltip={`${is.fullScreen ? t('Minimize') : t('Maximize')}`} />
+          dataTestId="OptionDarkModeSelect"
+        />
+        <Option
+          dataTestId="OpenConfigBtn"
+          type="config"
+          onClick={() => setState({ is: { ...is, config: !is.config } })}
+          tooltip={t("Config")}
+        />
+        <Option
+          type={`${is.fullScreen ? "min" : "full"}-screen`}
+          onClick={() =>
+            setState({ is: { ...is, fullScreen: !is.fullScreen } })
+          }
+          tooltip={`${is.fullScreen ? t("Minimize") : t("Maximize")}`}
+        />
       </div>
       <Spacer />
-      <div className={classnames(styles.tool, 'flex-c-sb flex-column')}>
-        <DialogRoot open={!options.account.terms || open}
-          onOpenChange={(e) => setOpen(e.open)} size="lg">
+      <div className={classnames(styles.tool, "flex-c-sb flex-column")}>
+        <DialogRoot
+          open={!options.account.terms || open}
+          onOpenChange={(e) => setOpen(e.open)}
+          size="lg"
+        >
           <DialogTrigger asChild>
-            <IconButton aria-label={t("about")} variant="ghost" data-testid="aboutBtn">
-              <Tooltip content={t("about")}>
-                {ICONS["help"]()}
-              </Tooltip>
+            <IconButton
+              aria-label={t("about")}
+              variant="ghost"
+              data-testid="aboutBtn"
+            >
+              <Tooltip content={t("about")}>{ICONS["help"]()}</Tooltip>
             </IconButton>
           </DialogTrigger>
           <DialogContent data-testid="InformationWindow">
             <DialogHeader>
-              <DialogTitle>{t('About')}</DialogTitle>
+              <DialogTitle>{t("About")}</DialogTitle>
               {options.account.terms ? <DialogCloseTrigger /> : null}
             </DialogHeader>
             <DialogBody className="z-ui-markdown">
-              {metadata.release ? (<Text>Version: <Link target="blank" href={"https://github.com/fhswf/openai-ui/releases/tag/v" + metadata?.release}>{metadata?.release}</Link> (
-                <Link target="blank" href={"https://github.com/fhswf/openai-ui/commit/" + metadata?.build_sha}>commit {String(metadata?.build_sha).substring(0, 7)}</Link>)</Text>) : null}
+              {metadata.release ? (
+                <Text>
+                  Version:{" "}
+                  <Link
+                    target="blank"
+                    href={
+                      "https://github.com/fhswf/openai-ui/releases/tag/v" +
+                      metadata?.release
+                    }
+                  >
+                    {metadata?.release}
+                  </Link>{" "}
+                  (
+                  <Link
+                    target="blank"
+                    href={
+                      "https://github.com/fhswf/openai-ui/commit/" +
+                      metadata?.build_sha
+                    }
+                  >
+                    commit {String(metadata?.build_sha).substring(0, 7)}
+                  </Link>
+                  )
+                </Text>
+              ) : null}
               <Markdown
                 remarkPlugins={[remarkGfm, remarkMath, smartypants]}
                 rehypePlugins={[rehypeKatex]}
               >
-                {(text)}
+                {text}
               </Markdown>
             </DialogBody>
             <DialogFooter>
-              <Button type="primary" onClick={acceptTerms} data-testid="accept-terms-btn">{t("Accept Terms")}</Button>
+              <Button
+                type="primary"
+                onClick={acceptTerms}
+                data-testid="accept-terms-btn"
+              >
+                {t("Accept Terms")}
+              </Button>
             </DialogFooter>
           </DialogContent>
         </DialogRoot>
-
       </div>
     </VStack>
-  )
-
-
+  );
 }
diff --git a/src/chat/Config.tsx b/src/chat/Config.tsx
index 0b3052e2..26bf8839 100644
--- a/src/chat/Config.tsx
+++ b/src/chat/Config.tsx
@@ -4,9 +4,8 @@ import { ChatOptions } from "./ChatOptions";
 
 /** Main Config component */
 export const Config = () => {
-    const { currentEditor } = useGlobal();
+  const { currentEditor } = useGlobal();
 
-    console.log("Current Editor:", currentEditor);
-    return <ChatOptions />
-
-};
\ No newline at end of file
+  console.log("Current Editor:", currentEditor);
+  return <ChatOptions />;
+};
diff --git a/src/chat/ConfigInfo.jsx b/src/chat/ConfigInfo.jsx
deleted file mode 100644
index ea6a35a6..00000000
--- a/src/chat/ConfigInfo.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import styles from './style/chat.module.less'
-import { useGlobal } from './context'
-
-export function ConfigInfo() {
-  const { options } = useGlobal()
-  const { max_tokens, apiKey, temperature, baseUrl, organizationId, top_p, model } = options?.openai || {}
-  return (
-    <div className={styles.info}>
-      <div>model:{model}</div>
-      <div>maxTokens:{max_tokens}</div>
-      <div>temperature:{temperature}</div>
-      <div>top_p:{top_p}</div>
-    </div>
-  )
-}
diff --git a/src/chat/DashboardChart.tsx b/src/chat/DashboardChart.tsx
index 6418950a..31ffab56 100644
--- a/src/chat/DashboardChart.tsx
+++ b/src/chat/DashboardChart.tsx
@@ -1,6 +1,20 @@
 import React, { useEffect, useState, useRef } from "react";
 
-import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Sector, Cell } from 'recharts';
+import {
+  BarChart,
+  Bar,
+  Rectangle,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Sector,
+  Cell,
+} from "recharts";
 
 import { t } from "i18next";
 import { useTranslation } from "react-i18next";
@@ -8,323 +22,339 @@ import { Skeleton, Tabs } from "@chakra-ui/react";
 import styles from "./style/dashboard.module.less";
 import { getStackGroupsByAxisId } from "recharts/types/util/ChartUtils";
 
-
 const DashboardChart = () => {
-    const [data, setData] = useState(null);
-    const [loading, setLoading] = useState(true);
-
-    const { t } = useTranslation();
-    const chartRef = useRef(null);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const { t } = useTranslation();
+  const chartRef = useRef(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(import.meta.env.VITE_DASHBOARD_URL);
+        const result = await response.json();
+        setData(result);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
 
-    useEffect(() => {
-        const fetchData = async () => {
-            try {
-                const response = await fetch(import.meta.env.VITE_DASHBOARD_URL);
-                const result = await response.json();
-                setData(result);
-            } catch (error) {
-                console.error("Error fetching data:", error);
-            } finally {
-                setLoading(false);
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return <Skeleton />;
+  }
+
+  const totalCounts = [];
+  const scopeData = {};
+  const roleData = {};
+  const labels = [];
+
+  // Daten verarbeiten
+  data[0].byScope.forEach((yearData) => {
+    let monthTotal = 0;
+    yearData.months
+      .sort((a, b) => a.month - b.month)
+      .forEach((month) => {
+        labels.push(`${month.month}/${yearData._id}`);
+        monthTotal = 0;
+
+        month.scopes.forEach((scopes) => {
+          if (scopes.scope === "fh-swf.de") {
+            totalCounts.push(scopes.count);
+          }
+
+          // Schlüsseln nach der gewünschten Form
+          const match =
+            scopes.scope.endsWith(".fh-swf.de") &&
+            scopes.scope.split(".").length === 3
+              ? scopes.scope.split(".")[0]
+              : null;
+          console.log("match: ", match);
+          if (match) {
+            if (!scopeData[match]) {
+              scopeData[match] = 0;
             }
-        };
-
-        fetchData();
-    }, []);
-
-    if (loading) {
-        return <Skeleton />;
-    }
-
-    const totalCounts = [];
-    const scopeData = {};
-    const roleData = {};
-    const labels = [];
-
-    // Daten verarbeiten
-    data[0]
-        .byScope
-        .forEach(yearData => {
-            let monthTotal = 0;
-            yearData.months
-                .sort((a, b) => a.month - b.month)
-                .forEach(month => {
-                    labels.push(`${month.month}/${yearData._id}`);
-                    monthTotal = 0;
-
-                    month.scopes.forEach(scopes => {
-                        if (scopes.scope === "fh-swf.de") {
-                            totalCounts.push(scopes.count);
-                        }
-
-                        // Schlüsseln nach der gewünschten Form
-                        const match = scopes.scope.endsWith(".fh-swf.de") && scopes.scope.split(".").length === 3 ? scopes.scope.split(".")[0] : null;
-                        console.log("match: ", match);
-                        if (match) {
-                            if (!scopeData[match]) {
-                                scopeData[match] = 0;
-                            }
-                            scopeData[match] += scopes.count;
-                        }
-                    });
-                });
+            scopeData[match] += scopes.count;
+          }
         });
-    data[0]
-        .byRole
-        .forEach(yearData => {
-            let monthTotal = 0;
-            yearData.months
-                .sort((a, b) => a.month - b.month)
-                .forEach(month => {
-                    monthTotal = 0;
-
-                    month.roles.forEach(roles => {
-                        if (!roleData[roles.role]) {
-                            roleData[roles.role] = 0;
-                        }
-                        roleData[roles.role] += roles.count;
-                    });
-
-                });
+      });
+  });
+  data[0].byRole.forEach((yearData) => {
+    let monthTotal = 0;
+    yearData.months
+      .sort((a, b) => a.month - b.month)
+      .forEach((month) => {
+        monthTotal = 0;
+
+        month.roles.forEach((roles) => {
+          if (!roleData[roles.role]) {
+            roleData[roles.role] = 0;
+          }
+          roleData[roles.role] += roles.count;
         });
-
-    console.log("roleData: ", roleData);
-    console.log("scopeData: ", scopeData);
-
-    const lineChartData = {
-        labels,
-        datasets: [{
-            label: 'Gesamtzahl der Aufrufe (fh-swf.de)',
-            data: totalCounts,
-            fill: false,
-            borderColor: 'rgba(30, 136, 229, 0.8)',
-            backgroundColor: 'rgba(30, 136, 229, 0.6)',
-        }]
-    };
-
-    const NAMES = {
-        "fb-in": ["I&N", "FB Informatik & Naturwissenschaften"],
-        "ifv": ["IfV", "Institut für Verbundstudien"],
-        "fb-iw": ["IW", "FB Ingenieur- und Wirtschaftswissenschaften"],
-        "fb-tbw": ["TBW", "FB Technische Betriebswirtschaft"],
-        "fb-m": ["M", "FB Maschinenbau"],
-        "fb-ei": ["EI", "FB Elektrotechnik und Informationstechnik"],
-        "fb-aw": ["AW", "FB Agrarwissenschaften"],
-        "fb-bg": ["BG", "FB Bildungs- und Gesellschaftswissenschaften"],
-        "fb-eet": ["EET", "FB Elektrische Energietechnik"],
-        "fb-ma": ["MA", "FB Maschinenbau-Automatisierungstechnik"],
-        "hv": ["HV", "Hochschulverwaltung"],
-        "rektor": ["Rektorat", "Rektorat"],
+      });
+  });
+
+  console.log("roleData: ", roleData);
+  console.log("scopeData: ", scopeData);
+
+  const lineChartData = {
+    labels,
+    datasets: [
+      {
+        label: "Gesamtzahl der Aufrufe (fh-swf.de)",
+        data: totalCounts,
+        fill: false,
+        borderColor: "rgba(30, 136, 229, 0.8)",
+        backgroundColor: "rgba(30, 136, 229, 0.6)",
+      },
+    ],
+  };
+
+  const NAMES = {
+    "fb-in": ["I&N", "FB Informatik & Naturwissenschaften"],
+    ifv: ["IfV", "Institut für Verbundstudien"],
+    "fb-iw": ["IW", "FB Ingenieur- und Wirtschaftswissenschaften"],
+    "fb-tbw": ["TBW", "FB Technische Betriebswirtschaft"],
+    "fb-m": ["M", "FB Maschinenbau"],
+    "fb-ei": ["EI", "FB Elektrotechnik und Informationstechnik"],
+    "fb-aw": ["AW", "FB Agrarwissenschaften"],
+    "fb-bg": ["BG", "FB Bildungs- und Gesellschaftswissenschaften"],
+    "fb-eet": ["EET", "FB Elektrische Energietechnik"],
+    "fb-ma": ["MA", "FB Maschinenbau-Automatisierungstechnik"],
+    hv: ["HV", "Hochschulverwaltung"],
+    rektor: ["Rektorat", "Rektorat"],
+  };
+
+  const getName = (match: string) => {
+    const name = match;
+    if (name in NAMES) {
+      return NAMES[name];
     }
-
-    const getName = (match: string) => {
-        const name = match;
-        if (name in NAMES) {
-            return NAMES[name];
-        }
-        const parts = name.split("-");
-        if (parts.length > 1) {
-            return [parts.map(part => part.charAt(0).toUpperCase() + part.slice(1)).join(" "), match];
-        }
-        return [name.charAt(0).toUpperCase() + name.slice(1), match];
+    const parts = name.split("-");
+    if (parts.length > 1) {
+      return [
+        parts
+          .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+          .join(" "),
+        match,
+      ];
     }
-
-    const getRoleName = (role: string) => {
-        switch (role) {
-            case "student":
-                return t("Student*in");
-            case "faculty":
-                return t("Professor*in");
-            case "staff":
-                return t("Mitarbeiter*in");
-            default:
-                return role;
-        }
+    return [name.charAt(0).toUpperCase() + name.slice(1), match];
+  };
+
+  const getRoleName = (role: string) => {
+    switch (role) {
+      case "student":
+        return t("Student*in");
+      case "faculty":
+        return t("Professor*in");
+      case "staff":
+        return t("Mitarbeiter*in");
+      default:
+        return role;
     }
-
-    const COLORS = [
-        'rgba(255, 87, 34, 0.8)',
-        'rgba(33, 150, 243, 0.8)',
-        'rgba(76, 175, 80, 0.8)',
-        'rgba(255, 193, 7, 0.8)',
-        'rgba(156, 39, 176, 0.8)',
-        'rgba(233, 30, 99, 0.8)',
-        'rgba(0, 188, 212, 0.8)',
-        'rgba(255, 152, 0, 0.8)',
-        'rgba(96, 125, 139, 0.8)',
-        'rgba(255, 235, 59, 0.8)',
-        'rgba(0, 150, 136, 0.8)',
-        'rgba(158, 158, 158, 0.8)',
-        'rgba(240, 98, 146, 0.8)',
-        'rgba(48, 63, 159, 0.8)',
-        'rgba(30, 136, 229, 0.8)',
-        'rgb(166,206,227)',
-        'rgb(31,120,180)',
-        'rgb(178,223,138)',
-        'rgb(51,160,44)',
-        'rgb(251,154,153)',
-        'rgb(227,26,28)',
-        'rgb(253,191,111)',
-        'rgb(255,127,0)',
-        'rgb(202,178,214)',
-        'rgb(106,61,154)',
-        'rgb(255,255,153)',
-        'rgb(177,89,40)',
-
-    ];
-
-    const totalAffiliationsCount: number = Object.values(scopeData).reduce((sum: number, count: number) => sum + count, 0) as number;
-
-    const scopeChartData = Object.keys(scopeData)
-        .sort((a, b) => scopeData[b] - scopeData[a])
-        .map((affiliation, index) => ({
-            affiliation,
-            name: getName(affiliation)[0],
-            longName: getName(affiliation)[1],
-            count: scopeData[affiliation],
-            value: ((scopeData[affiliation] / totalAffiliationsCount) * 100),
-            fill: COLORS[index % COLORS.length],
-        }));
-
-    const roleChartData = ["student", "faculty", "staff"]
-        .sort((a, b) => roleData[b] - roleData[a])
-        .map((role, index) => ({
-            name: getRoleName(role),
-            longName: getRoleName(role),
-            count: roleData[role],
-            value: ((roleData[role] / roleData['member']) * 100),
-            fill: COLORS[index % COLORS.length],
-        }));
-
-    const RADIAN = Math.PI / 180;
-    const renderPieLabel = (data) => ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
-        const radius = innerRadius + (outerRadius - innerRadius) * 0.8; // Adjust radius to position text in the middle of the pie-piece
-        const x = cx + radius * Math.cos(-midAngle * RADIAN);
-        const y = cy + radius * Math.sin(-midAngle * RADIAN);
-        const rotation = midAngle; // Calculate rotation angle for radial direction
-
-        console.log("label: ", percent, midAngle, data[index]);
-        if (percent < 0.02) {
-            return null;
-        }
-        const offset = Math.abs(midAngle) < 90 ? 0 : 180;
-        return (
-            <text
-                x={x}
-                y={y}
-                fill="white"
-                textAnchor={offset ? "start" : "end"}
-                dominantBaseline="central"
-                transform={`rotate(${snapAngle(offset - rotation)}, ${x}, ${y})`} // Rotate text to align radially
-            >
-                {`${data[index].name}`}
-            </text>
-        );
-    };
-
-    const CustomTooltip = ({ active, payload, label }) => {
-
-        if (active && payload && payload.length) {
-            const { name, longName, count, value } = payload[0].payload;
-            const percentage = value.toFixed(1);
-            return (
-                <div className={styles.tooltip}>
-                    <p className="label">{`${longName} : ${percentage}%`}</p>
-                    <p className="description">{`${new Intl.NumberFormat().format(count)} Aufrufe`}</p>
-                </div>
-            );
-        }
-
+  };
+
+  const COLORS = [
+    "rgba(255, 87, 34, 0.8)",
+    "rgba(33, 150, 243, 0.8)",
+    "rgba(76, 175, 80, 0.8)",
+    "rgba(255, 193, 7, 0.8)",
+    "rgba(156, 39, 176, 0.8)",
+    "rgba(233, 30, 99, 0.8)",
+    "rgba(0, 188, 212, 0.8)",
+    "rgba(255, 152, 0, 0.8)",
+    "rgba(96, 125, 139, 0.8)",
+    "rgba(255, 235, 59, 0.8)",
+    "rgba(0, 150, 136, 0.8)",
+    "rgba(158, 158, 158, 0.8)",
+    "rgba(240, 98, 146, 0.8)",
+    "rgba(48, 63, 159, 0.8)",
+    "rgba(30, 136, 229, 0.8)",
+    "rgb(166,206,227)",
+    "rgb(31,120,180)",
+    "rgb(178,223,138)",
+    "rgb(51,160,44)",
+    "rgb(251,154,153)",
+    "rgb(227,26,28)",
+    "rgb(253,191,111)",
+    "rgb(255,127,0)",
+    "rgb(202,178,214)",
+    "rgb(106,61,154)",
+    "rgb(255,255,153)",
+    "rgb(177,89,40)",
+  ];
+
+  const totalAffiliationsCount: number = Object.values(scopeData).reduce(
+    (sum: number, count: number) => sum + count,
+    0
+  ) as number;
+
+  const scopeChartData = Object.keys(scopeData)
+    .sort((a, b) => scopeData[b] - scopeData[a])
+    .map((affiliation, index) => ({
+      affiliation,
+      name: getName(affiliation)[0],
+      longName: getName(affiliation)[1],
+      count: scopeData[affiliation],
+      value: (scopeData[affiliation] / totalAffiliationsCount) * 100,
+      fill: COLORS[index % COLORS.length],
+    }));
+
+  const roleChartData = ["student", "faculty", "staff"]
+    .sort((a, b) => roleData[b] - roleData[a])
+    .map((role, index) => ({
+      name: getRoleName(role),
+      longName: getRoleName(role),
+      count: roleData[role],
+      value: (roleData[role] / roleData["member"]) * 100,
+      fill: COLORS[index % COLORS.length],
+    }));
+
+  const RADIAN = Math.PI / 180;
+  const renderPieLabel =
+    (data) =>
+    ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
+      const radius = innerRadius + (outerRadius - innerRadius) * 0.8; // Adjust radius to position text in the middle of the pie-piece
+      const x = cx + radius * Math.cos(-midAngle * RADIAN);
+      const y = cy + radius * Math.sin(-midAngle * RADIAN);
+      const rotation = midAngle; // Calculate rotation angle for radial direction
+
+      console.log("label: ", percent, midAngle, data[index]);
+      if (percent < 0.02) {
         return null;
+      }
+      const offset = Math.abs(midAngle) < 90 ? 0 : 180;
+      return (
+        <text
+          x={x}
+          y={y}
+          fill="white"
+          textAnchor={offset ? "start" : "end"}
+          dominantBaseline="central"
+          transform={`rotate(${snapAngle(offset - rotation)}, ${x}, ${y})`} // Rotate text to align radially
+        >
+          {`${data[index].name}`}
+        </text>
+      );
     };
 
-    const getStartAngle = (data) => {
-        const maxValue = data[0].value;
-        return 180 + maxValue * 1.8;
+  const CustomTooltip = ({ active, payload, label }) => {
+    if (active && payload && payload.length) {
+      const { name, longName, count, value } = payload[0].payload;
+      const percentage = value.toFixed(1);
+      return (
+        <div className={styles.tooltip}>
+          <p className="label">{`${longName} : ${percentage}%`}</p>
+          <p className="description">{`${new Intl.NumberFormat().format(
+            count
+          )} Aufrufe`}</p>
+        </div>
+      );
     }
 
-    const snapAngle = (angle) => {
-        const snappedAngle = Math.round(angle / 5) * 5;
-        return snappedAngle;
-    }
-
-    return (
-        <Tabs.Root defaultValue="total_requests" className={styles.chart}>
-            <Tabs.List>
-                <Tabs.Trigger value="total_requests">
-                    {t('total_requests_title')}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="scope_breakdown">
-                    {t('scope_breakdown_title')}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="role_breakdown">
-                    {t('role_breakdown_title')}
-                </Tabs.Trigger>
-                <Tabs.Indicator />
-            </Tabs.List>
-            <Tabs.Content value="total_requests" className={styles.chart_container}>
-                <ResponsiveContainer width="100%" height="90%">
-                    <BarChart data={lineChartData.labels.map((label, index) => ({
-                        label,
-                        value: lineChartData.datasets[0].data[index],
-                    }))}>
-                        <CartesianGrid strokeDasharray="3 3" />
-                        <XAxis dataKey="label" />
-                        <YAxis />
-                        <Tooltip />
-                        <Legend verticalAlign="top" />
-                        <Bar dataKey="value" name="Aufrufe" fill="rgba(30, 136, 229, 0.8)" />
-                    </BarChart>
-                </ResponsiveContainer>
-            </Tabs.Content>
-            <Tabs.Content value="scope_breakdown" className={styles.chart_container}>
-                <ResponsiveContainer width="100%" height="100%">
-                    <PieChart>
-                        <Pie
-                            data={scopeChartData}
-                            dataKey="value"
-                            nameKey="name"
-                            cx="50%"
-                            cy="50%"
-                            label={renderPieLabel(scopeChartData)}
-                            labelLine={false}
-                            outerRadius={"100%"}
-                            startAngle={getStartAngle(scopeChartData)}
-                            endAngle={getStartAngle(scopeChartData) - 360}
-                        >
-                            {scopeChartData.map((entry, index) => (
-                                <Cell key={`cell-${index}`} fill={entry.fill} />
-                            ))}
-                        </Pie>
-                        <Tooltip content={<CustomTooltip />} />
-                    </PieChart>
-                </ResponsiveContainer>
-            </Tabs.Content>
-            <Tabs.Content value="role_breakdown" className={styles.chart_container}>
-                <ResponsiveContainer width="100%" height="100%">
-                    <PieChart>
-                        <Pie
-                            data={roleChartData}
-                            dataKey="value"
-                            nameKey="name"
-                            cx="50%"
-                            cy="50%"
-                            label={renderPieLabel(roleChartData)}
-                            labelLine={false}
-                            outerRadius={"100%"}
-                            startAngle={getStartAngle(roleChartData)}
-                            endAngle={getStartAngle(roleChartData) - 360}
-                        >
-                            {roleChartData.map((entry, index) => (
-                                <Cell key={`cell-${index}`} fill={entry.fill} />
-                            ))}
-                        </Pie>
-                        <Tooltip content={<CustomTooltip />} />
-                    </PieChart>
-                </ResponsiveContainer>
-            </Tabs.Content>
-        </Tabs.Root >
-    );
+    return null;
+  };
+
+  const getStartAngle = (data) => {
+    const maxValue = data[0].value;
+    return 180 + maxValue * 1.8;
+  };
+
+  const snapAngle = (angle) => {
+    const snappedAngle = Math.round(angle / 5) * 5;
+    return snappedAngle;
+  };
+
+  return (
+    <Tabs.Root defaultValue="total_requests" className={styles.chart}>
+      <Tabs.List>
+        <Tabs.Trigger value="total_requests">
+          {t("total_requests_title")}
+        </Tabs.Trigger>
+        <Tabs.Trigger value="scope_breakdown">
+          {t("scope_breakdown_title")}
+        </Tabs.Trigger>
+        <Tabs.Trigger value="role_breakdown">
+          {t("role_breakdown_title")}
+        </Tabs.Trigger>
+        <Tabs.Indicator />
+      </Tabs.List>
+      <Tabs.Content value="total_requests" className={styles.chart_container}>
+        <ResponsiveContainer width="100%" height="90%">
+          <BarChart
+            data={lineChartData.labels.map((label, index) => ({
+              label,
+              value: lineChartData.datasets[0].data[index],
+            }))}
+          >
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="label" />
+            <YAxis />
+            <Tooltip />
+            <Legend verticalAlign="top" />
+            <Bar
+              dataKey="value"
+              name="Aufrufe"
+              fill="rgba(30, 136, 229, 0.8)"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </Tabs.Content>
+      <Tabs.Content value="scope_breakdown" className={styles.chart_container}>
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={scopeChartData}
+              dataKey="value"
+              nameKey="name"
+              cx="50%"
+              cy="50%"
+              label={renderPieLabel(scopeChartData)}
+              labelLine={false}
+              outerRadius={"100%"}
+              startAngle={getStartAngle(scopeChartData)}
+              endAngle={getStartAngle(scopeChartData) - 360}
+            >
+              {scopeChartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.fill} />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltip />} />
+          </PieChart>
+        </ResponsiveContainer>
+      </Tabs.Content>
+      <Tabs.Content value="role_breakdown" className={styles.chart_container}>
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={roleChartData}
+              dataKey="value"
+              nameKey="name"
+              cx="50%"
+              cy="50%"
+              label={renderPieLabel(roleChartData)}
+              labelLine={false}
+              outerRadius={"100%"}
+              startAngle={getStartAngle(roleChartData)}
+              endAngle={getStartAngle(roleChartData) - 360}
+            >
+              {roleChartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.fill} />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltip />} />
+          </PieChart>
+        </ResponsiveContainer>
+      </Tabs.Content>
+    </Tabs.Root>
+  );
 };
 
-export default DashboardChart;
\ No newline at end of file
+export default DashboardChart;
diff --git a/src/chat/GitHubMenu.tsx b/src/chat/GitHubMenu.tsx
index 75a66f55..3fdda027 100644
--- a/src/chat/GitHubMenu.tsx
+++ b/src/chat/GitHubMenu.tsx
@@ -1,5 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Button, HStack, IconButton, Menu, Popover, Portal } from "@chakra-ui/react";
+import {
+  Button,
+  HStack,
+  IconButton,
+  Menu,
+  Popover,
+  Portal,
+} from "@chakra-ui/react";
 import { IoLogoGithub } from "react-icons/io5";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
@@ -11,66 +18,78 @@ import rehypeRaw from "rehype-raw";
 import { useGlobal } from "./context";
 
 export function GitHubMenu() {
-    const { t } = useTranslation();
-    const { release } = useGlobal();
-    const issueUrl = import.meta.env.VITE_ISSUE_URL || 'https://github.com/fhswf/openai-ui/issues/new?template=Blank+issue';
+  const { t } = useTranslation();
+  const { release } = useGlobal();
+  const issueUrl =
+    import.meta.env.VITE_ISSUE_URL ||
+    "https://github.com/fhswf/openai-ui/issues/new?template=Blank+issue";
 
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [popoverOpen, setPopoverOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
 
-    return (
-        <Menu.Root
-            closeOnSelect={false}
-            onSelect={(e) => {
-                console.log('Selected: %o', e)
-                if (e.value === 'release_notes') {
-                    setPopoverOpen(!popoverOpen);
-                }
-            }}>
-            <Menu.Trigger asChild>
-                <IconButton variant="ghost" title={t("open_issue")}>
-                    <IoLogoGithub aria-label={t("open_issue")} />
-                </IconButton>
-            </Menu.Trigger>
-            <Menu.Positioner>
-                <Menu.Content>
-                    <Menu.Item value="release_notes">{t("release_notes")}</Menu.Item>
-                    <Popover.Root open={popoverOpen} onOpenChange={(e) => setPopoverOpen(e.open)} portalled={false}>
-                        <Popover.Trigger></Popover.Trigger>
-                        <Portal>
-                            <Popover.Positioner>
-                                <Popover.Content>
-                                    <Popover.CloseTrigger />
-                                    <Popover.Arrow>
-                                        <Popover.ArrowTip />
-                                    </Popover.Arrow>
-                                    <Popover.Body >
-                                        <Popover.Title>Release Notes</Popover.Title>
-                                        <div className="z-ui-markdown">
-                                            <Markdown
-                                                remarkPlugins={[remarkMath, remarkGfm, remarkBreaks]}
-                                                rehypePlugins={[rehypeKatex, rehypeRaw]}>
-                                                {release?.body}
-                                            </Markdown>
-                                        </div>
-                                    </Popover.Body>
-                                    <Popover.Footer>
-                                        <Popover.CloseTrigger asChild>
-                                            <HStack justifyContent={"center"}>
-                                                <Button type="primary" variant={"ghost"}>Close</Button>
-                                            </HStack>
-                                        </Popover.CloseTrigger>
-                                    </Popover.Footer>
-                                </Popover.Content>
-                            </Popover.Positioner>
-                        </Portal>
-                    </Popover.Root>
+  return (
+    <Menu.Root
+      closeOnSelect={false}
+      onSelect={(e) => {
+        console.log("Selected: %o", e);
+        if (e.value === "release_notes") {
+          setPopoverOpen(!popoverOpen);
+        }
+      }}
+    >
+      <Menu.Trigger asChild>
+        <IconButton variant="ghost" title={t("open_issue")}>
+          <IoLogoGithub aria-label={t("open_issue")} />
+        </IconButton>
+      </Menu.Trigger>
+      <Menu.Positioner>
+        <Menu.Content>
+          <Menu.Item value="release_notes">{t("release_notes")}</Menu.Item>
+          <Popover.Root
+            open={popoverOpen}
+            onOpenChange={(e) => setPopoverOpen(e.open)}
+            portalled={false}
+          >
+            <Popover.Trigger></Popover.Trigger>
+            <Portal>
+              <Popover.Positioner>
+                <Popover.Content>
+                  <Popover.CloseTrigger />
+                  <Popover.Arrow>
+                    <Popover.ArrowTip />
+                  </Popover.Arrow>
+                  <Popover.Body>
+                    <Popover.Title>Release Notes</Popover.Title>
+                    <div className="z-ui-markdown">
+                      <Markdown
+                        remarkPlugins={[remarkMath, remarkGfm, remarkBreaks]}
+                        rehypePlugins={[rehypeKatex, rehypeRaw]}
+                      >
+                        {release?.body}
+                      </Markdown>
+                    </div>
+                  </Popover.Body>
+                  <Popover.Footer>
+                    <Popover.CloseTrigger asChild>
+                      <HStack justifyContent={"center"}>
+                        <Button type="primary" variant={"ghost"}>
+                          Close
+                        </Button>
+                      </HStack>
+                    </Popover.CloseTrigger>
+                  </Popover.Footer>
+                </Popover.Content>
+              </Popover.Positioner>
+            </Portal>
+          </Popover.Root>
 
-                    <Menu.Item value={t("open_issue")}>
-                        <a href={issueUrl} target="_blank" title={t("open_issue")}>{t("open_issue")}</a>
-                    </Menu.Item>
-                </Menu.Content>
-            </Menu.Positioner>
-        </Menu.Root>
-    )
-}
\ No newline at end of file
+          <Menu.Item value={t("open_issue")}>
+            <a href={issueUrl} target="_blank" title={t("open_issue")}>
+              {t("open_issue")}
+            </a>
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Positioner>
+    </Menu.Root>
+  );
+}
diff --git a/src/chat/MessageHeader.tsx b/src/chat/MessageHeader.tsx
index 6a6f40c7..909b260a 100644
--- a/src/chat/MessageHeader.tsx
+++ b/src/chat/MessageHeader.tsx
@@ -1,480 +1,581 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-import { Tool, ToolChoiceTypes } from './context/types';
-
-import { Avatar, Card, HStack, Stack, Text, IconButton, Button, Menu, Popover, Dialog, CloseButton, Heading, Portal, Field, Input, Select, Checkbox, Separator, createListCollection } from '@chakra-ui/react';
-
-import { useTranslation } from 'react-i18next';
-import { IoLogoMarkdown, IoSettingsOutline, IoReloadOutline, IoLogoGithub } from 'react-icons/io5';
+import React, { useRef, useState } from "react";
+
+import { Tool, OptionActionType } from "./context/types";
+
+import {
+  Avatar,
+  HStack,
+  Stack,
+  Text,
+  IconButton,
+  Button,
+  Menu,
+  Popover,
+  Dialog,
+  CloseButton,
+  Heading,
+  Portal,
+  Field,
+  Input,
+  Select,
+  Checkbox,
+  Separator,
+  createListCollection,
+} from "@chakra-ui/react";
+
+import { useTranslation } from "react-i18next";
+import {
+  IoLogoMarkdown,
+  IoSettingsOutline,
+} from "react-icons/io5";
 import { BiSolidFileJson } from "react-icons/bi";
-import { LuChevronRight, LuPanelLeftClose, LuPanelLeftOpen } from 'react-icons/lu';
-import { MdDelete, MdEdit, MdOutlineSimCardDownload } from 'react-icons/md';
+import {
+  LuChevronRight,
+  LuPanelLeftClose,
+  LuPanelLeftOpen,
+} from "react-icons/lu";
+import { MdDelete, MdEdit, MdOutlineSimCardDownload } from "react-icons/md";
 import { CgOptions } from "react-icons/cg";
-import { useGlobal } from './context';
+import { useGlobal } from "./context";
 import { useApps } from "./apps/context";
-import { useMessage } from './hooks';
-import { classnames } from '../components/utils'
-import styles from './style/menu.module.less';
-import { MessageMenu } from './MessageMenu';
-import { modelOptions, toolOptions } from './utils/options'
-import { OptionActionType } from './context/types';
-import { GitHubMenu } from './GitHubMenu';
-import { RiChatNewFill, RiChatNewLine } from 'react-icons/ri';
-import { FaChartBar } from "react-icons/fa";
-import DashboardChart from './DashboardChart';
-import { AiOutlineBarChart } from 'react-icons/ai';
-
-import '../assets/icon/style.css';
-import { ErrorBoundary } from 'react-error-boundary';
-
-export function MessageHeader() {
-    const { is, setIs, setOptions, newChat, downloadThread, showSettings, options, user, chat, currentChat } = useGlobal();
-    const { message } = useMessage();
-    const { apps, category } = useApps();
-    const messages = message?.messages;
-    const columnIcon = is.toolbar ? <LuPanelLeftClose /> : <LuPanelLeftOpen />;
-
-    let tools: Map<string, Tool> = options.openai?.tools;
-
-    const { t } = useTranslation();
-    const contentRef = useRef<HTMLDivElement>(null)
-
-    const [editMCPServices, setEditMCPServices] = useState(false);
-
-    const [mcpToolForm, setMcpToolForm] = useState({
-        label: "",
-        server_url: "",
-        require_approval: "never",
-        allowed_tools: [],
-    });
+import { useMessage } from "./hooks";
+import { classnames } from "../components/utils";
+import styles from "./style/menu.module.less";
+import { MessageMenu } from "./MessageMenu";
+import { modelOptions, toolOptions } from "./utils/options";
+import { GitHubMenu } from "./GitHubMenu";
+import { RiChatNewLine } from "react-icons/ri";
 
-    const approval_options = createListCollection({
-        items: [
-            { label: t("Always"), value: "always" },
-            { label: t("Never"), value: "never" }
-        ]
-    });
 
-    const logout = () => {
-        console.log('Logout');
-        window.location.href = import.meta.env.VITE_LOGOUT_URL || '/';
-    };
+import "../assets/icon/style.css";
+import { UsageInformationDialog } from "./UsageInformationDialog";
 
-    const editMCP = () => {
-        console.log('Edit MCP Services');
-        setEditMCPServices(true);
-    };
-
-    if (!(typeof options.openai.tools === "object")) {
-        options.openai.tools = toolOptions;
+export function MessageHeader() {
+  const {
+    is,
+    setIs,
+    setOptions,
+    newChat,
+    downloadThread,
+    showSettings,
+    options,
+    user,
+  } = useGlobal();
+  const { message } = useMessage();
+  const { apps, category } = useApps();
+  const messages = message?.messages;
+  const columnIcon = is.toolbar ? <LuPanelLeftClose /> : <LuPanelLeftOpen />;
+
+  let tools: Map<string, Tool> = options.openai?.tools;
+
+  const { t } = useTranslation();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const [editMCPServices, setEditMCPServices] = useState(false);
+
+  const [mcpToolForm, setMcpToolForm] = useState({
+    label: "",
+    server_url: "",
+    require_approval: "never",
+    allowed_tools: [],
+  });
+
+  const approval_options = createListCollection({
+    items: [
+      { label: t("Always"), value: "always" },
+      { label: t("Never"), value: "never" },
+    ],
+  });
+
+  const logout = () => {
+    console.log("Logout");
+    globalThis.location.href = import.meta.env.VITE_LOGOUT_URL || "/";
+  };
+
+  const editMCP = () => {
+    console.log("Edit MCP Services");
+    setEditMCPServices(true);
+  };
+
+  if (typeof options.openai.tools !== "object") {
+    options.openai.tools = toolOptions;
+  }
+
+  function setTool(key: string, tool: Tool, checked: boolean): void {
+    console.log("Set tool: %s %o", key, checked);
+    if (
+      !options.openai.toolsEnabled ||
+      !(options.openai.toolsEnabled instanceof Set)
+    ) {
+      options.openai.toolsEnabled = new Set<string>();
     }
-
-    function setTool(key: string, tool: Tool, checked: boolean): void {
-        console.log('Set tool: %s %o', key, checked);
-        if (!options.openai.toolsEnabled || !(options.openai.toolsEnabled instanceof Set)) {
-            options.openai.toolsEnabled = new Set<string>();
-        }
-        if (checked) {
-            options.openai.toolsEnabled.add(key);
-        } else {
-            options.openai.toolsEnabled.delete(key);
-        }
-        setOptions({
-            type: OptionActionType.OPENAI,
-            data: { ...options.openai }
-        });
+    if (checked) {
+      options.openai.toolsEnabled.add(key);
+    } else {
+      options.openai.toolsEnabled.delete(key);
     }
-
-    function editTool(key: string, tool: Tool.Mcp): void {
-        console.log('Edit tool: %s %o', key, tool);
-        setMcpToolForm({
-            label: tool.server_label || "",
-            server_url: tool.server_url || "",
-            require_approval: tool.require_approval as string || "never",
-            allowed_tools: tool.allowed_tools as string[] || [],
-        });
-        setEditMCPServices(true);
+    setOptions({
+      type: OptionActionType.OPENAI,
+      data: { ...options.openai },
+    });
+  }
+
+  function editTool(key: string, tool: Tool.Mcp): void {
+    console.log("Edit tool: %s %o", key, tool);
+    setMcpToolForm({
+      label: tool.server_label || "",
+      server_url: tool.server_url || "",
+      require_approval: (tool.require_approval as string) || "never",
+      allowed_tools: (tool.allowed_tools as string[]) || [],
+    });
+    setEditMCPServices(true);
+  }
+
+  function handleAddService() {
+    console.log("Add/Save MCP Service", mcpToolForm);
+    if (!mcpToolForm.label || !mcpToolForm.server_url) {
+      alert(t("Please fill in all required fields"));
+      return;
     }
 
-    function handleAddService() {
-        console.log('Add/Save MCP Service', mcpToolForm);
-        if (!mcpToolForm.label || !mcpToolForm.server_url) {
-            alert(t("Please fill in all required fields"));
-            return;
-        }
-
-        const newTool: Tool.Mcp = {
-            type: "mcp",
-            server_label: mcpToolForm.label,
-            server_url: mcpToolForm.server_url,
-            require_approval: mcpToolForm.require_approval,
-        };
-
-        if (mcpToolForm.allowed_tools && mcpToolForm.allowed_tools.length > 0) {
-            newTool.allowed_tools = mcpToolForm.allowed_tools;
-        }
-
-        console.log("newTool:", newTool);
-        tools.set(mcpToolForm.label, newTool);
-        setOptions({
-            type: OptionActionType.OPENAI,
-            data: { ...options.openai, tools }
-        });
-    }
+    const newTool: Tool.Mcp = {
+      type: "mcp",
+      server_label: mcpToolForm.label,
+      server_url: mcpToolForm.server_url,
+      require_approval: mcpToolForm.require_approval as "always" | "never",
+    };
 
-    function handleDeleteService(key: string) {
-        console.log('Delete MCP Service', key);
-        if (!tools.has(key)) {
-            console.error(`Tool with key ${key} does not exist.`);
-            return;
-        }
-        tools.delete(key);
-        options.openai.toolsEnabled.delete(key);
-        setOptions({
-            type: OptionActionType.OPENAI,
-            data: { ...options.openai, tools }
-        });
+    if (mcpToolForm.allowed_tools && mcpToolForm.allowed_tools.length > 0) {
+      newTool.allowed_tools = mcpToolForm.allowed_tools;
     }
 
-    if (!(options.openai.toolsEnabled instanceof Set)) {
-        console.error("ToolsEnabled is not a Set:", options.openai.toolsEnabled);
-        options.openai.toolsEnabled = new Set<string>();
-    }
+    console.log("newTool:", newTool);
+    tools.set(mcpToolForm.label, newTool);
+    setOptions({
+      type: OptionActionType.OPENAI,
+      data: { ...options.openai, tools },
+    });
+  }
 
-    if (!(tools instanceof Map)) {
-        console.error("Tools is not a Map:", tools);
-        tools = new Map(toolOptions.entries());  // Fallback to default tools if not a Map
-        setOptions({
-            type: OptionActionType.OPENAI,
-            data: { ...options.openai, tools }
-        });
+  function handleDeleteService(key: string) {
+    console.log("Delete MCP Service", key);
+    if (!tools.has(key)) {
+      console.error(`Tool with key ${key} does not exist.`);
+      return;
     }
-    else {
-        // Check for new tools in toolOptions
-        toolOptions.forEach((value, key) => {
-            if (!tools.has(key)) {
-                tools.set(key, value);
-            }
-        });
+    tools.delete(key);
+    options.openai.toolsEnabled.delete(key);
+    setOptions({
+      type: OptionActionType.OPENAI,
+      data: { ...options.openai, tools },
+    });
+  }
+
+  if (!(options.openai.toolsEnabled instanceof Set)) {
+    console.error("ToolsEnabled is not a Set:", options.openai.toolsEnabled);
+    options.openai.toolsEnabled = new Set<string>();
+  }
+
+  if (tools instanceof Map) {
+    // Check for new tools in toolOptions
+    for (const [key, value] of toolOptions) {
+      if (!tools.has(key)) {
+        tools.set(key, value);
+      }
     }
-    const mcpTools: Record<string, Tool> = {}  // Filter MCP tools from tools
-
-    tools.forEach((value, key) => {
-        if (value.type === "mcp")
-            mcpTools[key] = value;
+  } else {
+    console.error("Tools is not a Map:", tools);
+    tools = new Map(toolOptions.entries()); // Fallback to default tools if not a Map
+    setOptions({
+      type: OptionActionType.OPENAI,
+      data: { ...options.openai, tools },
     });
-
-    return (
-        <HStack as="header"
-            padding={1} borderBottomWidth="1px"
-            justifyContent="space-between"
-            data-testid="ChatHeader">
-
-            <IconButton
-                hideFrom="md"
-                variant="ghost"
-                title={is.toolbar ? t("hide_toolbar") : t("show_toolbar")}
-                onClick={() => setIs({ toolbar: !is.toolbar })}>{columnIcon}</IconButton>
-            <Stack flexGrow={1} gap="1px" paddingInlineStart={2} className={styles.title}>
-                <Heading data-testid="HeaderTitle" textStyle="lg">{message?.title}</Heading>
-                <Text textStyle="xs">{t('count_messages', { count: messages?.filter(item => item.role !== "system").length })}</Text>
-            </Stack>
-
-            <Menu.Root>
-                <Menu.Trigger asChild>
-                    <IconButton variant="ghost" accessKey="o" title={t("chat_options")}>
-                        <CgOptions aria-label={t("chat_options")} />
-                    </IconButton>
-                </Menu.Trigger>
-                <Menu.Positioner>
+  }
+  const mcpTools: Record<string, Tool> = {}; // Filter MCP tools from tools
+
+  for (const [key, value] of tools) {
+    if (value.type === "mcp") mcpTools[key] = value;
+  }
+
+  return (
+    <HStack
+      as="header"
+      padding={1}
+      borderBottomWidth="1px"
+      justifyContent="space-between"
+      data-testid="ChatHeader"
+    >
+      <IconButton
+        hideFrom="md"
+        variant="ghost"
+        title={is.toolbar ? t("hide_toolbar") : t("show_toolbar")}
+        onClick={() => setIs({ toolbar: !is.toolbar })}
+      >
+        {columnIcon}
+      </IconButton>
+      <Stack
+        flexGrow={1}
+        gap="1px"
+        paddingInlineStart={2}
+        className={styles.title}
+      >
+        <Heading data-testid="HeaderTitle" textStyle="lg">
+          {message?.title}
+        </Heading>
+        <Text textStyle="xs">
+          {t("count_messages", {
+            count: messages?.filter((item) => item.role !== "system").length,
+          })}
+        </Text>
+      </Stack>
+
+      <Menu.Root>
+        <Menu.Trigger asChild>
+          <IconButton variant="ghost" title={t("chat_options")}>
+            <CgOptions aria-label={t("chat_options")} />
+          </IconButton>
+        </Menu.Trigger>
+        <Menu.Positioner>
+          <Menu.Content>
+            <Menu.RadioItemGroup
+              value={options.openai?.model}
+              onValueChange={(e) =>
+                setOptions({
+                  type: OptionActionType.OPENAI,
+                  data: { ...options.openai, model: e.value },
+                })
+              }
+            >
+              <Menu.ItemGroupLabel>{t("model_options")}</Menu.ItemGroupLabel>
+              {modelOptions.map((item) => (
+                <Menu.RadioItem key={item.value} value={item.value}>
+                  {item.label}
+                  <Menu.ItemIndicator />
+                </Menu.RadioItem>
+              ))}
+            </Menu.RadioItemGroup>
+
+            <Menu.ItemGroup>
+              <Menu.ItemGroupLabel>{t("tool_options")}</Menu.ItemGroupLabel>
+              {Array.from(tools.entries()).map(([key, value]) => (
+                <Menu.CheckboxItem
+                  value={value.type === "mcp" ? value.server_label : value.type}
+                  key={key}
+                  checked={options.openai?.toolsEnabled?.has(key) || false}
+                  onCheckedChange={(e) => setTool(key, value, e)}
+                >
+                  <Menu.ItemIndicator />
+                  {key}
+                </Menu.CheckboxItem>
+              ))}
+
+              <Menu.Root positioning={{ placement: "right-start", gutter: 2 }}>
+                <Menu.TriggerItem>
+                  {t("MCP Services")} <LuChevronRight />
+                </Menu.TriggerItem>
+                <Portal>
+                  <Menu.Positioner>
                     <Menu.Content>
-                        <Menu.RadioItemGroup
-                            value={options.openai?.model}
-                            onValueChange={(e) => setOptions({ type: OptionActionType.OPENAI, data: { ...options.openai, model: e.value } })}>
-                            <Menu.ItemGroupLabel>{t("model_options")}</Menu.ItemGroupLabel>
-                            {
-                                modelOptions.map((item) => (
-                                    <Menu.RadioItem key={item.value} value={item.value}
-                                    >
-                                        {item.label}
-                                        <Menu.ItemIndicator />
-                                    </Menu.RadioItem>
-                                ))
-                            }
-                        </Menu.RadioItemGroup>
-
-                        <Menu.ItemGroup>
-                            <Menu.ItemGroupLabel>{t("tool_options")}</Menu.ItemGroupLabel>
-                            {
-                                Array.from(tools.entries()).map(([key, value]) => (
-                                    <Menu.CheckboxItem
-                                        value={value.type === "mcp" ? value.server_label : value.type}
-                                        key={key}
-                                        checked={options.openai?.toolsEnabled?.has(key) || false}
-                                        onCheckedChange={(e) => setTool(key, value, e)}>
-                                        <Menu.ItemIndicator />
-                                        {key}
-                                    </Menu.CheckboxItem>
-                                ))
-                            }
-
-                            <Menu.Root positioning={{ placement: "right-start", gutter: 2 }}>
-                                <Menu.TriggerItem>
-                                    {t("MCP Services")} <LuChevronRight />
-                                </Menu.TriggerItem>
-                                <Portal>
-                                    <Menu.Positioner>
-                                        <Menu.Content>
-                                            {Object.entries(mcpTools).map(([key, tool]) => (
-                                                <Menu.CheckboxItem
-                                                    key={tool.server_label}
-                                                    value={key}
-                                                    checked={options.openai?.toolsEnabled?.has(key) || false}
-                                                    onCheckedChange={(e) => setTool(key, tool, e)}>
-                                                    <Menu.ItemIndicator />
-                                                    {tool.title || key}
-                                                </Menu.CheckboxItem>
-                                            ))}
-
-                                            <Menu.Item onClick={editMCP} value="edit_mcp_services">
-                                                {t("Add/Remove MCP Services")}
-                                            </Menu.Item>
-                                        </Menu.Content>
-                                    </Menu.Positioner>
-                                </Portal>
-                            </Menu.Root>
-                        </Menu.ItemGroup>
+                      {Object.entries(mcpTools).map(([key, tool]) => (
+                        <Menu.CheckboxItem
+                          key={tool.server_label}
+                          value={key}
+                          checked={
+                            options.openai?.toolsEnabled?.has(key) || false
+                          }
+                          onCheckedChange={(e) => setTool(key, tool, e)}
+                        >
+                          <Menu.ItemIndicator />
+                          {tool.title || key}
+                        </Menu.CheckboxItem>
+                      ))}
+
+                      <Menu.Item onClick={editMCP} value="edit_mcp_services">
+                        {t("Add/Remove MCP Services")}
+                      </Menu.Item>
                     </Menu.Content>
-                </Menu.Positioner>
-            </Menu.Root>
-
-
-            <Dialog.Root open={editMCPServices} onOpenChange={(e) => setEditMCPServices(e.open)} lazyMount size="cover">
-                <Portal>
-                    <Dialog.Backdrop />
-                    <Dialog.Positioner>
-                        <Dialog.Content ref={contentRef}>
-
-                            <Dialog.Header>
-                                <Dialog.Title>
-                                    {t("Edit MCP Services")}
-                                </Dialog.Title>
-                            </Dialog.Header>
-                            <Dialog.Body>
-                                <Stack gap={4}>
-                                    <Stack gap={4}>
-                                        <Field.Root>
-                                            <Field.Label htmlFor="label">{t("Label")}</Field.Label>
-                                            <Input
-                                                id="label"
-                                                name="label"
-                                                required
-                                                className={styles.input}
-                                                value={mcpToolForm.label}
-                                                onChange={e => setMcpToolForm(f => ({ ...f, label: e.target.value }))}
-                                            />
-                                        </Field.Root>
-                                        <Field.Root>
-                                            <Field.Label htmlFor="server_url">{t("Server URL")}</Field.Label>
-                                            <Input
-                                                id="server_url"
-                                                name="server_url"
-                                                type="url"
-                                                required
-                                                className={styles.input}
-                                                value={mcpToolForm.server_url}
-                                                onChange={e => setMcpToolForm(f => ({ ...f, server_url: e.target.value }))}
-                                            />
-                                        </Field.Root>
-                                        <Field.Root>
-                                            <Select.Root collection={approval_options} size="sm" width="320px"
-                                                value={[mcpToolForm.require_approval]}
-                                                onValueChange={(e) => {
-                                                    console.log("Selected approval option:", e);
-                                                    setMcpToolForm(f => ({ ...f, require_approval: e.value[0] }))
-                                                }}>
-                                                <Select.HiddenSelect />
-                                                <Select.Label>{t("Require Approval")}</Select.Label>
-                                                <Select.Control>
-                                                    <Select.Trigger>
-                                                        <Select.ValueText placeholder="Select" />
-                                                    </Select.Trigger>
-
-                                                    <Select.IndicatorGroup>
-                                                        <Select.Indicator />
-                                                    </Select.IndicatorGroup>
-                                                </Select.Control>
-                                                <Portal container={contentRef}>
-                                                    <Select.Positioner>
-                                                        <Select.Content>
-                                                            {approval_options.items.map((framework) => (
-                                                                <Select.Item item={framework} key={framework.value}>
-                                                                    {framework.label}
-                                                                    <Select.ItemIndicator />
-                                                                </Select.Item>
-                                                            ))}
-                                                        </Select.Content>
-                                                    </Select.Positioner>
-                                                </Portal>
-                                            </Select.Root>
-                                        </Field.Root>
-                                        <Field.Root>
-                                            <Field.Label htmlFor="allowed_tools">{t("Allowed Tools")}</Field.Label>
-                                            <Input
-                                                id="allowed_tools"
-                                                name="allowed_tools"
-                                                placeholder={t("Comma separated")}
-                                                className={styles.input}
-                                                value={mcpToolForm.allowed_tools}
-                                                onChange={e => setMcpToolForm(f => ({ ...f, allowed_tools: e.target.value.split(',').map(item => item.trim()) }))}
-                                            />
-                                        </Field.Root>
-                                    </Stack>
-                                    <Button onClick={handleAddService} colorPalette="blue">{t("Add/Save Service")}</Button>
-                                </Stack>
-
-
-                                <Separator marginBlockStart={4} marginBlockEnd={4} />
-
-                                <Stack padding={2} gap={2} as="form" onSubmit={e => { e.preventDefault(); /* handle submit here */ }}>
-                                    <Text fontWeight="bold">{t("MCP Services")}</Text>
-                                    <Stack padding={2} gap={2} className={styles.mcpServices}>
-                                        {Object.entries(mcpTools).map(([key, tool]) => (
-                                            <HStack key={key} justifyContent="space-between" alignItems="center">
-                                                <HStack>
-                                                    <Checkbox.Root
-                                                        size="sm"
-                                                        variant={"outline"}
-                                                        checked={options.openai?.toolsEnabled?.has(key) || false}
-                                                        onCheckedChange={(e) => setTool(key, tool, e.checked)}>
-                                                        <Checkbox.HiddenInput />
-                                                        <Checkbox.Control />
-                                                    </Checkbox.Root>
-                                                    <Text>{tool.title || key}</Text>
-                                                </HStack>
-                                                <HStack gap={1} alignItems="center">
-
-                                                    <Button
-                                                        variant="ghost"
-                                                        size="sm"
-                                                        onClick={() => {
-                                                            editTool(key, tool)
-                                                        }}>
-                                                        <MdEdit />
-                                                    </Button>
-                                                    <Button variant="ghost" size="sm" onClick={() => handleDeleteService(key)}>
-                                                        <MdDelete />
-                                                    </Button>
-                                                </HStack>
-                                            </HStack>
-                                        ))}
-                                    </Stack>
-
-
-                                </Stack>
-                            </Dialog.Body>
-                            <Dialog.Footer />
-                            <Dialog.CloseTrigger asChild>
-                                <CloseButton size="sm" />
-                            </Dialog.CloseTrigger>
-                        </Dialog.Content>
-                    </Dialog.Positioner>
+                  </Menu.Positioner>
                 </Portal>
-            </Dialog.Root>
-
-            <Menu.Root>
-                <Menu.Trigger asChild>
-                    <IconButton variant="ghost" accessKey="n" title={t("new_chat")}>
-                        <RiChatNewLine aria-label={t("new_chat")} />
-                    </IconButton>
-                </Menu.Trigger>
-                <Menu.Content>
-                    <Menu.ItemGroup title={t("new_chat")}>
-                        {
-                            apps.map((app, index) => {
-                                const cat = category.filter(item => item.id == app.category)[0];
-                                return (
-                                    <Menu.Item key={app.id} onClick={() => newChat(app)} value={app.id} aria-keyshortcuts={index}>
-                                        <span className={classnames(styles.icon, `ico-${cat.icon}`)}></span> {app.title}
-                                    </Menu.Item>
-                                )
-                            })
+              </Menu.Root>
+            </Menu.ItemGroup>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Menu.Root>
+
+      <Dialog.Root
+        open={editMCPServices}
+        onOpenChange={(e) => setEditMCPServices(e.open)}
+        lazyMount
+        size="cover"
+      >
+        <Portal>
+          <Dialog.Backdrop />
+          <Dialog.Positioner>
+            <Dialog.Content ref={contentRef}>
+              <Dialog.Header>
+                <Dialog.Title>{t("Edit MCP Services")}</Dialog.Title>
+              </Dialog.Header>
+              <Dialog.Body>
+                <Stack gap={4}>
+                  <Stack gap={4}>
+                    <Field.Root>
+                      <Field.Label htmlFor="label">{t("Label")}</Field.Label>
+                      <Input
+                        id="label"
+                        name="label"
+                        required
+                        className={styles.input}
+                        value={mcpToolForm.label}
+                        onChange={(e) =>
+                          setMcpToolForm((f) => ({
+                            ...f,
+                            label: e.target.value,
+                          }))
                         }
-                    </Menu.ItemGroup>
-                </Menu.Content>
-            </Menu.Root>
-
-            <MessageMenu />
-
-            {options.openai.mode == "assistant" ? <IconButton variant="ghost" title={t("chat_settings")} onClick={showSettings}><IoSettingsOutline /></IconButton> : null}
-
-            <Menu.Root>
-                <Menu.Trigger asChild>
-                    <IconButton variant="ghost" title={t("download_thread")}>
-                        <MdOutlineSimCardDownload aria-label={t("download_thread")} />
-                    </IconButton>
-                </Menu.Trigger>
-                <Menu.Content>
-                    <Menu.Item value="json" onClick={() => downloadThread("json")} >
-                        <BiSolidFileJson /> {t("download_json")}
-                    </Menu.Item>
-                    <Menu.Item value="markdown" onClick={() => downloadThread("markdown")} >
-                        <IoLogoMarkdown /> {t("download_markdown")}
-                    </Menu.Item>
-                </Menu.Content>
-            </Menu.Root>
-            <GitHubMenu />
-
-            <Dialog.Root lazyMount size="cover">
-                <Dialog.Trigger data-testid="UsageInformationBtn" asChild>
-                    <IconButton variant="ghost" title={t("usage_information")}>
-                        <AiOutlineBarChart aria-label={t("usage_information")} />
-                    </IconButton>
-                </Dialog.Trigger>
-                <Dialog.Backdrop />
-                <Dialog.Positioner>
-                    <Dialog.Content data-testid="UsageInformation" >
-                        <Dialog.Header>
-                            <Dialog.Title fontWeight="bold" paddingBlockEnd={"15px"}>{t('usage_information')}</Dialog.Title>
-                            <Dialog.CloseTrigger asChild>
-                                <CloseButton size="sm" />
-                            </Dialog.CloseTrigger>
-                        </Dialog.Header>
-                        <Dialog.Body className={styles.dashboard}>
-                            <ErrorBoundary fallbackRender={() => <div>{t("error")}</div>}>
-                                <DashboardChart />
-                            </ErrorBoundary>
-                        </Dialog.Body>
-
-                    </Dialog.Content>
-                </Dialog.Positioner>
-            </Dialog.Root>
-
-            <Popover.Root lazyMount>
-                <Popover.Trigger data-testid="UserInformationBtn">
-                    <Avatar.Root size="sm">
-                        <Avatar.Fallback name={user?.name} />
-                        <Avatar.Image src={user?.avatar} />
-                    </Avatar.Root>
-                </Popover.Trigger>
-                <Popover.Positioner>
-                    <Popover.Content data-testid="UserInformation">
-                        <Popover.Arrow />
-                        <Popover.Body>
-                            <Popover.Title fontWeight="bold" paddingBlockEnd={"15px"}>{t('User information')}</Popover.Title>
-                            <Stack gap={2}>
-                                <Text>{user?.name}</Text>
-                                <Text>{user?.email}</Text>
-                                <Button type="primary" onClick={logout}>Logout</Button>
-                            </Stack>
-                        </Popover.Body>
-                    </Popover.Content>
-                </Popover.Positioner>
-            </Popover.Root>
-
-        </HStack >
-    );
-
-
+                      />
+                    </Field.Root>
+                    <Field.Root>
+                      <Field.Label htmlFor="server_url">
+                        {t("Server URL")}
+                      </Field.Label>
+                      <Input
+                        id="server_url"
+                        name="server_url"
+                        type="url"
+                        required
+                        className={styles.input}
+                        value={mcpToolForm.server_url}
+                        onChange={(e) =>
+                          setMcpToolForm((f) => ({
+                            ...f,
+                            server_url: e.target.value,
+                          }))
+                        }
+                      />
+                    </Field.Root>
+                    <Field.Root>
+                      <Select.Root
+                        collection={approval_options}
+                        size="sm"
+                        width="320px"
+                        value={[mcpToolForm.require_approval]}
+                        onValueChange={(e) => {
+                          console.log("Selected approval option:", e);
+                          setMcpToolForm((f) => ({
+                            ...f,
+                            require_approval: e.value[0],
+                          }));
+                        }}
+                      >
+                        <Select.HiddenSelect />
+                        <Select.Label>{t("Require Approval")}</Select.Label>
+                        <Select.Control>
+                          <Select.Trigger>
+                            <Select.ValueText placeholder="Select" />
+                          </Select.Trigger>
+
+                          <Select.IndicatorGroup>
+                            <Select.Indicator />
+                          </Select.IndicatorGroup>
+                        </Select.Control>
+                        <Portal container={contentRef}>
+                          <Select.Positioner>
+                            <Select.Content>
+                              {approval_options.items.map((framework) => (
+                                <Select.Item
+                                  item={framework}
+                                  key={framework.value}
+                                >
+                                  {framework.label}
+                                  <Select.ItemIndicator />
+                                </Select.Item>
+                              ))}
+                            </Select.Content>
+                          </Select.Positioner>
+                        </Portal>
+                      </Select.Root>
+                    </Field.Root>
+                    <Field.Root>
+                      <Field.Label htmlFor="allowed_tools">
+                        {t("Allowed Tools")}
+                      </Field.Label>
+                      <Input
+                        id="allowed_tools"
+                        name="allowed_tools"
+                        placeholder={t("Comma separated")}
+                        className={styles.input}
+                        value={mcpToolForm.allowed_tools}
+                        onChange={(e) =>
+                          setMcpToolForm((f) => ({
+                            ...f,
+                            allowed_tools: e.target.value
+                              .split(",")
+                              .map((item) => item.trim()),
+                          }))
+                        }
+                      />
+                    </Field.Root>
+                  </Stack>
+                  <Button onClick={handleAddService} colorPalette="blue">
+                    {t("Add/Save Service")}
+                  </Button>
+                </Stack>
+
+                <Separator marginBlockStart={4} marginBlockEnd={4} />
+
+                <Stack
+                  padding={2}
+                  gap={2}
+                  as="form"
+                  onSubmit={(e) => {
+                    e.preventDefault(); /* handle submit here */
+                  }}
+                >
+                  <Text fontWeight="bold">{t("MCP Services")}</Text>
+                  <Stack padding={2} gap={2} className={styles.mcpServices}>
+                    {Object.entries(mcpTools).map(([key, tool]) => (
+                      <HStack
+                        key={key}
+                        justifyContent="space-between"
+                        alignItems="center"
+                      >
+                        <HStack>
+                          <Checkbox.Root
+                            size="sm"
+                            variant={"outline"}
+                            checked={
+                              options.openai?.toolsEnabled?.has(key) || false
+                            }
+                            onCheckedChange={(e) =>
+                              setTool(key, tool, e.checked)
+                            }
+                          >
+                            <Checkbox.HiddenInput />
+                            <Checkbox.Control />
+                          </Checkbox.Root>
+                          <Text>{tool.title || key}</Text>
+                        </HStack>
+                        <HStack gap={1} alignItems="center">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              editTool(key, tool);
+                            }}
+                          >
+                            <MdEdit />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleDeleteService(key)}
+                          >
+                            <MdDelete />
+                          </Button>
+                        </HStack>
+                      </HStack>
+                    ))}
+                  </Stack>
+                </Stack>
+              </Dialog.Body>
+              <Dialog.Footer />
+              <Dialog.CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </Dialog.CloseTrigger>
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </Portal>
+      </Dialog.Root>
+
+      <Menu.Root>
+        <Menu.Trigger asChild>
+          <IconButton variant="ghost" title={t("new_chat")}>
+            <RiChatNewLine aria-label={t("new_chat")} />
+          </IconButton>
+        </Menu.Trigger>
+        <Menu.Content>
+          <Menu.ItemGroup title={t("new_chat")}>
+            {apps.map((app, index) => {
+              const cat = category.find((item) => item.id == app.category);
+              return (
+                <Menu.Item
+                  key={app.id}
+                  onClick={() => newChat(app)}
+                  value={app.id}
+                  aria-keyshortcuts={index}
+                >
+                  <span
+                    className={classnames(styles.icon, `ico - ${cat.icon} `)}
+                  ></span>{" "}
+                  {app.title}
+                </Menu.Item>
+              );
+            })}
+          </Menu.ItemGroup>
+        </Menu.Content>
+      </Menu.Root>
+
+      <MessageMenu />
+
+      {options.openai.mode == "assistant" ? (
+        <IconButton
+          variant="ghost"
+          title={t("chat_settings")}
+          onClick={showSettings}
+        >
+          <IoSettingsOutline />
+        </IconButton>
+      ) : null}
+
+      <Menu.Root>
+        <Menu.Trigger asChild>
+          <IconButton variant="ghost" title={t("download_thread")}>
+            <MdOutlineSimCardDownload aria-label={t("download_thread")} />
+          </IconButton>
+        </Menu.Trigger>
+        <Menu.Content>
+          <Menu.Item value="json" onClick={() => downloadThread("json")}>
+            <BiSolidFileJson /> {t("download_json")}
+          </Menu.Item>
+          <Menu.Item
+            value="markdown"
+            onClick={() => downloadThread("markdown")}
+          >
+            <IoLogoMarkdown /> {t("download_markdown")}
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Root>
+      <GitHubMenu />
+
+
+
+      <UsageInformationDialog />
+
+      <Popover.Root lazyMount>
+        <Popover.Trigger data-testid="UserInformationBtn">
+          <Avatar.Root size="sm">
+            <Avatar.Fallback name={user?.name} />
+            <Avatar.Image src={user?.avatar} />
+          </Avatar.Root>
+        </Popover.Trigger>
+        <Popover.Positioner>
+          <Popover.Content data-testid="UserInformation">
+            <Popover.Arrow />
+            <Popover.Body>
+              <Popover.Title fontWeight="bold" paddingBlockEnd={"15px"}>
+                {t("User information")}
+              </Popover.Title>
+              <Stack gap={2}>
+                <Text>{user?.name}</Text>
+                <Text>{user?.email}</Text>
+                <Button colorPalette="blue" onClick={logout}>
+                  Logout
+                </Button>
+              </Stack>
+            </Popover.Body>
+          </Popover.Content>
+        </Popover.Positioner>
+      </Popover.Root>
+    </HStack>
+  );
 }
-
diff --git a/src/chat/MessageInput.tsx b/src/chat/MessageInput.tsx
index dbaff1e8..d6084b8b 100644
--- a/src/chat/MessageInput.tsx
+++ b/src/chat/MessageInput.tsx
@@ -1,352 +1,453 @@
-import React, { BaseSyntheticEvent, SyntheticEvent, useEffect, useState } from "react";
+import React, {
+  BaseSyntheticEvent,
+  SyntheticEvent,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { useOptions, useSendKey } from "./hooks";
 import { useGlobal } from "./context";
-import { Button, HStack, IconButton, Kbd, Progress, Skeleton, Stack, StepsStatus, Text, Textarea } from "@chakra-ui/react";
-import { Switch } from "../components/ui/switch"
-import styles from './style/message.module.less'
-import CodeEditor from '@uiw/react-textarea-code-editor';
-import { MdOutlineCancel } from "react-icons/md";
-import { use } from "chai";
+import {
+  Button,
+  Box,
+  HStack,
+  IconButton,
+  Kbd,
+  Progress,
+  Stack,
+  StepsStatus,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import { Switch } from "../components/ui/switch";
+import styles from "./style/message.module.less";
+import CodeEditor from "@uiw/react-textarea-code-editor";
+import { MdOutlineCancel, MdOutlineFileUpload } from "react-icons/md";
 import { CiMicrophoneOff, CiMicrophoneOn } from "react-icons/ci";
 import { toaster } from "../components/ui/toaster";
-import classNames from 'classnames';
+import classNames from "classnames";
+import { OPFSImage } from "./component";
 
 
-export function LazyImage(props: { name?: string, url?: string }) {
-    const { name, url } = props;
-    const [loaded, setLoaded] = useState(false);
-    const [imageUrl, setImageUrl] = useState<string | null>(null);
 
-    useEffect(() => {
-        navigator.storage.getDirectory()
-            .then(async (opfs) => {
-                if (name) {
-                    const fileHandle = await opfs.getFileHandle(name);
-                    if (fileHandle) {
-                        const file = await fileHandle.getFile()
-                        const imageUrl = URL.createObjectURL(file);
-                        setImageUrl(imageUrl);
-                        setLoaded(true);
-                    }
-                }
-            })
-            .catch((error) => {
-                console.error("Error getting OPFS directory: %o", error);
-            });
-    }, [name, url]);
+function useDebounce(cb, delay) {
+  const timeoutId = useRef(null);
 
-    if (!url) {
-        if (imageUrl) {
-            return (
-                <img
-                    src={imageUrl}
-                    alt={name || "Image"}
-                    className={classNames(styles.image, { [styles.loaded]: loaded })}
-                    loading="lazy"
-                    onLoad={() => setLoaded(true)}
-                />
-            );
-        }
-        return <Skeleton className={styles.image} />;
+  return function (...args) {
+    if (timeoutId.current) {
+      // This check is not strictly necessary
+      clearTimeout(timeoutId.current);
     }
-    console.log("LazyImage: url: %s", url);
-    return (
-        <img
-            src={url}
-            alt={name || "Image"}
-            className={classNames(styles.image, { [styles.loaded]: loaded })}
-            loading="lazy"
-        />
-    );
+    timeoutId.current = setTimeout(() => cb(...args), delay);
+  };
 }
 
 export function MessageInput() {
-    const { setIs, sendMessage, setMessage, setState, eventProcessor, is, options, typeingMessage, clearTypeing } = useGlobal();
-    const { setGeneral } = useOptions()
-    const { t } = useTranslation();
-    const inputRef = React.createRef<HTMLDivElement>();
+  const {
+    setIs,
+    sendMessage,
+    setMessage,
+    setState,
+    eventProcessor,
+    is,
+    options,
+    typeingMessage,
+    clearTypeing,
+  } = useGlobal();
+  const { setGeneral } = useOptions();
+  const { t } = useTranslation();
+  const dropRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-    const [recognition, setRecognition] = useState(null);
-    const [recognitionActive, setRecognitionActive] = useState(false);
-    useSendKey(sendMessage, options.general.sendCommand);
+  const [recognition, setRecognition] = useState(null);
+  const [recognitionActive, setRecognitionActive] = useState(false);
+  const [inputMessage, setInputMessage] = useState(
+    typeingMessage?.content || ""
+  );
+  useSendKey(sendMessage, options.general.sendCommand);
 
-    useEffect(() => {
-        console.log("MessageBar: eventProcessor: %o", eventProcessor)
-    }, [eventProcessor])
+  useEffect(() => {
+    console.log("MessageBar: eventProcessor: %o", eventProcessor);
+  }, [eventProcessor]);
 
-    useEffect(() => {
-        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-        const _recognition = SpeechRecognition ? new SpeechRecognition() : null;
-        if (!_recognition) {
-            console.warn("SpeechRecognition is not supported in this browser.");
-            return;
-        }
-        console.log("MessageBar: recognition: %o", _recognition);
-        setRecognition(_recognition);
+  useEffect(() => {
+    const SpeechRecognition =
+      globalThis.SpeechRecognition || globalThis.webkitSpeechRecognition;
+    const _recognition = SpeechRecognition ? new SpeechRecognition() : null;
+    if (!_recognition) {
+      console.warn("SpeechRecognition is not supported in this browser.");
+      return;
+    }
+    setRecognition(_recognition);
 
-        _recognition.onspeechend = () => {
-            console.log("MessageBar: recognition speech end");
-            setRecognitionActive(false);
-        }
-        _recognition.onaudioend = () => {
-            console.log("MessageBar: recognition audio end");
-            setRecognitionActive(false);
+    _recognition.onspeechend = () => {
+      console.log("MessageBar: recognition speech end");
+      setRecognitionActive(false);
+    };
+    _recognition.onaudioend = () => {
+      console.log("MessageBar: recognition audio end");
+      setRecognitionActive(false);
+    };
+    _recognition.onerror = (event) => {
+      console.error("MessageBar: recognition error: %o", event);
+      setRecognitionActive(false);
+    };
+  }, []);
+
+  const stopResponse = () => {
+    eventProcessor?.stop();
+  };
+
+  const voiceClasses = classNames(styles.voice, {
+    [styles.active]: recognitionActive,
+  });
+
+  const handleLinkDrop = (url: string) => {
+    if (!typeingMessage.images) {
+      typeingMessage.images = [];
+    }
+    // check if the url is an image
+    const proxy =
+      import.meta.env.VITE_PROXY_URL || "https://poxy.gawron.cloud/api";
+    const fetchUrl = `${proxy}?url=${encodeURIComponent(url)}`;
+    fetch(fetchUrl, { method: "GET" })
+      .then((response) => {
+        if (response.headers.get("content-type")?.startsWith("image")) {
+          typeingMessage.images.push({ url, id: Date.now() + Math.random() });
+          setState({ typeingMessage });
+        } else {
+          toaster.create({
+            title: t("not_image"),
+            description: t("not_image_description"),
+            duration: 5000,
+            type: "warning",
+          });
         }
-        _recognition.onerror = (event) => {
-            console.error("MessageBar: recognition error: %o", event);
-            setRecognitionActive(false);
+      })
+      .catch((error) => {
+        console.error("Error: %o", error);
+        toaster.create({
+          title: t("error_occurred"),
+          description: "error.message",
+          duration: 5000,
+          type: "error",
+        });
+      });
+  };
+
+  const handleFileDrop = (files: File[]) => {
+    if (files.length === 0) {
+      console.warn("No files dropped");
+      return;
+    }
+    const newMessage = typeingMessage ? { ...typeingMessage } : {};
+    if (!newMessage.images) {
+      newMessage.images = [];
+    }
+    files.forEach(async (file) => {
+      if (file.type.startsWith("image/")) {
+        try {
+          const opfs = await navigator.storage.getDirectory();
+          const fileHandle = await opfs.getFileHandle(file.name, {
+            create: true,
+          });
+          const writable = await fileHandle.createWritable();
+          const buffer = await file.arrayBuffer();
+          await writable.write(buffer);
+          await writable.close();
+        } catch (error) {
+          console.error("Error writing file to OPFS: %o", error);
+          toaster.create({
+            title: t("error_occurred"),
+            description: error instanceof Error ? error.message : String(error),
+            duration: 5000,
+            type: "error",
+          });
         }
-    }, []);
+        newMessage.images.push({
+          name: file.name,
+          url: `opfs://${file.name}`,
+          size: file.size,
+          lastModified: file.lastModified,
+          type: file.type,
+          id: Date.now() + Math.random(),
+        });
+        setState({ typeingMessage: newMessage });
+      }
+    });
+  };
 
-    const stopResponse = () => {
-        eventProcessor?.stop()
+  const handleFileInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      handleFileDrop(Array.from(event.target.files));
     }
+    // Reset the input value so the same file can be selected again
+    event.target.value = "";
+  };
 
-    const voiceClasses = classNames(styles.voice, {
-        [styles.active]: recognitionActive,
-    });
+  const handleDeleteImage = (index: number) => {
+    if (typeingMessage.images) {
+      typeingMessage.images.splice(index, 1);
+      setState({ typeingMessage: { ...typeingMessage } });
+    }
+  };
 
-    return (
-        <div className={styles.bar}
-            data-name="dropzone"
-            onDragOver={(event: React.DragEvent<HTMLDivElement>) => {
-                event.stopPropagation();
-                const isLink = event.dataTransfer.types.includes("text/uri-list");
-                if (isLink) {
-                    event.preventDefault();
-                }
-            }}
-            onDragEnter={(event: React.DragEvent<HTMLDivElement>) => {
-                event.stopPropagation();
-                console.log('Drag enter: %o', event);
+  const handleDrop = (
+    event: React.DragEvent<HTMLElement>,
+    isLink: boolean,
+    isImage: boolean
+  ) => {
+    event.preventDefault();
+    dropRef.current?.classList.remove(styles.dragover);
 
-                let target = event.target as HTMLElement;
-                const isLink = event.dataTransfer.types.includes("text/uri-list");
-                const isImage = event.dataTransfer.types.includes("Files") && Array.from(event.dataTransfer.items).some(item => item.type.startsWith("image/"));
-                if (isLink || isImage) {
-                    event.preventDefault();
-                    let target = event.target as HTMLElement;
-                    inputRef.current.classList.add(styles.dragover);
-                }
-            }}
-            onDragLeave={(event: React.DragEvent<HTMLDivElement>) => {
-                event.stopPropagation();
+    if (!isLink && !isImage) {
+      console.warn("Drop event does not contain a link or image");
+      return;
+    }
 
-                let target = event.target as HTMLElement;
-                console.log('Drag leave: %o %o', event, target.dataset.name);
-                if (target.dataset.name === "dropzone") {
-                    target.classList.remove(styles.dragover);
-                    console.log('Remove dragover');
-                }
-            }}
-            onDrop={(event: React.DragEvent<HTMLDivElement>) => {
-                console.log('Drop: %o', event);
-                event.stopPropagation();
-                event.preventDefault();
-                inputRef.current.classList.remove(styles.dragover);
+    if (isLink) {
+      const url = event.dataTransfer.getData("text/uri-list");
+      handleLinkDrop(url);
+    } else {
+      // Handle image drop
+
+      // Upload file and store in OPFS
+      const files = Array.from(event.dataTransfer.files);
+      handleFileDrop(files);
+    }
+  };
 
-                const isLink = event.dataTransfer.types.includes("text/uri-list");
-                const isImage = event.dataTransfer.types.includes("Files") && Array.from(event.dataTransfer.items).some(item => item.type.startsWith("image/"));
+  const dragHandler = (event: React.DragEvent<HTMLElement>) => {
+    event.stopPropagation();
+    const isLink = event.dataTransfer.types.includes("text/uri-list");
+    const isImage =
+      event.dataTransfer.types.includes("Files") &&
+      Array.from(event.dataTransfer.items).some((item) =>
+        item.type.startsWith("image/")
+      );
 
-                if (!isLink && !isImage) {
-                    console.warn('Drop event does not contain a link or image');
-                    return;
-                }
-                else if (isLink) {
-                    console.log('Drop event contains a link');
-                    const url = event.dataTransfer.getData("text/uri-list");
+    switch (event.type) {
+      case "dragenter":
+        if (isLink || isImage) {
+          event.preventDefault();
+          dropRef.current?.classList.add(styles.dragover);
+        }
+        break;
 
-                    if (!typeingMessage.images) {
-                        typeingMessage.images = [];
-                    }
-                    // check if the url is an image
-                    const proxy = import.meta.env.VITE_PROXY_URL || "https://poxy.gawron.cloud/api";
-                    let fetchUrl = `${proxy}?url=${encodeURIComponent(url)}`;
-                    fetch(fetchUrl, { method: 'GET' })
-                        .then((response) => {
-                            if (response.headers.get('content-type')?.startsWith('image')) {
-                                typeingMessage.images.push({ url });
-                                setState({ typeingMessage });
-                            }
-                            else {
-                                toaster.create({
-                                    title: t("not_image"),
-                                    description: t("not_image_description"),
-                                    duration: 5000,
-                                    type: "warning",
-                                })
-                            }
-                        })
-                        .catch((error) => {
-                            console.error('Error: %o', error);
-                            toaster.create({
-                                title: t("error_occurred"),
-                                description: "error.message",
-                                duration: 5000,
-                                type: "error",
-                            })
-                        });
-                } else {
-                    // Handle image drop
+      case "dragover":
+        if (isLink || isImage) {
+          event.preventDefault();
+        }
+        break;
 
-                    // Upload file and store in OPFS
-                    const files = Array.from(event.dataTransfer.files);
-                    console.log('Dropped files: %o', files);
-                    if (files.length === 0) {
-                        console.warn('No files dropped');
-                        return;
-                    }
-                    if (!typeingMessage.images) {
-                        typeingMessage.images = [];
-                    }
-                    files.forEach(file => {
-                        if (file.type.startsWith("image/")) {
-                            console.log('Processing dropped image file: %o', file);
-                            const reader = new FileReader();
-                            reader.onload = async (e) => {
-                                try {
-                                    const opfs = await navigator.storage.getDirectory();
-                                    const fileHandle = await opfs.getFileHandle(file.name, { create: true });
-                                    const writable = await fileHandle.createWritable();
-                                    await writable.write(e.target?.result);
-                                    await writable.close();
-                                    console.log('File written to OPFS: %o', fileHandle);
-                                } catch (error) {
-                                    console.error("Error writing file to OPFS: %o", error);
-                                }
-                                typeingMessage.images.push({ name: file.name, size: file.size, lastModified: file.lastModified, type: file.type });
-                                setState({ typeingMessage });
-                            }
-                            reader.onerror = (error) => {
-                                console.error('Error reading file: %o', error);
-                                toaster.create({
-                                    title: t("error_occurred"),
-                                    description: error.message,
-                                    duration: 5000,
-                                    type: "error",
-                                });
-                            }
-                            reader.readAsArrayBuffer(file);
-                        }
-                    });
-                }
+      case "dragleave":
+        dropRef.current?.classList.remove(styles.dragover);
+        break;
+
+      case "drop":
+        handleDrop(event, isLink, isImage);
+        break;
+    }
+  };
+
+  return (
+    <div className={styles.bar} data-testid="MessageInputBar">
+      <div
+        className={styles.dropzone}
+        ref={dropRef}
+        data-name="dropzone"
+        style={{ pointerEvents: "none" }}
+      >
+        <input
+          type="file"
+          multiple
+          accept="image/*"
+          style={{
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            opacity: 0,
+            pointerEvents: "auto",
+          }}
+          ref={fileInputRef}
+          onChange={handleFileInputChange}
+          onDragOver={dragHandler}
+          onDragEnter={dragHandler}
+          onDragLeave={dragHandler}
+          onDrop={dragHandler}
+          data-testid="file-input"
+        />
+      </div>
+      <Stack
+        className={styles.bar_inner}
+        width="100%"
+        borderColor={is.inputing ? "blue.500" : "gray.200"}
+        borderWidth={1}
+        borderStyle="solid"
+        borderRadius="md"
+        padding={1}
+        onDragOver={dragHandler}
+        onDragEnter={dragHandler}
+      >
+        {is.thinking && (
+          <HStack justify={"flex-end"}>
+            <Progress.Root size="xs" width="20em" value={null}>
+              <Progress.Label>
+                {is.tool ? t(is.tool) : t("thinking")}
+              </Progress.Label>
+              <Progress.Track>
+                <Progress.Range />
+              </Progress.Track>
+            </Progress.Root>
+            <Button variant="ghost" title={t("cancel")} onClick={stopResponse}>
+              {t("cancel")} <MdOutlineCancel />
+            </Button>
+          </HStack>
+        )}
+        {options.general.codeEditor ? (
+          <CodeEditor
+            language="Python"
+            minHeight="6lh"
+            onFocus={() => setIs({ inputing: true })}
+            onBlur={() => setIs({ inputing: false })}
+            value={typeingMessage?.content || ""}
+            placeholder={t("Please enter Python code.")}
+            onChange={(ev) => setMessage(ev.target.value)}
+            style={{
+              backgroundColor: "var(--chakra-colors-bg)",
+              fontFamily:
+                "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+              fontSize: "12pt",
             }}
-            ref={inputRef}
+          />
+        ) : (
+          <Textarea
+            data-testid="ChatTextArea"
+            value={typeingMessage?.content || ""}
+            onFocus={() => setIs({ inputing: true })}
+            onBlur={() => setIs({ inputing: false })}
+            variant="outline"
+            autoresize
+            borderWidth={0}
+            outlineWidth={0}
+            placeholder={t("Enter something....")}
+            className={styles.textarea}
+            onDragOver={dragHandler}
+            onDragEnter={dragHandler}
+            onChange={(ev: BaseSyntheticEvent) => {
+              typeingMessage.content = ev.target.value;
+              setInputMessage(ev.target.value);
+            }}
+          />
+        )}
+        {
+          <HStack
+            justify={"flex-end"}
+            paddingInlineStart={2}
+            paddingInlineEnd={2}
+          >
+            {typeingMessage?.images?.map((image, index) => {
+              return (
+                <Box key={image.id || index} position="relative">
+                  <OPFSImage src={image.url} alt={image.name} />
+                  <IconButton
+                    aria-label="Delete image"
+                    size="xs"
+                    position="absolute"
+                    top={0}
+                    right={0}
+                    colorPalette="red"
+                    variant="solid"
+                    onClick={() => handleDeleteImage(index)}
+                    style={{ transform: "translate(50%, -50%)" }}
+                    rounded="full"
+                  >
+                    <MdOutlineCancel />
+                  </IconButton>
+                </Box>
+              );
+            })}
+          </HStack>
+        }
+        <HStack
+          justify={"flex-end"}
+          paddingInlineStart={2}
+          paddingInlineEnd={2}
         >
-
-            <Stack className={styles.bar_inner}
-                width="100%"
-                borderColor={is.inputing ? 'blue.500' : 'gray.200'}
-                borderWidth={1}
-                borderStyle='solid'
-                borderRadius="md"
-                padding={1}
-                onDragLeave={(event: React.DragEvent<HTMLDivElement>) => {
-                    event.stopPropagation();
-                    console.log('Drag leave: %o', event);
-                }}
-            >
-                {
-                    is.thinking &&
-                    <HStack justify={"flex-end"}>
-                        <Progress.Root size="xs" width="20em" value={null}>
-                            <Progress.Label>
-                                {is.tool ? t(is.tool) : t("thinking")}
-                            </Progress.Label>
-                            <Progress.Track>
-                                <Progress.Range />
-                            </Progress.Track>
-                        </Progress.Root>
-                        <Button variant="ghost" title={t("cancel")} onClick={stopResponse}>
-                            {t("cancel")} <MdOutlineCancel />
-                        </Button>
-                    </HStack>
-                }
-                {
-                    options.general.codeEditor ?
-                        <CodeEditor language='Python' minHeight="6lh"
-                            onFocus={() => setIs({ inputing: true })} onBlur={() => setIs({ inputing: false })}
-                            value={typeingMessage?.content || ''}
-                            placeholder={t("Please enter Python code.")}
-                            onChange={(ev) => setMessage(ev.target.value)}
-                            style={{
-                                backgroundColor: "var(--chakra-colors-bg)",
-                                fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
-                                fontSize: '12pt',
-                            }}
-                        /> :
-                        <Textarea data-testid="ChatTextArea" value={typeingMessage?.content || ''}
-                            onFocus={() => setIs({ inputing: true })} onBlur={() => setIs({ inputing: false })}
-                            variant="outline" autoresize
-                            borderWidth={0} outlineWidth={0}
-                            placeholder={t("Enter something....")}
-                            className={styles.textarea}
-                            onChange={(ev: BaseSyntheticEvent) => {
-                                typeingMessage.content = ev.target.value;
-                                setMessage(typeingMessage.content);
-                            }} />
-                }
-                {
-                    <HStack justify={"flex-end"} paddingInlineStart={2} paddingInlineEnd={2}>
-                        {
-                            typeingMessage?.images?.map((image, index) => {
-                                return (
-                                    <LazyImage key={index} name={image.name} url={image.url} />
-                                )
-                            })
-                        }
-                    </HStack>
-                }
-                <HStack justify={"flex-end"} paddingInlineStart={2} paddingInlineEnd={2}>
-                    <Switch size="sm" colorScheme="blue" className={styles.editorToggle} marginInlineEnd="auto" checked={options.general.codeEditor}
-                        onCheckedChange={(ev) => setGeneral({ codeEditor: ev.checked })}>
-                        {t("Code Editor")}
-                    </Switch>
-                    <Button
-                        variant="outline"
-                        onClick={() => {
-                            typeingMessage.content = "";
-                            clearTypeing()
-                        }}
-                        data-testid="ClearMessageBtn">
-                        {t("clear")}
-                    </Button>
-                    {
-                        recognition ?
-                            <IconButton variant="outline" className={voiceClasses} onClick={() => {
-                                if (recognitionActive) {
-                                    recognition.stop();
-                                    setRecognitionActive(false);
-                                }
-                                else {
-                                    recognition.start();
-                                    recognition.onresult = (event) => {
-                                        if (event.results.length > 0) {
-                                            console.log("MessageBar: recognition result: %o", event.results[0])
-                                            const result = event.results[0][0];
-                                            typeingMessage.content = (typeingMessage.content || "") + result.transcript;
-                                            setMessage(typeingMessage.content);
-                                        }
-                                    }
-                                    setRecognitionActive(true);
-                                }
-                            }} data-testid="VoiceMessageBtn">{recognitionActive ? <CiMicrophoneOff /> : <CiMicrophoneOn />}</IconButton>
-                            : null
+          <Switch
+            size="sm"
+            colorScheme="blue"
+            className={styles.editorToggle}
+            marginInlineEnd="auto"
+            checked={options.general.codeEditor}
+            onCheckedChange={(ev) => setGeneral({ codeEditor: ev.checked })}
+          >
+            {t("Code Editor")}
+          </Switch>
+          <IconButton
+            variant="outline"
+            aria-label={t("upload_file") || "Upload file"}
+            onClick={() => fileInputRef.current?.click()}
+            data-testid="UploadFileBtn"
+          >
+            <MdOutlineFileUpload />
+          </IconButton>
+          <Button
+            variant="outline"
+            onClick={() => {
+              typeingMessage.content = "";
+              clearTypeing();
+            }}
+            data-testid="ClearMessageBtn"
+          >
+            {t("clear")}
+          </Button>
+          {recognition ? (
+            <IconButton
+              variant="outline"
+              className={voiceClasses}
+              onClick={() => {
+                if (recognitionActive) {
+                  recognition.stop();
+                  setRecognitionActive(false);
+                } else {
+                  recognition.start();
+                  recognition.onresult = (event) => {
+                    if (event.results.length > 0) {
+                      const result = event.results[0][0];
+                      typeingMessage.content =
+                        (typeingMessage.content || "") + result.transcript;
+                      setMessage(typeingMessage.content);
                     }
-                    <Button
-                        colorPalette={is.thinking ? "gray" : "blue"}
-                        type="submit"
-                        disabled={is.thinking || !typeingMessage?.content}
-                        onClick={sendMessage}
-                        data-testid="SendMessageBtn">{t("send")}
-                        {
-                            options.general.codeEditor ||
-                            <Kbd size="sm">{t(options.general.sendCommand)}</Kbd>
-                        }
-                    </Button>
-                </HStack>
-            </Stack>
-        </div>
-    )
+                  };
+                  setRecognitionActive(true);
+                }
+              }}
+              data-testid="VoiceMessageBtn"
+            >
+              {recognitionActive ? <CiMicrophoneOff /> : <CiMicrophoneOn />}
+            </IconButton>
+          ) : null}
+          <Button
+            colorPalette={is.thinking ? "gray" : "blue"}
+            type="submit"
+            disabled={is.thinking || !typeingMessage?.content}
+            onClick={() => {
+              typeingMessage.content = inputMessage;
+              typeingMessage.role = "user";
+              setMessage(typeingMessage.content);
+              sendMessage();
+            }}
+            data-testid="SendMessageBtn"
+          >
+            {t("send")}
+            {options.general.codeEditor || (
+              <Kbd size="sm">{t(options.general.sendCommand)}</Kbd>
+            )}
+          </Button>
+        </HStack>
+      </Stack>
+    </div>
+  );
 }
diff --git a/src/chat/MessageMenu.tsx b/src/chat/MessageMenu.tsx
index 5913ac24..13368bad 100644
--- a/src/chat/MessageMenu.tsx
+++ b/src/chat/MessageMenu.tsx
@@ -3,9 +3,20 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useGlobal } from "./context";
 import { useApps } from "./apps/context";
 import React from "react";
-import { Card, HStack, IconButton, Kbd, Dialog, SimpleGrid, Spacer, Text, Heading, Button } from "@chakra-ui/react";
-import { classnames } from '../components/utils'
-import styles from './style/menu.module.less';
+import {
+  Card,
+  HStack,
+  IconButton,
+  Kbd,
+  Dialog,
+  SimpleGrid,
+  Spacer,
+  Text,
+  Heading,
+  Button,
+} from "@chakra-ui/react";
+import { classnames } from "../components/utils";
+import styles from "./style/menu.module.less";
 import { useTranslation } from "react-i18next";
 import { IoChatboxOutline, IoCloseOutline } from "react-icons/io5";
 import { IoIosClose } from "react-icons/io";
@@ -15,138 +26,202 @@ import { Message } from "./context/types";
 import { Toaster, toaster } from "../components/ui/toaster";
 
 export function MessageMenu() {
-    const { is, setIs, setState, newChat, removeChat, options, user, chat, currentApp, currentChat } = useGlobal();
-    const { apps, category } = useApps();
-    const { t } = useTranslation();
+  const {
+    is,
+    setIs,
+    setState,
+    newChat,
+    removeChat,
+    options,
+    user,
+    chat,
+    currentApp,
+    currentChat,
+  } = useGlobal();
+  const { apps, category } = useApps();
+  const { t } = useTranslation();
 
-    const [menuOpen, setMenuOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
 
-    const currentRef = useCallback((node) => {
-        console.log('Current ref: %o', node);
-        if (node) {
-            node.scrollIntoView({ behavior: "smooth", block: "center" });
-            console.log('Scrolling to current ref');
-        }
-    }, [menuOpen]);
+  const currentRef = useCallback(
+    (node) => {
+      console.log("Current ref: %o", node);
+      if (node) {
+        node.scrollIntoView({ behavior: "smooth", block: "center" });
+        console.log("Scrolling to current ref");
+      }
+    },
+    [menuOpen]
+  );
 
-    const deleteChat = (id) => {
-        const index = chat.findIndex(item => item.id == id);
-        removeChat(index);
-    };
+  const deleteChat = (id) => {
+    const index = chat.findIndex((item) => item.id == id);
+    removeChat(index);
+  };
 
-    function getTitle(messages: Message[]): React.ReactNode | Iterable<React.ReactNode> {
-        const content = messages[0]?.content;
-        if (typeof content === 'string') {
-            return content;
-        }
-        else if (Array.isArray(content)) {
-            let array = content as any[];
-            return array.find((item: { type: string; text: string }) => item.type == "input_text")?.text || t("empty_chat");
-        }
-        else return t("empty_chat");
-    }
+  function getTitle(
+    messages: Message[]
+  ): React.ReactNode | Iterable<React.ReactNode> {
+    const content = messages[0]?.content;
+    if (typeof content === "string") {
+      return content;
+    } else if (Array.isArray(content)) {
+      const array = content as any[];
+      return (
+        array.find(
+          (item: { type: string; text: string }) => item.type == "input_text"
+        )?.text || t("empty_chat")
+      );
+    } else return t("empty_chat");
+  }
 
-    function getImage(messages: Message[]): React.ReactNode | Iterable<React.ReactNode> {
-        const content = messages[0]?.content;
-        if (typeof content === 'string') {
-            return null;
-        }
-        else if (Array.isArray(content)) {
-            let array = content as any[];
-            let url = array.find((item: { type: string; text: string }) => item.type == "input_image")?.image_url;
-            if (url) {
-                return <img src={url} alt="image" className={styles.image} />;
-            }
-        }
+  function getImage(
+    messages: Message[]
+  ): React.ReactNode | Iterable<React.ReactNode> {
+    const content = messages[0]?.content;
+    if (typeof content === "string") {
+      return null;
+    } else if (Array.isArray(content)) {
+      const array = content as any[];
+      const url = array.find(
+        (item: { type: string; text: string }) => item.type == "input_image"
+      )?.image_url;
+      if (url) {
+        return <img src={url} alt="image" className={styles.image} />;
+      }
     }
+  }
 
-    return (
-        <Dialog.Root open={menuOpen} size="full" >
-            <Dialog.Trigger asChild>
-                <IconButton variant="ghost" title={t("chat_history")}
-                    onClick={() => setMenuOpen(true)}
-                >
-                    <RiChatHistoryLine aria-label={t("chat_history")} />
-                </IconButton>
-            </Dialog.Trigger>
-            <Dialog.Backdrop />
-            <Dialog.Positioner>
-                <Dialog.Content className={styles.dialog}>
-                    <Dialog.CloseTrigger asChild>
-                        <IconButton variant="ghost" title={t("close")}
-                            onClick={() => setMenuOpen(false)}>
-                            <IoCloseOutline />
-                        </IconButton>
-                    </Dialog.CloseTrigger>
-                    <Dialog.Header>
-                        <Dialog.Title>
-                            {t("chat_history")}
-                        </Dialog.Title>
-                    </Dialog.Header>
-                    <Dialog.Body className={styles.dialog_body}>
-                        <SimpleGrid minChildWidth="sm" gap={"2em"} className={styles.grid}>
-                            {chat
-                                // sort currentChat to the top
-                                //.toSorted((a, b) => a.id == chat[currentChat].id ? -1 : b.id == chat[currentChat].id ? 1 : 0)
-                                .map((c, index) => {
-
-                                    const itemProps = chat[currentChat]?.id == c.id ? { ref: currentRef, className: styles.current } : {};
+  return (
+    <Dialog.Root open={menuOpen} size="full">
+      <Dialog.Trigger asChild>
+        <IconButton
+          variant="ghost"
+          title={t("chat_history")}
+          onClick={() => setMenuOpen(true)}
+        >
+          <RiChatHistoryLine aria-label={t("chat_history")} />
+        </IconButton>
+      </Dialog.Trigger>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content className={styles.dialog}>
+          <Dialog.CloseTrigger asChild>
+            <IconButton
+              variant="ghost"
+              title={t("close")}
+              onClick={() => setMenuOpen(false)}
+            >
+              <IoCloseOutline />
+            </IconButton>
+          </Dialog.CloseTrigger>
+          <Dialog.Header>
+            <Dialog.Title>{t("chat_history")}</Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body className={styles.dialog_body}>
+            <SimpleGrid minChildWidth="sm" gap={"2em"} className={styles.grid}>
+              {chat
+                // sort currentChat to the top
+                //.toSorted((a, b) => a.id == chat[currentChat].id ? -1 : b.id == chat[currentChat].id ? 1 : 0)
+                .map((c, index) => {
+                  const itemProps =
+                    chat[currentChat]?.id == c.id
+                      ? { ref: currentRef, className: styles.current }
+                      : {};
 
-
-                                    return (
-                                        <Card.Root size="sm" key={c.id}
-                                            className={styles.card} {...itemProps}
-                                            onClick={(e) => {
-                                                console.log('Clicking on chat %o', c.id);
-                                                setState({ currentChat: index });
-                                            }}>
-                                            <Card.Header>
-                                                <HStack width={"100%"} justifyContent="space-between" alignItems="baseline">
-                                                    <Heading>
-                                                        {c.title}
-                                                    </Heading>
-                                                    <Spacer />
-                                                    <Text textStyle="xs">{new Date(c.ct).toLocaleString()}</Text>
-                                                </HStack>
-                                            </Card.Header>
-                                            <Card.Body>
-                                                <Card.Description className={styles.description} asChild>
-                                                    <Text>{getTitle(c.messages.filter((m) => m.role == "user"))}</Text>
-                                                </Card.Description>
-                                                {getImage(c.messages.filter((m) => m.role == "user"))}
-                                            </Card.Body>
-                                            <Card.Footer>
-                                                <HStack width={"100%"} justifyContent="space-between" alignItems="center">
-                                                    <IconButton variant="ghost" size="xs" focusRing="none" title={t("delete_chat")} onClick={() => deleteChat(c.id)}><MdOutlineDeleteOutline /></IconButton>
-                                                    <Spacer />
-                                                    <Text>{t('count_messages', { count: c.messages?.filter(item => item.role !== "system").length })}</Text>
-                                                </HStack>
-                                            </Card.Footer>
-                                        </Card.Root>
-                                    )
-                                })}
-                        </SimpleGrid>
-                    </Dialog.Body>
-                    <Dialog.Footer>
-                        <HStack width={"100%"} justifyContent="space-between" alignItems="center">
-                            <Button
-                                size="xs"
-                                focusRing="none"
-                                title={t("new_chat")}
-                                variant="outline"
-                                onClick={() => {
-                                    newChat(currentApp)
-                                }}
-                            ><RiChatNewLine />{t("new_chat")}</Button>
-                            <Spacer />
-                            <Button type="primary"
-                                onClick={() => setMenuOpen(false)}>
-                                {t("close")}
-                            </Button>
+                  return (
+                    <Card.Root
+                      size="sm"
+                      key={c.id}
+                      className={styles.card}
+                      {...itemProps}
+                      onClick={(e) => {
+                        console.log("Clicking on chat %o", c.id);
+                        setState({ currentChat: index });
+                      }}
+                    >
+                      <Card.Header>
+                        <HStack
+                          width={"100%"}
+                          justifyContent="space-between"
+                          alignItems="baseline"
+                        >
+                          <Heading>{c.title}</Heading>
+                          <Spacer />
+                          <Text textStyle="xs">
+                            {new Date(c.ct).toLocaleString()}
+                          </Text>
+                        </HStack>
+                      </Card.Header>
+                      <Card.Body>
+                        <Card.Description
+                          className={styles.description}
+                          asChild
+                        >
+                          <Text>
+                            {getTitle(
+                              c.messages.filter((m) => m.role == "user")
+                            )}
+                          </Text>
+                        </Card.Description>
+                        {getImage(c.messages.filter((m) => m.role == "user"))}
+                      </Card.Body>
+                      <Card.Footer>
+                        <HStack
+                          width={"100%"}
+                          justifyContent="space-between"
+                          alignItems="center"
+                        >
+                          <IconButton
+                            variant="ghost"
+                            size="xs"
+                            focusRing="none"
+                            title={t("delete_chat")}
+                            onClick={() => deleteChat(c.id)}
+                          >
+                            <MdOutlineDeleteOutline />
+                          </IconButton>
+                          <Spacer />
+                          <Text>
+                            {t("count_messages", {
+                              count: c.messages?.filter(
+                                (item) => item.role !== "system"
+                              ).length,
+                            })}
+                          </Text>
                         </HStack>
-                    </Dialog.Footer>
-                </Dialog.Content>
-            </Dialog.Positioner>
-        </Dialog.Root >
-    );
-}
\ No newline at end of file
+                      </Card.Footer>
+                    </Card.Root>
+                  );
+                })}
+            </SimpleGrid>
+          </Dialog.Body>
+          <Dialog.Footer>
+            <HStack
+              width={"100%"}
+              justifyContent="space-between"
+              alignItems="center"
+            >
+              <Button
+                size="xs"
+                focusRing="none"
+                title={t("new_chat")}
+                variant="outline"
+                onClick={() => {
+                  newChat(currentApp);
+                }}
+              >
+                <RiChatNewLine />
+                {t("new_chat")}
+              </Button>
+              <Spacer />
+              <Button type="primary" onClick={() => setMenuOpen(false)}>
+                {t("close")}
+              </Button>
+            </HStack>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+}
diff --git a/src/chat/MessageRender.tsx b/src/chat/MessageRender.tsx
index 56a1c6ea..8eae13cb 100644
--- a/src/chat/MessageRender.tsx
+++ b/src/chat/MessageRender.tsx
@@ -1,37 +1,46 @@
-import React, { memo, forwardRef, useEffect, useRef, useState, useMemo } from 'react'
-import { Skeleton, SkeletonText } from '@chakra-ui/react'
+import React, {
+  memo,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+} from "react";
+import { Skeleton, SkeletonText } from "@chakra-ui/react";
 import { IconButton } from "@chakra-ui/react";
-import { Tooltip } from "../components/ui/tooltip"
+import { Tooltip } from "../components/ui/tooltip";
 import { LuClipboardCheck } from "react-icons/lu";
 import { LuClipboardCopy } from "react-icons/lu";
-import MarkdownHooks from 'react-markdown'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { oneLight, oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import { useGlobal } from './context'
-import remarkMath from 'remark-math'
-import remarkGfm from 'remark-gfm'
-import remarkBreaks from 'remark-breaks'
-import rehypeKatex from 'rehype-katex'
+import MarkdownHooks from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+  oneLight,
+  oneDark,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+import { useGlobal } from "./context";
+import remarkMath from "remark-math";
+import remarkGfm from "remark-gfm";
+import remarkBreaks from "remark-breaks";
+import rehypeKatex from "rehype-katex";
 import rehypeRaw from "rehype-raw";
-import './style/markdown.less'
-import 'katex/dist/katex.min.css'
-import { useTranslation } from 'react-i18next';
+import "./style/markdown.less";
+import "katex/dist/katex.min.css";
+import { useTranslation } from "react-i18next";
 
 export const MessageRender = (props) => {
-  const { options } = useGlobal()
-  const style = options.general.theme === 'dark' ? oneDark : oneLight
+  const { options } = useGlobal();
+  const style = options.general.theme === "dark" ? oneDark : oneLight;
 
-  let textRef = useRef(null);
+  const textRef = useRef(null);
 
   function CopyIcon(props) {
-    const { value, className } = props
+    const { value, className } = props;
     const [icon, setIcon] = useState(LuClipboardCopy);
     const { t } = useTranslation();
 
-
     const handleCopy = async (e) => {
       try {
-        console.log('handleCopy: %o', textRef.current.innerText);
+        console.log("handleCopy: %o", textRef.current.innerText);
 
         const text = textRef.current.innerText;
         await navigator.clipboard.writeText(text);
@@ -40,68 +49,69 @@ export const MessageRender = (props) => {
           setIcon(LuClipboardCopy);
         }, 1500);
       } catch (err) {
-        console.error('Failed to copy: ', err);
+        console.error("Failed to copy: ", err);
       }
-    }
+    };
 
     return (
-      <span className="copy" onClick={handleCopy} >
+      <span className="copy" onClick={handleCopy}>
         {icon}
       </span>
-    )
+    );
   }
 
-  const rendered = useMemo(() => (<MarkdownHooks
-    children={props.children}
-    remarkPlugins={[remarkMath, remarkGfm, remarkBreaks]}
-    rehypePlugins={[rehypeKatex, rehypeRaw]}
-    components={{
-      code({ node, inline, className, children, ...rest }) {
-        const match = /language-(\w+)/.exec(className || '')
-        return !inline && match ? (
-          <>
-            <div className="code-header">
-              <CopyIcon />
-            </div>
-            <SyntaxHighlighter ref={textRef}
-              {...rest}
-              children={children}
-              style={style}
-              language={match[1]}
-              PreTag="div"
-            />
-          </>
-
-        ) : (
-          <code {...props}>
-            {children}
-          </code>
-        )
-      }
-    }}
-  />), [props.children]);
-
-  return (
-    rendered
-  )
-}
+  const rendered = useMemo(
+    () => (
+      <MarkdownHooks
+        children={props.children}
+        remarkPlugins={[remarkMath, remarkGfm, remarkBreaks]}
+        rehypePlugins={[rehypeKatex, rehypeRaw]}
+        components={{
+          code({ node, inline, className, children, ...rest }) {
+            const match = /language-(\w+)/.exec(className || "");
+            return !inline && match ? (
+              <>
+                <div className="code-header">
+                  <CopyIcon />
+                </div>
+                <SyntaxHighlighter
+                  ref={textRef}
+                  {...rest}
+                  children={children}
+                  style={style}
+                  language={match[1]}
+                  PreTag="div"
+                />
+              </>
+            ) : (
+              <code {...props}>{children}</code>
+            );
+          },
+        }}
+      />
+    ),
+    [props.children]
+  );
+
+  return rendered;
+};
 
 type RendererProps = {
   children: React.ReactNode;
 };
 
-const Renderer = forwardRef<HTMLDivElement, RendererProps>(({ children, ...props }, ref) => (
-  <div ref={ref} className='z-ui-markdown'>
-    <MessageRender {...props}>
-      {children}
-    </MessageRender>
-  </div>
-));
+const Renderer = forwardRef<HTMLDivElement, RendererProps>(
+  ({ children, ...props }, ref) => (
+    <div ref={ref} className="z-ui-markdown">
+      <MessageRender {...props}>{children}</MessageRender>
+    </div>
+  )
+);
 
 type LazyRendererProps = {
   children: any;
-  isVisible: boolean
-}
+  isVisible?: boolean;
+};
 
 export const LazyRenderer = (props: LazyRendererProps) => {
   const [isVisible, setIsVisible] = useState(false);
@@ -125,10 +135,9 @@ export const LazyRenderer = (props: LazyRendererProps) => {
     };
   }, []);
 
-  return isVisible ?
-    <Renderer ref={ref} >
-      {props.children}
-    </Renderer>
-    :
+  return isVisible ? (
+    <Renderer ref={ref}>{props.children}</Renderer>
+  ) : (
     <SkeletonText ref={ref} flex="1" noOfLines={10} gap={4} variant="pulse" />
-}
+  );
+};
diff --git a/src/chat/UsageInformationDialog.tsx b/src/chat/UsageInformationDialog.tsx
new file mode 100644
index 00000000..40c19f5b
--- /dev/null
+++ b/src/chat/UsageInformationDialog.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import {
+    Dialog,
+    IconButton,
+    CloseButton,
+    Portal,
+} from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { AiOutlineBarChart } from "react-icons/ai";
+import { ErrorBoundary } from "react-error-boundary";
+import DashboardChart from "./DashboardChart";
+import styles from "./style/menu.module.less";
+
+const ErrorFallback = () => {
+    const { t } = useTranslation();
+    return <div>{t("error")}</div>;
+};
+
+export function UsageInformationDialog() {
+    const { t } = useTranslation();
+
+    return (
+        <Dialog.Root lazyMount size="cover">
+            <Dialog.Trigger data-testid="UsageInformationBtn" asChild>
+                <IconButton variant="ghost" title={t("usage_information")}>
+                    <AiOutlineBarChart aria-label={t("usage_information")} />
+                </IconButton>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content data-testid="UsageInformation">
+                        <Dialog.Header>
+                            <Dialog.Title fontWeight="bold" paddingBlockEnd={"15px"}>
+                                {t("usage_information")}
+                            </Dialog.Title>
+                            <Dialog.CloseTrigger asChild>
+                                <CloseButton size="sm" />
+                            </Dialog.CloseTrigger>
+                        </Dialog.Header>
+                        <Dialog.Body className={styles.dashboard}>
+                            <ErrorBoundary FallbackComponent={ErrorFallback}>
+                                <DashboardChart />
+                            </ErrorBoundary>
+                        </Dialog.Body>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    );
+}
diff --git a/src/chat/apps/context/action.js b/src/chat/apps/context/action.js
index fb5e4bf1..e178107b 100644
--- a/src/chat/apps/context/action.js
+++ b/src/chat/apps/context/action.js
@@ -8,7 +8,6 @@ export default function action(state, dispatch) {
   return {
     setState,
     setCurrent(current) {
-
       console.log("setCurrent", current);
       setState({
         current,
@@ -19,6 +18,6 @@ export default function action(state, dispatch) {
       setState({
         currentApp,
       });
-    }
+    },
   };
 }
diff --git a/src/chat/apps/context/initState.js b/src/chat/apps/context/initState.js
index b9a1a97b..f77a32bd 100644
--- a/src/chat/apps/context/initState.js
+++ b/src/chat/apps/context/initState.js
@@ -28,8 +28,7 @@ export const initApps = {
       category: 2,
       title: "Python Tutor",
       desc: "",
-      content:
-        `Du bist ein Tutor in einem Python-Kurs. 
+      content: `Du bist ein Tutor in einem Python-Kurs. 
         Stelle dem Benutzer eine einfache Programmieraufgabe und gib ihm Hinweise, um ihm zu helfen, den Code zu schreiben. 
         Warte dann auf die Antwort des Benutzers!! 
         Gib ihm Feedback und erkläre ihm, was er falsch gemacht hat. 
@@ -38,6 +37,5 @@ export const initApps = {
       botStarts: true,
       id: 2,
     },
-
   ],
 };
diff --git a/src/chat/apps/index.tsx b/src/chat/apps/index.tsx
index c2214f40..aceefbc3 100644
--- a/src/chat/apps/index.tsx
+++ b/src/chat/apps/index.tsx
@@ -1,20 +1,19 @@
-import React from 'react'
-import { Button, Card, Heading } from '@chakra-ui/react'
-import { AppsProvider, useApps } from './context'
-import { useGlobal } from '../context'
-import { classnames } from '../../components/utils'
-import styles from './apps.module.less'
-import { useTranslation } from 'react-i18next'
-
+import React from "react";
+import { Button, Card, Heading } from "@chakra-ui/react";
+import { AppsProvider, useApps } from "./context";
+import { useGlobal } from "../context";
+import { classnames } from "../../components/utils";
+import styles from "./apps.module.less";
+import { useTranslation } from "react-i18next";
 
 export function AppItem(props) {
   const { t } = useTranslation();
-  const { setCurrent, apps, dispatch } = useApps()
-  const { setApp, newChat, currentApp } = useGlobal()
+  const { setCurrent, apps, dispatch } = useApps();
+  const { setApp, newChat, currentApp } = useGlobal();
 
   const { category } = props;
-  const app = apps.filter(item => item.category === category)[0]
-  console.log("AppItem: %o %o", currentApp, props)
+  const app = apps.filter((item) => item.category === category)[0];
+  console.log("AppItem: %o %o", currentApp, props);
   return (
     <Card.Root variant={currentApp?.id === props?.id ? "elevated" : "subtle"}>
       <Card.Header>
@@ -26,46 +25,61 @@ export function AppItem(props) {
       <Card.Footer flexDirection={"column"} alignItems={"flex-end"}>
         <Button
           type="primary"
-          onClick={() => { setApp(app); newChat(app) }}>{t("Start Chat")}</Button>
+          onClick={() => {
+            setApp(app);
+            newChat(app);
+          }}
+        >
+          {t("Start Chat")}
+        </Button>
       </Card.Footer>
     </Card.Root>
-  )
+  );
 }
 
 export function Empty() {
   return (
-    <div className={classnames(styles.empty, 'flex-column')}>
-      <div className={classnames(styles.icon, 'ico-prompts')} />
+    <div className={classnames(styles.empty, "flex-column")}>
+      <div className={classnames(styles.icon, "ico-prompts")} />
       <div className={styles.empty_text}>None-apps</div>
     </div>
-  )
+  );
 }
 
 export function Category(props) {
-  const { setState, apps, current, category } = useApps()
-  const list = apps.filter(item => item.category === category[props.index].id)
+  const { setState, apps, current, category } = useApps();
+  const list = apps.filter(
+    (item) => item.category === category[props.index].id
+  );
   return (
     <div>
-      <Heading paddingInlineStart={2} paddingBlockStart={4} paddingBlockEnd={2} as="h2" >
+      <Heading
+        paddingInlineStart={2}
+        paddingBlockStart={4}
+        paddingBlockEnd={2}
+        as="h2"
+      >
         <span className={classnames(styles.icon, `ico-${props.icon}`)}></span>
         {props?.title}
       </Heading>
       <div>
-        {list.map((item, index) => <AppItem {...item} key={index} />)}
+        {list.map((item, index) => (
+          <AppItem {...item} key={index} />
+        ))}
       </div>
-    </div >
-  )
+    </div>
+  );
 }
 
 export function AppContainer() {
-  const { category, dispatch } = useApps()
+  const { category, dispatch } = useApps();
   return (
     <div className={styles.apps} data-testid="AppsList">
-      {
-        category.map((item, index) => <Category index={index} {...item} key={item.id} />)
-      }
+      {category.map((item, index) => (
+        <Category index={index} {...item} key={item.id} />
+      ))}
     </div>
-  )
+  );
 }
 
 export function Apps() {
@@ -73,5 +87,5 @@ export function Apps() {
     <AppsProvider>
       <AppContainer />
     </AppsProvider>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/chat/component/CopyIcon.tsx b/src/chat/component/CopyIcon.tsx
index 187802e1..38db2842 100644
--- a/src/chat/component/CopyIcon.tsx
+++ b/src/chat/component/CopyIcon.tsx
@@ -1,13 +1,13 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 import { IconButton } from "@chakra-ui/react";
-import { Tooltip } from "../../components/ui/tooltip"
+import { Tooltip } from "../../components/ui/tooltip";
 import { LuClipboardCheck } from "react-icons/lu";
 import { LuClipboardCopy } from "react-icons/lu";
-import { useTranslation } from 'react-i18next';
-import { t } from 'i18next';
+import { useTranslation } from "react-i18next";
+import { t } from "i18next";
 
 export function CopyIcon(props) {
-  const { text = "copy", value, className } = props
+  const { text = "copy", value, className } = props;
   const [icon, setIcon] = useState<React.ReactNode>(<LuClipboardCopy />);
   const { t } = useTranslation();
 
@@ -19,15 +19,20 @@ export function CopyIcon(props) {
         setIcon(<LuClipboardCopy />);
       }, 1500);
     } catch (err) {
-      console.error('Failed to copy: ', err);
+      console.error("Failed to copy: ", err);
     }
   }
 
   return (
     <Tooltip content={text}>
-      <IconButton minWidth="24px" size="sm" variant="ghost" onClick={handleCopy} >
+      <IconButton
+        minWidth="24px"
+        size="sm"
+        variant="ghost"
+        onClick={handleCopy}
+      >
         {icon}
       </IconButton>
     </Tooltip>
-  )
+  );
 }
diff --git a/src/chat/component/Error.jsx b/src/chat/component/Error.jsx
index f444727a..23b567e1 100644
--- a/src/chat/component/Error.jsx
+++ b/src/chat/component/Error.jsx
@@ -1,17 +1,21 @@
-import React from 'react'
-import { useGlobal } from '../context'
-import styles from './style.module.less'
+import React from "react";
+import { useGlobal } from "../context";
+import styles from "./style.module.less";
 
 export function Error() {
-  const { currentChat, chat } = useGlobal()
-  const chatError = chat[currentChat]?.error || {}
-  console.log("Error: ", chatError)
+  const { currentChat, chat } = useGlobal();
+  const chatError = chat[currentChat]?.error || {};
+  console.log("Error: ", chatError);
   return (
     <div className={styles.error}>
-      {chatError.code}<br />
-      {chatError.message}<br />
-      {chatError.type}<br />
-      {chatError.param}<br />
+      {chatError.code}
+      <br />
+      {chatError.message}
+      <br />
+      {chatError.type}
+      <br />
+      {chatError.param}
+      <br />
     </div>
-  )
+  );
 }
diff --git a/src/chat/component/OPFSImage.tsx b/src/chat/component/OPFSImage.tsx
new file mode 100644
index 00000000..cb5681a2
--- /dev/null
+++ b/src/chat/component/OPFSImage.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import { Skeleton } from "@chakra-ui/react";
+import styles from "../style/message.module.less";
+import classNames from "classnames";
+
+export interface OPFSImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    readonly src?: string;
+    readonly alt?: string;
+}
+
+export function OPFSImage(props: OPFSImageProps) {
+    const { src, alt, className, ...rest } = props;
+    const [loaded, setLoaded] = useState(false);
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+    useEffect(() => {
+        let active = true;
+        if (src?.startsWith("opfs://")) {
+            const filename = src.replace("opfs://", "");
+            navigator.storage
+                .getDirectory()
+                .then(async (opfs) => {
+                    try {
+                        const fileHandle = await opfs.getFileHandle(filename);
+                        const file = await fileHandle.getFile();
+                        const url = URL.createObjectURL(file);
+                        if (active) {
+                            setImageUrl(url);
+                            setLoaded(true);
+                        } else {
+                            URL.revokeObjectURL(url);
+                        }
+                    } catch (error) {
+                        console.error("Error reading file from OPFS:", error);
+                    }
+                })
+                .catch((error) => {
+                    console.error("Error getting OPFS directory:", error);
+                });
+        } else {
+            setImageUrl(src || null);
+            setLoaded(true);
+        }
+
+        return () => {
+            active = false;
+            if (imageUrl?.startsWith("blob:")) {
+                URL.revokeObjectURL(imageUrl);
+            }
+        };
+    }, [src]);
+
+    if (!imageUrl) {
+        return <Skeleton className={classNames(styles.image, className)} />;
+    }
+
+    return (
+        <img
+            src={imageUrl}
+            alt={alt || "Image"}
+            className={classNames(styles.image, { [styles.loaded]: loaded }, className)}
+            loading="lazy"
+            onLoad={() => setLoaded(true)}
+            {...rest}
+        />
+    );
+}
diff --git a/src/chat/component/ScrollView.jsx b/src/chat/component/ScrollView.jsx
index 83d8927f..032c7b34 100644
--- a/src/chat/component/ScrollView.jsx
+++ b/src/chat/component/ScrollView.jsx
@@ -1,29 +1,29 @@
-import React, { useRef, useState, useEffect } from 'react'
-import { classnames } from '../../components/utils'
-import { useGlobal } from '../context'
-import styles from './style.module.less'
+import React, { useRef, useState, useEffect } from "react";
+import { classnames } from "../../components/utils";
+import { useGlobal } from "../context";
+import styles from "./style.module.less";
 
 export const ScrollView = (props) => {
-  const { children, className, ...rest } = props
-  const scrollRef = useRef(null)
-  const { is, chat } = useGlobal()
+  const { children, className, ...rest } = props;
+  const scrollRef = useRef(null);
+  const { is, chat } = useGlobal();
   const [height, setHeight] = useState(0);
   const handleScroll = () => {
     scrollRef?.current?.scrollIntoView({ behavior: "smooth" });
   };
 
   const scrollToBottom = () => {
-    const currentHeight = scrollRef?.current?.scrollHeight
+    const currentHeight = scrollRef?.current?.scrollHeight;
     //console.log('scrollToBottom: %o %o', currentHeight, height);
-    if (true || currentHeight - height > 60) {
+    if (currentHeight - height > 60) {
       //scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
 
       scrollRef.current.scrollIntoView(0, currentHeight); // scroll to bottom
-      setHeight(currentHeight)
+      setHeight(currentHeight);
     }
   };
   useEffect(() => {
-    scrollToBottom()
+    scrollToBottom();
   }, [is.thinking, chat]);
 
   useEffect(() => {
@@ -31,5 +31,14 @@ export const ScrollView = (props) => {
     setHeight(scrollRef?.current?.scrollHeight);
   }, [scrollRef.current]);
 
-  return <div ref={scrollRef} className={classnames(styles.scroll, className)} {...rest}> {children}</div >
-}
+  return (
+    <div
+      ref={scrollRef}
+      className={classnames(styles.scroll, className)}
+      {...rest}
+    >
+      {" "}
+      {children}
+    </div>
+  );
+};
diff --git a/src/chat/component/index.ts b/src/chat/component/index.ts
index adedad32..b0473738 100644
--- a/src/chat/component/index.ts
+++ b/src/chat/component/index.ts
@@ -1,2 +1,3 @@
 export { CopyIcon } from "./CopyIcon";
 export { ScrollView } from "./ScrollView";
+export { OPFSImage } from "./OPFSImage";
diff --git a/src/chat/context/action.ts b/src/chat/context/action.ts
index bce66f16..ea251af7 100644
--- a/src/chat/context/action.ts
+++ b/src/chat/context/action.ts
@@ -1,10 +1,67 @@
 import i18next, { t } from "i18next";
-import { Chat, GlobalState, OptionAction, GlobalActions, Messages, GlobalAction, GlobalActionType, OptionActionType } from "./types";
+import {
+  Chat,
+  GlobalState,
+  OptionAction,
+  GlobalActions,
+  Messages,
+  GlobalAction,
+  GlobalActionType,
+  OptionActionType,
+} from "./types";
 import React from "react";
 import { createResponse } from "../service/openai";
 
 
-export default function action(state: Partial<GlobalState>, dispatch: React.Dispatch<GlobalAction>): GlobalActions {
+async function processImages(images: any[], opfs: FileSystemDirectoryHandle | null) {
+  console.log("transform images: %o", images);
+  return await Promise.all(
+    images.map(async (image) => {
+      console.log("sendMessage: image: %o", image);
+      if (image.url) {
+        return { type: "input_image", image_url: image.url, name: image.name };
+      } else if (image.name && opfs) {
+        console.log("sendMessage: reading file: %o", image.name);
+
+        // get file from OPFS
+        const fileHandle = await opfs.getFileHandle(image.name);
+        if (!fileHandle) {
+          console.error("File not found in OPFS: %s", image.name);
+          throw new Error(`File not found: ${image.name}`);
+        }
+        const file = await fileHandle.getFile();
+
+        const promise = new Promise((resolve, reject) => {
+          // read file as data URL
+          const reader = new FileReader();
+          let result;
+          reader.onload = () => {
+            console.log("File read as data URL: %o", reader.result);
+            result = {
+              type: "input_image",
+              image_url: reader.result as string,
+              name: image.name,
+            };
+            resolve(result);
+          };
+          reader.onerror = () => {
+            console.error("Error reading file: %o", reader.error);
+            reject(reader.error || new Error("Unknown error reading file"));
+          };
+          reader.readAsDataURL(file);
+          console.log("FileReader started for image: %o", image.name);
+        });
+
+        return await promise;
+      }
+    })
+  );
+}
+
+export default function action(
+  state: Partial<GlobalState>,
+  dispatch: React.Dispatch<GlobalAction>
+): GlobalActions {
   const setState = (payload: Partial<GlobalState> = {}) =>
     dispatch({
       type: GlobalActionType.SET_STATE,
@@ -14,7 +71,7 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
   const setIs = (arg) => {
     const { is } = state;
     setState({ is: { ...is, ...arg } });
-  }
+  };
 
   const startChat = (chat: Chat[], currentChat: number) =>
     dispatch({
@@ -29,8 +86,7 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
 
     try {
       opfs = await navigator.storage.getDirectory();
-    }
-    catch (error) {
+    } catch (error) {
       console.error("Error getting OPFS directory: %o", error);
     }
 
@@ -42,49 +98,13 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
         newMessage.content = [];
         newMessage.content.push({ type: "input_text", text });
 
-        console.log("transform images: %o", typeingMessage.images);
-        const images = await Promise.all(typeingMessage.images.map(async (image) => {
-          console.log("sendMessage: image: %o", image);
-          if (image.url) {
-            return { type: "input_image", image_url: image.url };
-          }
-          else if (image.name && opfs) {
-            console.log("sendMessage: reading file: %o", image.name);
-
-            // get file from OPFS
-            const fileHandle = await opfs.getFileHandle(image.name);
-            const promise = new Promise(async (resolve, reject) => {
-              if (!fileHandle) {
-                console.error("File not found in OPFS: %s", image.name);
-                reject(new Error(`File not found: ${image.name}`));
-                return;
-              }
-              // read file as data URL
-              const reader = new FileReader();
-              let result;
-              reader.onload = () => {
-                console.log("File read as data URL: %o", reader.result);
-                result = { type: "input_image", image_url: reader.result as string, name: image.name };
-                resolve(result);
-              }
-              reader.onerror = (error) => {
-                console.error("Error reading file: %o", error);
-                reject(error);
-              }
-              reader.readAsDataURL(await fileHandle.getFile());
-              console.log("FileReader started for image: %o", image.name);
-            })
-
-            return await promise;
-          }
-        }));
+        const images = await processImages(typeingMessage.images, opfs);
         console.log("sendMessage: images: %o", images);
 
         newMessage.content.push(...images);
         newMessage.id = Date.now();
         console.log("sendMessage: %o", newMessage);
-      }
-      else {
+      } else {
         newMessage = {
           ...typeingMessage,
           sentTime: Math.floor(Date.now() / 1000),
@@ -96,18 +116,18 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
         messages = [...chat[currentChat].messages];
       }
       messages.push(newMessage);
-      let newChat = [...chat];
+      const newChat = [...chat];
       newChat.splice(currentChat, 1, { ...chat[currentChat], messages });
       createResponse({ ...state, chat: newChat, setState, setIs }, this);
     }
-  }
+  };
 
   return {
     setState,
     setIs,
     doLogin(): void {
       console.log("doLogin");
-      window.location.href = import.meta.env.VITE_LOGIN_URL;
+      globalThis.location.href = import.meta.env.VITE_LOGIN_URL;
     },
     clearTypeing() {
       console.log("clear");
@@ -125,7 +145,7 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
       const { mode, assistant } = state.options.openai;
       if (mode !== "assistant") {
         console.log("no settings for %s", mode);
-        return
+        return;
       }
       console.log("showSettings: %s", assistant);
 
@@ -137,22 +157,29 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
         currentEditor: {
           assistant,
           type: "assistant",
-        }
+        },
       });
     },
 
     newChat(app) {
       const { currentApp, currentChat, chat } = state;
       const newApp = app || currentApp;
-      console.log("newChat: ", currentApp, newApp, chat, newApp?.title, newApp?.role)
-      let messages: Messages = [
+      console.log(
+        "newChat: ",
+        currentApp,
+        newApp,
+        chat,
+        newApp?.title,
+        newApp?.role
+      );
+      const messages: Messages = [
         {
           content: newApp?.content || t("system_welcome"),
           sentTime: Math.floor(Date.now() / 1000),
           role: newApp.role,
           id: Date.now(),
-        }
-      ]
+        },
+      ];
 
       const chatList = [
         {
@@ -165,14 +192,13 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
         },
         ...chat,
       ];
-      let _chat: Chat[] = chatList;
+      const _chat: Chat[] = chatList;
       if (newApp.botStarts) {
         console.log("botStarts");
         createResponse({ ...state, chat: _chat, setState, setIs }, this);
-      }
-      else {
+      } else {
         console.debug("starting chat: %o", _chat);
-        startChat(_chat, 0)
+        startChat(_chat, 0);
       }
     },
 
@@ -203,7 +229,7 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
     },
 
     setMessage(content) {
-      let typeingMessage = {
+      const typeingMessage = {
         ...state.typeingMessage,
         role: "user",
         id: Date.now(),
@@ -219,7 +245,8 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
       if (format === "markdown") {
         const content = messages
           .map((m) => {
-            return `${m.role === "assistant" ? "## Assistant\n" : "## User\n"}${m.content}\n\n`;
+            return `${m.role === "assistant" ? "## Assistant\n" : "## User\n"}${m.content
+              }\n\n`;
           })
           .join("\n");
         const blob = new Blob([content], { type: "text/markdown" });
@@ -241,7 +268,9 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
 
     removeMessage(id) {
       console.log("removeMessage", id);
-      const messages = state.chat[state.currentChat].messages.filter((m) => m.id !== id);
+      const messages = state.chat[state.currentChat].messages.filter(
+        (m) => m.id !== id
+      );
       const chat = [...state.chat];
       chat[state.currentChat].messages = messages;
       setState({
@@ -251,31 +280,60 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
 
     editMessage(id) {
       console.log("editMessage", id);
-      const message = state.chat[state.currentChat].messages.find((m) => m.id == id);
+      const message = state.chat[state.currentChat].messages.find(
+        (m) => m.id == id
+      );
       console.log("editMessage: original", message);
       const newMessage = { ...message, id: Date.now() };
+
+      if (Array.isArray(message.content)) {
+        let textContent = "";
+        const images = [];
+
+        for (const item of message.content) {
+          if (item.type === "input_text") {
+            textContent += item.text;
+          } else if (item.type === "input_image") {
+            const imageUrl = item.image_url;
+            let name = "image.png";
+            if (imageUrl?.startsWith("opfs://")) {
+              name = imageUrl.replace("opfs://", "");
+            }
+            images.push({
+              name: name,
+              url: imageUrl,
+              // We don't have size/type/lastModified here, but MessageInput should handle it gracefully or we can mock it
+              size: 0,
+              type: "image/png",
+              lastModified: Date.now(),
+              id: Date.now() + Math.random(),
+            });
+          }
+        }
+        newMessage.content = textContent;
+        newMessage.images = images;
+      }
+
       console.log("editMessage: new", newMessage);
       setState({
         typeingMessage: newMessage,
-      })
+      });
     },
 
     setOptions({ type, data }: OptionAction) {
-      console.log('set options: ', type, data);
-      let options = { ...state.options };
+      console.log("set options: ", type, data);
+      const options = { ...state.options };
       if (type === OptionActionType.OPENAI) {
         options[type] = { ...options[type], ...data };
-      }
-      else if (type === OptionActionType.GENERAL) {
+      } else if (type === OptionActionType.GENERAL) {
         options[type] = { ...options[type], ...data };
         if (data.language) {
           i18next.changeLanguage(data.language);
         }
-      }
-      else if (type === OptionActionType.ACCOUNT) {
+      } else if (type === OptionActionType.ACCOUNT) {
         options[type] = { ...options[type], ...data };
       }
-      console.log('set options: ', options);
+      console.log("set options: ", options);
       setState({ options });
     },
 
@@ -290,5 +348,3 @@ export default function action(state: Partial<GlobalState>, dispatch: React.Disp
     },
   };
 }
-
-
diff --git a/src/chat/context/index.tsx b/src/chat/context/index.tsx
index 365d8cad..081c2b6d 100644
--- a/src/chat/context/index.tsx
+++ b/src/chat/context/index.tsx
@@ -4,22 +4,34 @@ import React, {
   useReducer,
   useContext,
   createContext,
-  Dispatch
+  Dispatch,
 } from "react";
 import action from "./action";
 import reducer from "./reducer";
 import { initState } from "./initState";
 import { fetchAndGetUser } from "../utils";
-import { GlobalAction, GlobalActions, GlobalState, GlobalActionType, Chat, Message, App, Options } from "./types";
+import {
+  GlobalAction,
+  GlobalActions,
+  GlobalState,
+  GlobalActionType,
+  Chat,
+  Message,
+  App,
+  Options,
+} from "./types";
 import { getResponse } from "../service/openai";
-import { inflateState, loadState, reduceState, reviver, saveState } from "../utils/settings";
-
+import {
+  inflateState,
+  loadState,
+  reduceState,
+  reviver,
+  saveState,
+} from "../utils/settings";
 
 export const ChatContext = createContext(null);
 export const MessagesContext = createContext<Dispatch<GlobalAction>>(null);
 
-
-
 async function getState() {
   let state = initState;
 
@@ -36,14 +48,12 @@ export const ChatProvider = ({ children }) => {
   let init: GlobalState = initState;
 
   try {
-    let stored = JSON.parse(localStorage.getItem("SESSIONS"), reviver);
+    const stored = JSON.parse(localStorage.getItem("SESSIONS"), reviver);
     init = { ...init, ...stored };
   } catch (e) {
     console.error("error parsing state: %s", e);
   }
 
-
-
   const [state, dispatch] = useReducer(reducer, init);
   const actionList = action(state, dispatch);
   const latestState = useRef(state);
@@ -67,17 +77,13 @@ export const ChatProvider = ({ children }) => {
   useEffect(() => {
     console.log("fetch user");
     fetchAndGetUser(dispatch, state.options);
-  }, [])
-
-
-
+  }, []);
 
   useEffect(() => {
     const stateToSave = { ...latestState.current };
     saveState(stateToSave);
   }, [latestState.current]);
 
-
   return (
     <ChatContext.Provider value={{ ...state, ...actionList }}>
       <MessagesContext.Provider value={dispatch}>
@@ -87,9 +93,6 @@ export const ChatProvider = ({ children }) => {
   );
 };
 
-export const useGlobal = () => useContext<GlobalActions & GlobalState>(ChatContext);
+export const useGlobal = () =>
+  useContext<GlobalActions & GlobalState>(ChatContext);
 export const useMessages = () => useContext(MessagesContext);
-
-
-
-
diff --git a/src/chat/context/initState.ts b/src/chat/context/initState.ts
index 6d63cc39..7803a85e 100644
--- a/src/chat/context/initState.ts
+++ b/src/chat/context/initState.ts
@@ -23,9 +23,8 @@ export const initState: GlobalState = {
           id: Date.now(),
         },
       ],
-      app: 0
+      app: 0,
     },
-
   ],
   currentChat: 0,
   currentApp: initApps.apps[0],
@@ -56,7 +55,7 @@ export const initState: GlobalState = {
       toolsEnabled: new Set(),
       top_p: 1,
       stream: true,
-      assistant: ""
+      assistant: "",
     },
   },
   is: {
diff --git a/src/chat/context/reducer.ts b/src/chat/context/reducer.ts
index e735c7a8..ab5f95d6 100644
--- a/src/chat/context/reducer.ts
+++ b/src/chat/context/reducer.ts
@@ -1,7 +1,10 @@
 import { GlobalState, GlobalAction, GlobalActionType } from "./types";
 
 // TODO: refactor this to use proper actions and types
-export default function reduce(state: GlobalState, action: GlobalAction): GlobalState {
+export default function reduce(
+  state: GlobalState,
+  action: GlobalAction
+): GlobalState {
   const { type, payload = {} } = action;
   // console.log("context reducer:", state, action);
   switch (type) {
diff --git a/src/chat/context/types.ts b/src/chat/context/types.ts
index a4cd3093..24a604db 100644
--- a/src/chat/context/types.ts
+++ b/src/chat/context/types.ts
@@ -1,149 +1,152 @@
-import { ToolChoiceTypes, Tool } from "openai/resources/responses/responses.mjs";
+import {
+  ToolChoiceTypes,
+  Tool,
+} from "openai/resources/responses/responses.mjs";
 import { Tooltip } from "recharts";
 import internal from "stream";
 
-
 export type { Tool, ToolChoiceTypes };
 
 export enum GlobalActionType {
-    SET_STATE = "SET_STATE",
-    CHANGE_MESSAGE = "CHANGE_MESSAGE",
-    IS_CONFIG = "IS_CONFIG",
-    START_CHAT = "START_CHAT",
+  SET_STATE = "SET_STATE",
+  CHANGE_MESSAGE = "CHANGE_MESSAGE",
+  IS_CONFIG = "IS_CONFIG",
+  START_CHAT = "START_CHAT",
 }
 
 export enum OptionActionType {
-    GENERAL = "general",
-    ACCOUNT = "account",
-    OPENAI = "openai"
+  GENERAL = "general",
+  ACCOUNT = "account",
+  OPENAI = "openai",
 }
 
 export type GeneralOptions = {
-    gravatar: boolean;
-    language: string;
-    theme: string;
-    sendCommand: string;
-    size: string;
-    codeEditor: boolean;
+  gravatar: boolean;
+  language: string;
+  theme: string;
+  sendCommand: string;
+  size: string;
+  codeEditor: boolean;
 };
 
 export type AccountOptions = {
-    name: string;
-    avatar: string;
-    terms: boolean;
+  name: string;
+  avatar: string;
+  terms: boolean;
 };
 
 export type OpenAIOptions = {
-    baseUrl: string;
-    organizationId: string;
-    temperature: number;
-    top_p: number;
-    mode: string;
-    model: string;
-    assistant: string;
-    apiKey: string;
-    max_tokens: number;
-    n: number;
-    stream: boolean;
-    tools: Map<string, Tool>;
-    toolsEnabled: Set<string>;
+  baseUrl: string;
+  organizationId: string;
+  temperature: number;
+  top_p: number;
+  mode: string;
+  model: string;
+  assistant: string;
+  apiKey: string;
+  max_tokens: number;
+  n: number;
+  stream: boolean;
+  tools: Map<string, Tool>;
+  toolsEnabled: Set<string>;
 };
 
 export type Options = {
-    account: AccountOptions;
-    general: GeneralOptions;
-    openai: OpenAIOptions;
+  account: AccountOptions;
+  general: GeneralOptions;
+  openai: OpenAIOptions;
 };
 
 export type AnyOptions = GeneralOptions | AccountOptions | OpenAIOptions;
 
 export type GlobalState = {
-    current: number;
-    chat: Chat[];
-    currentChat: number;
-    currentApp: App | null;
-    currentEditor?: any;
-    options: Options;
-    is: {
-        typeing: boolean;
-        config: boolean;
-        fullScreen: boolean;
-        sidebar: boolean;
-        toolbar: boolean;
-        inputing: boolean;
-        thinking: boolean;
-        apps: boolean;
-        tool: string;
-    };
-    typeingMessage: any;
-    user: any;
-    eventProcessor?: any;
-    version: string;
-    release?: any;
+  current: number;
+  chat: Chat[];
+  currentChat: number;
+  currentApp: App | null;
+  currentEditor?: any;
+  options: Options;
+  is: {
+    typeing: boolean;
+    config: boolean;
+    fullScreen: boolean;
+    sidebar: boolean;
+    toolbar: boolean;
+    inputing: boolean;
+    thinking: boolean;
+    apps: boolean;
+    tool: string;
+  };
+  typeingMessage: any;
+  user: any;
+  eventProcessor?: any;
+  version: string;
+  release?: any;
 };
 
-export type GlobalAction = { type: GlobalActionType.SET_STATE; payload: Partial<GlobalState>; } |
-{ type: GlobalActionType.CHANGE_MESSAGE; payload: Partial<GlobalState>; } |
-{ type: GlobalActionType.IS_CONFIG; payload: Partial<GlobalState>; } |
-{ type: GlobalActionType.START_CHAT; payload: Partial<GlobalState>; };
-
-export type OptionAction = { type: OptionActionType.GENERAL; data: Partial<GeneralOptions>; } |
-{ type: OptionActionType.ACCOUNT; data: Partial<AccountOptions>; } |
-{ type: OptionActionType.OPENAI; data: Partial<OpenAIOptions>; };
+export type GlobalAction =
+  | { type: GlobalActionType.SET_STATE; payload: Partial<GlobalState> }
+  | { type: GlobalActionType.CHANGE_MESSAGE; payload: Partial<GlobalState> }
+  | { type: GlobalActionType.IS_CONFIG; payload: Partial<GlobalState> }
+  | { type: GlobalActionType.START_CHAT; payload: Partial<GlobalState> };
 
+export type OptionAction =
+  | { type: OptionActionType.GENERAL; data: Partial<GeneralOptions> }
+  | { type: OptionActionType.ACCOUNT; data: Partial<AccountOptions> }
+  | { type: OptionActionType.OPENAI; data: Partial<OpenAIOptions> };
 
 export type GlobalActions = {
-    setState: (payload: Partial<GlobalState>) => void;
-    doLogin: () => void;
-    clearTypeing: () => void;
-    sendMessage: () => void;
-    setApp: (app: any) => void;
-    showSettings: () => void;
-    newChat: (app: any) => void;
-    modifyChat: (arg: any, index: number) => void;
-    editChat: (index: number, title: string) => void;
-    removeChat: (index: number) => void;
-    setMessage: (content: string) => void;
-    downloadThread: (format?: string) => void;
-    editMessage: (id: number) => void;
-    removeMessage: (id: number) => void;
-    setOptions: (arg: OptionAction) => void;
-    setIs: (arg: any) => void;
-    currentList: () => any;
-    stopResponse: () => void;
+  setState: (payload: Partial<GlobalState>) => void;
+  doLogin: () => void;
+  clearTypeing: () => void;
+  sendMessage: () => Promise<void>;
+  setApp: (app: any) => void;
+  showSettings: () => void;
+  newChat: (app: any) => void;
+  modifyChat: (arg: any, index: number) => void;
+  editChat: (index: number, title: string) => void;
+  removeChat: (index: number) => void;
+  setMessage: (content: string) => void;
+  downloadThread: (format?: string) => void;
+  editMessage: (id: number) => void;
+  removeMessage: (id: number) => void;
+  setOptions: (arg: OptionAction) => void;
+  setIs: (arg: any) => void;
+  currentList: () => any;
+  stopResponse: () => void;
 };
 
 export type Message = {
-    images?: any;
-    content: string;
-    sentTime?: number;
-    startTime?: number;
-    endTime?: number;
-    role: string;
-    id: number | string;
-    thread_id?: string;
-    usage?: any;
-    toolsUsed?: any[];
+  images?: any;
+  content: string;
+  sentTime?: number;
+  startTime?: number;
+  endTime?: number;
+  role: string;
+  id: number | string;
+  thread_id?: string;
+  usage?: any;
+  toolsUsed?: any[];
 };
 
 export type Messages = Message[];
 
 export type Chat = {
-    title: string;
-    app: number;
-    id: number;
-    thread?: string;
-    ct: number;
-    messages: Messages;
-    error?: any;
-    botStarts?: boolean;
+  title: string;
+  app: number;
+  id: number;
+  thread?: string;
+  ct: number;
+  messages: Messages;
+  error?: any;
+  botStarts?: boolean;
 };
 
 export type App = {
-    category: number;
-    title: string;
-    desc: string;
-    id: number;
-    content: string;
-    botStarts: boolean;
-};
\ No newline at end of file
+  category: number;
+  title: string;
+  desc: string;
+  id: number;
+  content: string;
+  botStarts: boolean;
+};
diff --git a/src/chat/hooks/useMessage.ts b/src/chat/hooks/useMessage.ts
index 41459244..206ecc61 100644
--- a/src/chat/hooks/useMessage.ts
+++ b/src/chat/hooks/useMessage.ts
@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { useGlobal } from "../context";
 import { Chat, Message } from "../context/types";
 
-
 export function useMessage() {
   type Messages = {
     messages: Message[];
diff --git a/src/chat/hooks/useOptions.ts b/src/chat/hooks/useOptions.ts
index aa41e018..b04ed6b0 100644
--- a/src/chat/hooks/useOptions.ts
+++ b/src/chat/hooks/useOptions.ts
@@ -1,17 +1,20 @@
 import { useEffect } from "react";
 import { useGlobal } from "../context";
-import { GlobalActionType, OpenAIOptions, OptionActionType } from "../context/types";
+import {
+  OpenAIOptions,
+  OptionActionType,
+} from "../context/types";
 
 export function useOptions() {
   const { options, setOptions } = useGlobal();
   const { size, theme } = options.general;
   useEffect(() => {
     const body = document.querySelector("html");
-    body.classList = [];
-    body.setAttribute("data-theme", theme);
-    body.setAttribute("data-size", size);
-    body.classList.add(theme);
-    body.classList.add(size);
+    if (!body) return;
+    body.className = "";
+    body.dataset.theme = theme;
+    body.dataset.size = size;
+    body.classList.add(theme, size);
   }, [theme, size]);
 
   const setAccount = (data = {}) => {
@@ -29,19 +32,19 @@ export function useOptions() {
     });
   };
 
-  const setAPIMode = (val => {
+  const setAPIMode = (val) => {
     console.log("setAPIMode: %o", val);
     const openai: OpenAIOptions = { ...options.openai, mode: val };
     setOptions({
       type: OptionActionType.OPENAI,
       data: openai,
     });
-  })
+  };
 
   const setModel = (data) => {
     setOptions({
       type: OptionActionType.OPENAI,
-      data
+      data,
     });
   };
 
@@ -52,7 +55,7 @@ export function useOptions() {
       type: OptionActionType.OPENAI,
       data: openai,
     });
-  }
+  };
 
   return { setAccount, setAPIMode, setModel, setAssistant, setGeneral };
 }
diff --git a/src/chat/hooks/useSendKey.ts b/src/chat/hooks/useSendKey.ts
index 9dbb7090..e49e780b 100644
--- a/src/chat/hooks/useSendKey.ts
+++ b/src/chat/hooks/useSendKey.ts
@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 
 export function useSendKey(callback, key) {
-
   const handleCtrlEnter = (event) => {
     if (event.ctrlKey && event.keyCode === 13) {
       event.preventDefault();
diff --git a/src/chat/service/openai.ts b/src/chat/service/openai.ts
index 82402d71..07433096 100644
--- a/src/chat/service/openai.ts
+++ b/src/chat/service/openai.ts
@@ -1,4 +1,10 @@
-import { OpenAIOptions, Chat, Message, GlobalActions, GlobalState } from "../context/types";
+import {
+  OpenAIOptions,
+  Chat,
+  Message,
+  GlobalActions,
+  GlobalState,
+} from "../context/types";
 import * as MessagesAPI from "openai/resources/beta/threads/messages.mjs";
 import * as StepsAPI from "openai/resources/beta/threads/runs/steps.mjs";
 import { processLaTeX } from "../utils/latex";
@@ -6,20 +12,29 @@ import OpenAI, { APIError } from "openai";
 
 import { t } from "i18next";
 import { Stream } from "openai/streaming.mjs";
-import { ResponseImageGenCallCompletedEvent, ResponseImageGenCallPartialImageEvent, ResponseIncludable, ResponseInput, ResponseInputItem, ResponseStreamEvent, Tool } from "openai/resources/responses/responses.mjs";
+import {
+  ResponseImageGenCallCompletedEvent,
+  ResponseImageGenCallPartialImageEvent,
+  ResponseIncludable,
+  ResponseInput,
+  ResponseInputItem,
+  ResponseStreamEvent,
+  Tool,
+} from "openai/resources/responses/responses.mjs";
 import { toaster } from "../../components/ui/toaster";
 
-
-export const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || import.meta.env.API_BASE_URL || "https://api.openai.com/v1";
-
+export const apiBaseUrl =
+  import.meta.env.VITE_API_BASE_URL ||
+  import.meta.env.API_BASE_URL ||
+  "https://api.openai.com/v1";
 
 const client = new OpenAI({
   apiKey: "unused",
   dangerouslyAllowBrowser: true,
   baseURL: apiBaseUrl,
   fetch: (input, init: any) => {
-    return fetch(input, { credentials: "include", ...init })
-  }
+    return fetch(input, { credentials: "include", ...init });
+  },
 });
 
 export async function getResponse(id: string) {
@@ -27,28 +42,60 @@ export async function getResponse(id: string) {
   return response;
 }
 
-export async function createResponse(global: Partial<GlobalState> & Partial<GlobalActions>, parent) {
-
+export async function createResponse(
+  global: Partial<GlobalState> & Partial<GlobalActions>,
+  parent
+) {
   const { options, chat, currentChat, is, setState, setIs } = global;
 
   console.log("messages: %o", chat[currentChat].messages);
   console.log("parent: %o", parent);
 
-  const input: ResponseInput = chat[currentChat].messages.map((item) => {
-    console.log("input item: %o", item);
-    const { role, content, ...rest } = item;
-    if (content && typeof content === "object" && Array.isArray(content)) {
-      const cleaned = content.map((item) => {
-        if (item.type === "input_image") {
-          const { name, ...rest } = item;
-          return { ...rest };
-        }
-        return item;
-      });
-      return { role, content: cleaned } as ResponseInputItem;
-    }
-    return { role, content } as ResponseInputItem;
-  });
+  const input: ResponseInput = await Promise.all(
+    chat[currentChat].messages.map(async (item) => {
+      console.log("input item: %o", item);
+      const { role, content, ...rest } = item;
+      if (content && typeof content === "object" && Array.isArray(content)) {
+        const cleaned = await Promise.all(
+          content.map(async (item) => {
+            if (item.type === "input_image") {
+              const { name, ...rest } = item;
+              if (rest.image_url?.startsWith("opfs://")) {
+                try {
+                  const filename = rest.image_url.replace("opfs://", "");
+                  const opfs = await navigator.storage.getDirectory();
+                  const fileHandle = await opfs.getFileHandle(filename);
+                  const file = await fileHandle.getFile();
+
+                  // Use FileReader to get data URL directly from file
+                  const dataUrl = await new Promise<string>((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = () => resolve(reader.result as string);
+                    reader.onerror = reject;
+                    reader.readAsDataURL(file);
+                  });
+
+                  // Extract MIME type and base64 length for logging
+                  const mimeType = dataUrl.split(';')[0].split(':')[1];
+                  const base64 = dataUrl.split(',')[1];
+
+                  console.log("Converted OPFS file to base64: %s (%s) (%d bytes)", filename, mimeType, base64.length);
+                  rest.image_url = dataUrl;
+                } catch (error) {
+                  console.error("Error reading OPFS file for OpenAI API:", error);
+                  // Fallback or rethrow? For now, let's keep the original URL which will likely fail API validation but logs the error.
+                }
+              }
+              return { ...rest };
+            }
+            return item;
+          })
+        );
+        return { role, content: cleaned } as ResponseInputItem;
+      }
+      return { role, content } as ResponseInputItem;
+    })
+  );
 
   const tools: Tool[] = [];
 
@@ -62,13 +109,17 @@ export async function createResponse(global: Partial<GlobalState> & Partial<Glob
     tools,
     input,
     stream: true,
-    include: ['web_search_call.action.sources', 'code_interpreter_call.outputs'] as ResponseIncludable[],
+    include: [
+      "web_search_call.action.sources",
+      "code_interpreter_call.outputs",
+    ] as ResponseIncludable[],
   };
   if (options.openai.model.startsWith("gpt-5")) {
-    response_options['reasoning'] = { effort: "medium", summary: "detailed" };
+    response_options["reasoning"] = { effort: "medium", summary: "detailed" };
   }
 
-  client.responses.create(response_options)
+  client.responses
+    .create(response_options)
     .then(async (stream: Stream<ResponseStreamEvent>) => {
       setIs({ ...is, thinking: true });
       console.log("stream: %o", stream);
@@ -120,7 +171,7 @@ export async function createResponse(global: Partial<GlobalState> & Partial<Glob
           type: "info",
         });
         window.location.href = import.meta.env.VITE_LOGIN_URL;
-        return
+        return;
       }
     }
 
@@ -133,8 +184,6 @@ export async function createResponse(global: Partial<GlobalState> & Partial<Glob
   }
 }
 
-
-
 class EventProcessor {
   chat: Chat[];
   currentChat: number;
@@ -144,7 +193,10 @@ class EventProcessor {
   stream: Stream<ResponseStreamEvent>;
   static opfs: FileSystemDirectoryHandle = null;
 
-  constructor(stream: Stream<ResponseStreamEvent>, global: Partial<GlobalState> & Partial<GlobalActions>) {
+  constructor(
+    stream: Stream<ResponseStreamEvent>,
+    global: Partial<GlobalState> & Partial<GlobalActions>
+  ) {
     const { chat, currentChat, setState, setIs } = global;
     this.stream = stream;
     this.chat = chat;
@@ -156,7 +208,8 @@ class EventProcessor {
   async initOPFS() {
     console.log("Initializing EventProcessor OPFS");
     if (!EventProcessor.opfs) {
-      await navigator.storage.getDirectory()
+      await navigator.storage
+        .getDirectory()
         .then((dir) => {
           console.log("Directory: %o", dir);
           EventProcessor.opfs = dir;
@@ -176,12 +229,19 @@ class EventProcessor {
   }
 
   appendMessage(delta) {
-    let message = this.chat[this.currentChat].messages[this.chat[this.currentChat].messages.length - 1];
+    const message =
+      this.chat[this.currentChat].messages[
+      this.chat[this.currentChat].messages.length - 1
+      ];
     message.content += delta;
     this.updateChat();
   }
 
-  async appendImageToMessage(image_base64: string, message: Message, file_id: string) {
+  async appendImageToMessage(
+    image_base64: string,
+    message: Message,
+    file_id: string
+  ) {
     const fileContent = atob(image_base64);
 
     let writable: FileSystemWritableFileStream;
@@ -197,7 +257,8 @@ class EventProcessor {
       }
     }
 
-    EventProcessor.opfs.getFileHandle(`${file_id}.png`, { create: true })
+    EventProcessor.opfs
+      .getFileHandle(`${file_id}.png`, { create: true })
       .then((_fileHandle) => {
         fileHandle = _fileHandle;
         console.log("File handle created: ", fileHandle);
@@ -219,24 +280,22 @@ class EventProcessor {
       })
       .then(() => {
         console.log("Writable closed successfully");
-        fileHandle.getFile()
-          .then((_file) => {
-            file = _file;
-            console.log("File retrieved: ", file);
-            if (!message.images) {
-              message.images = {};
-            }
-            message.images[file_id] = {
-              src: URL.createObjectURL(file),
-              name: file.name,
-              size: file.size,
-              lastModified: file.lastModified,
-              file_id,
-              type: "png",
-            };
-            this.updateChat();
-          });
-
+        fileHandle.getFile().then((_file) => {
+          file = _file;
+          console.log("File retrieved: ", file);
+          if (!message.images) {
+            message.images = {};
+          }
+          message.images[file_id] = {
+            src: URL.createObjectURL(file),
+            name: file.name,
+            size: file.size,
+            lastModified: file.lastModified,
+            file_id,
+            type: "png",
+          };
+          this.updateChat();
+        });
       })
       .catch((error) => {
         console.error("Error writing file: ", error);
@@ -247,12 +306,10 @@ class EventProcessor {
           type: "error",
         });
       });
-
-
   }
 
   updateChat() {
-    let newChat = [...this.chat];
+    const newChat = [...this.chat];
     console.log("updateChat: %o", newChat);
     this.setState({
       chat: newChat,
@@ -265,12 +322,43 @@ class EventProcessor {
     this.setIs({ thinking: false });
   }
 
+  updatePartialImage(image_base64: string, message: Message, file_id: string) {
+    const fileContent = atob(image_base64);
+    const byteCharacters = new Uint8Array(fileContent.length);
+    for (let i = 0; i < fileContent.length; i++) {
+      byteCharacters[i] = fileContent.charCodeAt(i);
+    }
+    const blob = new Blob([byteCharacters], { type: "image/png" });
+    const url = URL.createObjectURL(blob);
+
+    if (!message.images) {
+      message.images = {};
+    }
+
+    // Revoke previous URL if it exists to avoid memory leaks
+    if (message.images[file_id]?.src?.startsWith('blob:')) {
+      URL.revokeObjectURL(message.images[file_id].src);
+    }
+
+    message.images[file_id] = {
+      src: url,
+      name: `${file_id}.png`,
+      size: blob.size,
+      lastModified: Date.now(),
+      file_id,
+      type: "png",
+    };
+    this.updateChat();
+  }
+
   async process(event) {
     console.log("event: %s %o", event.type, event);
-    let message = this.chat[this.currentChat].messages[this.chat[this.currentChat].messages.length - 1];;
+    let message =
+      this.chat[this.currentChat].messages[
+      this.chat[this.currentChat].messages.length - 1
+      ];
 
     switch (event.type) {
-
       case "response.created":
         console.log(event.item);
         message = {
@@ -294,9 +382,11 @@ class EventProcessor {
         this.setIs({ thinking: false });
         break;
 
-      case "response.output_item.done":
+      case "response.output_item.done": {
         console.log(event.item);
-        let toolIndex = message.toolsUsed?.findIndex((tool) => tool.id === event.item.id);
+        const toolIndex = message.toolsUsed?.findIndex(
+          (tool) => tool.id === event.item.id
+        );
         if (toolIndex >= 0) {
           message.toolsUsed[toolIndex] = event.item;
         }
@@ -304,9 +394,12 @@ class EventProcessor {
           // event.item.result is a base64-encoded PNG string, decode it
           const base64Data = event.item.result;
           await this.appendImageToMessage(base64Data, message, event.item.id);
+          // Clear the base64 data from the item to avoid storing it in the state
+          event.item.result = "";
         }
         this.updateChat();
         break;
+      }
 
       case "response.output_item.added":
         switch (event.item.type) {
@@ -321,6 +414,8 @@ class EventProcessor {
             if (!message.toolsUsed) {
               message.toolsUsed = [];
             }
+            // We push the item here, but for image generation, we might want to be careful about what's inside.
+            // The 'result' field comes in 'output_item.done', so 'added' is usually safe.
             message.toolsUsed.push(event.item);
             this.updateChat();
             break;
@@ -333,7 +428,6 @@ class EventProcessor {
               type: "info",
             });
             break;
-
         }
         break;
 
@@ -346,14 +440,27 @@ class EventProcessor {
         this.appendMessage(event.delta);
         break;
 
-      case "response.image_generation_call.partial_image":
+      case "response.image_generation_call.partial_image": {
         console.log(event.call);
         const image_base64 = event.partial_image_b64;
         if (image_base64) {
-          this.appendImageToMessage(image_base64, message, event.item_id);
+          this.updatePartialImage(image_base64, message, event.item_id);
         }
         this.setIs({ tool: "image_generation", thinking: true });
         break;
+      }
+
+      case "response.image_generation_call.completed": {
+        console.log(event.call);
+        const image_base64 = event.image_b64;
+        if (image_base64) {
+          this.appendImageToMessage(image_base64, message, event.item_id);
+          // Clear the base64 data to avoid storing it in the state if event is stored somewhere
+          event.image_b64 = "";
+        }
+        this.setIs({ tool: null, thinking: true });
+        break;
+      }
 
       case "response.web_search_call.in_progress":
         console.log(event.call);
@@ -374,9 +481,7 @@ class EventProcessor {
           description: event.error.message || "",
           duration: 5000,
           type: "error",
-        })
+        });
     }
   }
-
-
-}
\ No newline at end of file
+}
diff --git a/src/chat/style/chat.module.less b/src/chat/style/chat.module.less
index 1e70e702..c51f1b57 100644
--- a/src/chat/style/chat.module.less
+++ b/src/chat/style/chat.module.less
@@ -85,4 +85,20 @@ header {
   @media(max-width: 768px) {
     display: none;
   }
+}
+
+.no_access {
+  padding: var(--spacing);
+  color: var(--text-color);
+
+  & h1 {
+    font-size: 2.5em;
+    font-weight: bold;
+    margin-bottom: var(--spacing);
+  }
+
+  & p {
+    font-size: 1.2em;
+    margin-bottom: var(--spacing);
+  }
 }
\ No newline at end of file
diff --git a/src/chat/style/message.module.less b/src/chat/style/message.module.less
index 074a0795..69f4bca0 100644
--- a/src/chat/style/message.module.less
+++ b/src/chat/style/message.module.less
@@ -21,6 +21,8 @@
     max-height: 96px;
     width: auto;
     height: auto;
+    max-height: 96px;
+    max-width: 96px;
     border-radius: var(--border-radius);
     object-fit: contain;
   }
@@ -132,15 +134,18 @@
 }
 
 .bar {
+  position: relative;
+  z-index: 10;
   padding: 4px;
   border-top: 1px solid var(--border-color);
-  background-color: var(--background-color-gray);
 
   &_tool {
     padding: var(--spacing) 0;
   }
 
   &_inner {
+    position: relative;
+    z-index: 0;
     background-color: var(--background-color);
     color: var(--text-color);
     border-radius: var(--border-radius);
@@ -172,8 +177,8 @@
   }
 
   img {
-    max-height: 64px;
-    //max-width: 64px;
+    max-height: 256px;
+    max-width: 256px;
     width: auto;
     height: auto;
     border-radius: var(--border-radius);
@@ -181,6 +186,8 @@
 }
 
 .textarea {
+  position: relative;
+  z-index: 20;
   color: var(--text-color);
   background: transparent;
 }
@@ -233,9 +240,21 @@
 
 .info {}
 
+.dropzone {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+  border: 2px dashed transparent;
+  border-radius: var(--border-radius);
+}
+
 .dragover {
   &[data-name="dropzone"] {
-    background-color: var(--background-color-gray);
+    z-index: 100;
+    background-color: hsla(210, 100%, 50%, 0.1);
     border-color: var(--primary);
     border-width: 2px;
     border-style: dashed;
diff --git a/src/chat/utils/index.ts b/src/chat/utils/index.ts
index 2e74fc36..ff881d71 100644
--- a/src/chat/utils/index.ts
+++ b/src/chat/utils/index.ts
@@ -1,6 +1,6 @@
 import i18next from "i18next";
 
-import avatar from '../../assets/images/avatar.png'
+import avatar from "../../assets/images/avatar.png";
 
 export * from "./options";
 
@@ -9,12 +9,14 @@ export function formatNumber(n) {
 }
 
 export function dateFormat(secs) {
-
   const activeLocale = i18next.resolvedLanguage;
 
   const date = new Date(1000 * secs);
   //console.log("dateFormat: ", date, "activeLocale: ", activeLocale, "ms: ", ms, "date: ", date);
-  return new Intl.DateTimeFormat(activeLocale, { dateStyle: "short", timeStyle: "medium" }).format(date);
+  return new Intl.DateTimeFormat(activeLocale, {
+    dateStyle: "short",
+    timeStyle: "medium",
+  }).format(date);
 }
 
 export async function sha256Digest(message) {
@@ -27,13 +29,15 @@ export async function sha256Digest(message) {
   return hashHex;
 }
 
-
 export function fetchAndGetUser(dispatch, options) {
   fetch(import.meta.env.VITE_USER_URL, { credentials: "include" })
     .then((res) => {
       console.log("getting user: ", res.status);
       if (res.status === 401) {
-        console.log("unauthorized, redirecting to login: %s", import.meta.env.VITE_LOGIN_URL);
+        console.log(
+          "unauthorized, redirecting to login: %s",
+          import.meta.env.VITE_LOGIN_URL
+        );
         window.location.href = import.meta.env.VITE_LOGIN_URL;
         return Promise.resolve(Error("unauthorized"));
       }
@@ -41,30 +45,31 @@ export function fetchAndGetUser(dispatch, options) {
       return res.json();
     })
 
-    .then(user => {
+    .then((user) => {
       user.avatar = null;
       console.log("updating user: ", user);
       dispatch({ type: "SET_STATE", payload: { user } });
 
       if (options.general.gravatar) {
         console.log("user uses gravatar");
-        sha256Digest(user.email).then(hash => {
+        sha256Digest(user.email).then((hash) => {
           user.hash = hash;
-          fetch(`https://www.gravatar.com/${hash}`, { mode: "no-cors" }).then(res => {
-            if (res.status === 200) {
-              console.log("user has gravatar");
-              user.avatar = `https://www.gravatar.com/avatar/${hash}`;
-            }
-            else {
-              console.log("user has no gravatar");
-              user.avatar = `https://www.gravatar.com/avatar/${hash}?d=identicon`;
+          fetch(`https://www.gravatar.com/${hash}`, { mode: "no-cors" }).then(
+            (res) => {
+              if (res.status === 200) {
+                console.log("user has gravatar");
+                user.avatar = `https://www.gravatar.com/avatar/${hash}`;
+              } else {
+                console.log("user has no gravatar");
+                user.avatar = `https://www.gravatar.com/avatar/${hash}?d=identicon`;
+              }
+              dispatch({ type: "SET_STATE", payload: { user } });
             }
-            dispatch({ type: "SET_STATE", payload: { user } });
-          });
+          );
         });
       }
     })
-    .catch(err => {
+    .catch((err) => {
       console.log("error getting user: ", err);
     });
 }
diff --git a/src/chat/utils/instrumentation.ts b/src/chat/utils/instrumentation.ts
index 7375c0ff..28e3c8a8 100644
--- a/src/chat/utils/instrumentation.ts
+++ b/src/chat/utils/instrumentation.ts
@@ -1,46 +1,47 @@
 import {
-    defaultResource,
-    resourceFromAttributes,
-} from '@opentelemetry/resources';
-import { SeverityNumber } from '@opentelemetry/api-logs';
+  defaultResource,
+  resourceFromAttributes,
+} from "@opentelemetry/resources";
+import { SeverityNumber } from "@opentelemetry/api-logs";
 import {
-    LoggerProvider,
-    BatchLogRecordProcessor,
-    ConsoleLogRecordExporter
-} from '@opentelemetry/sdk-logs';
-import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-http';
+  LoggerProvider,
+  BatchLogRecordProcessor,
+  ConsoleLogRecordExporter,
+} from "@opentelemetry/sdk-logs";
+import { OTLPLogExporter } from "@opentelemetry/exporter-logs-otlp-http";
 import {
-    ATTR_SERVICE_NAME,
-    ATTR_SERVICE_VERSION,
-} from '@opentelemetry/semantic-conventions';
-
-
+  ATTR_SERVICE_NAME,
+  ATTR_SERVICE_VERSION,
+} from "@opentelemetry/semantic-conventions";
 
 const resource = defaultResource().merge(
-    resourceFromAttributes({
-        [ATTR_SERVICE_NAME]: 'openai-ui',
-        [ATTR_SERVICE_VERSION]: import.meta.env.VITE_VERSION || '0.0.0',
-    }),
+  resourceFromAttributes({
+    [ATTR_SERVICE_NAME]: "openai-ui",
+    [ATTR_SERVICE_VERSION]: import.meta.env.VITE_VERSION || "0.0.0",
+  })
 );
 
 const collectorOptions = {
-    url: 'https://otlp.fh-swf.cloud/v1/logs', // url is optional and can be omitted - default is http://localhost:4318/v1/logs
-    headers: {}, // an optional object containing custom headers to be sent with each request
-    concurrencyLimit: 1, // an optional limit on pending requests
+  url: "https://otlp.fh-swf.cloud/v1/logs", // url is optional and can be omitted - default is http://localhost:4318/v1/logs
+  headers: {}, // an optional object containing custom headers to be sent with each request
+  concurrencyLimit: 1, // an optional limit on pending requests
 };
 
 const logExporter = new OTLPLogExporter(collectorOptions);
 
 const loggerProvider = new LoggerProvider({
-    resource,
-    logRecordLimits: {
-        attributeCountLimit: 100,
-        attributeValueLengthLimit: 1000,
-    },
+  resource,
+  logRecordLimits: {
+    attributeCountLimit: 100,
+    attributeValueLengthLimit: 1000,
+  },
 });
 
 loggerProvider.addLogRecordProcessor(new BatchLogRecordProcessor(logExporter));
 
-export const logger = loggerProvider.getLogger('openai_ui', import.meta.env.VITE_VERSION || '0.0.0');
+export const logger = loggerProvider.getLogger(
+  "openai_ui",
+  import.meta.env.VITE_VERSION || "0.0.0"
+);
 
 export { SeverityNumber };
diff --git a/src/chat/utils/latex.ts b/src/chat/utils/latex.ts
index b2523993..1673ec98 100644
--- a/src/chat/utils/latex.ts
+++ b/src/chat/utils/latex.ts
@@ -1,42 +1,48 @@
 // Regex to check if the processed content contains any potential LaTeX patterns
 const containsLatexRegex =
-    /\\\(.*?\\\)|\\\[.*?\\\]|\$.*?\$|\\begin\{equation\}.*?\\end\{equation\}/;
+  /\\\(.*?\\\)|\\\[.*?\\\]|\$.*?\$|\\begin\{equation\}.*?\\end\{equation\}/;
 
 // Regex for inline and block LaTeX expressions
-const inlineLatex = new RegExp(/\\\((.+?)\\\)/, 'g');
-const blockLatex = new RegExp(/\\\[(.*?[^\\])\\\]/, 'gs');
+const inlineLatex = new RegExp(/\\\((.+?)\\\)/, "g");
+const blockLatex = new RegExp(/\\\[(.*?[^\\])\\\]/, "gs");
 
 // Function to restore code blocks
 const restoreCodeBlocks = (content: string, codeBlocks: string[]) => {
-    return content.replace(/<<CODE_BLOCK_(\d+)>>/g, (match, index) => codeBlocks[index]);
+  return content.replace(
+    /<<CODE_BLOCK_(\d+)>>/g,
+    (match, index) => codeBlocks[index]
+  );
 };
 
 // Regex to identify code blocks and inline code
 const codeBlockRegex = /(```[\s\S]*?```|`.*?`)/g;
 
 export const processLaTeX = (_content: string): string => {
-    let content = _content;
-    // Temporarily replace code blocks and inline code with placeholders
-    const codeBlocks: string[] = [];
-    let index = 0;
-    content = content.replace(codeBlockRegex, (match) => {
-        codeBlocks[index] = match;
-        return `<<CODE_BLOCK_${index++}>>`;
-    });
-
-    // Escape dollar signs followed by a digit or space and digit
-    let processedContent = content.replace(/(\$)(?=\s?\d)/g, '\\$');
-
-    // If no LaTeX patterns are found, restore code blocks and return the processed content
-    if (!containsLatexRegex.test(processedContent)) {
-        return restoreCodeBlocks(processedContent, codeBlocks);
-    }
-
-    // Convert LaTeX expressions to a markdown compatible format
-    processedContent = processedContent
-        .replace(inlineLatex, (match: string, equation: string) => `$${equation}$`) // Convert inline LaTeX
-        .replace(blockLatex, (match: string, equation: string) => `$$${equation}$$`); // Convert block LaTeX
-
-    // Restore code blocks
+  let content = _content;
+  // Temporarily replace code blocks and inline code with placeholders
+  const codeBlocks: string[] = [];
+  let index = 0;
+  content = content.replace(codeBlockRegex, (match) => {
+    codeBlocks[index] = match;
+    return `<<CODE_BLOCK_${index++}>>`;
+  });
+
+  // Escape dollar signs followed by a digit or space and digit
+  let processedContent = content.replace(/(\$)(?=\s?\d)/g, "\\$");
+
+  // If no LaTeX patterns are found, restore code blocks and return the processed content
+  if (!containsLatexRegex.test(processedContent)) {
     return restoreCodeBlocks(processedContent, codeBlocks);
-};
\ No newline at end of file
+  }
+
+  // Convert LaTeX expressions to a markdown compatible format
+  processedContent = processedContent
+    .replace(inlineLatex, (match: string, equation: string) => `$${equation}$`) // Convert inline LaTeX
+    .replace(
+      blockLatex,
+      (match: string, equation: string) => `$$${equation}$$`
+    ); // Convert block LaTeX
+
+  // Restore code blocks
+  return restoreCodeBlocks(processedContent, codeBlocks);
+};
diff --git a/src/chat/utils/options.ts b/src/chat/utils/options.ts
index 1445a55e..25848ea3 100644
--- a/src/chat/utils/options.ts
+++ b/src/chat/utils/options.ts
@@ -44,15 +44,14 @@ export const modeOptions = [
   {
     label: "Chat",
     value: "chat",
-    description: t('chat_mode_desc'),
+    description: t("chat_mode_desc"),
   },
   {
     label: "Assistant",
     value: "assistant",
-    description: t('assistant_mode_desc'),
-  }
-]
-
+    description: t("assistant_mode_desc"),
+  },
+];
 
 export const modelOptions = [
   { label: "gpt-5-mini", value: "gpt-5-mini" },
@@ -61,13 +60,16 @@ export const modelOptions = [
   { label: "gpt-4.1-nano", value: "gpt-4.1-nano" },
   { label: "gpt-4o-mini", value: "gpt-4o-mini" },
   {
-    label: "gpt-4-turbo", value: "gpt-4-turbo",
+    label: "gpt-4-turbo",
+    value: "gpt-4-turbo",
   },
   {
-    label: "gpt-4", value: "gpt-4",
+    label: "gpt-4",
+    value: "gpt-4",
   },
   {
-    label: "gpt-3.5-turbo", value: "gpt-3.5-turbo",
+    label: "gpt-3.5-turbo",
+    value: "gpt-3.5-turbo",
   },
 ];
 
@@ -75,32 +77,32 @@ export const toolOptions: Map<string, Tool> = new Map([
   [
     "Web Search",
     {
-      type: "web_search_preview"
-    }
+      type: "web_search_preview",
+    },
   ],
   [
     "Image Generation",
     {
       type: "image_generation",
-      partial_images: 2
-    }
+      partial_images: 2,
+    },
   ],
   [
     "Code Interpreter",
     {
-      "type": "code_interpreter",
-      "container": { "type": "auto" }
-    }
+      type: "code_interpreter",
+      container: { type: "auto" },
+    },
   ],
   [
     "FH SWF (beta)",
     {
-      "type": "mcp",
-      "server_label": "FH_SWF",
-      "server_url": "https://mcp.fh-swf.cloud/mcp",
-      "require_approval": "never",
+      type: "mcp",
+      server_label: "FH_SWF",
+      server_url: "https://mcp.fh-swf.cloud/mcp",
+      require_approval: "never",
     },
-  ]
+  ],
 ]);
 
 export const languageOptions = [
diff --git a/src/chat/utils/settings.ts b/src/chat/utils/settings.ts
index a695d41f..89158d49 100644
--- a/src/chat/utils/settings.ts
+++ b/src/chat/utils/settings.ts
@@ -2,153 +2,178 @@ import { initState } from "../context/initState";
 import { App, Chat, GlobalState, Message, Options } from "../context/types";
 
 function replacer(key, value) {
-    if (value instanceof Map) {
-        return {
-            dataType: 'Map',
-            value: Array.from(value.entries()), // or with spread: value: [...value]
-        };
-    }
-    else if (value instanceof Set) {
-        return {
-            dataType: 'Set',
-            value: Array.from(value), // or with spread: value: [...value]
-        };
-    }
-    else {
-        return value;
-    }
+  if (value instanceof Map) {
+    return {
+      dataType: "Map",
+      value: Array.from(value.entries()), // or with spread: value: [...value]
+    };
+  } else if (value instanceof Set) {
+    return {
+      dataType: "Set",
+      value: Array.from(value), // or with spread: value: [...value]
+    };
+  } else {
+    return value;
+  }
 }
 
 export function reviver(key, value) {
-    if (typeof value === 'object' && value !== null) {
-        if (value.dataType === 'Map') {
-            return new Map(value.value);
-        }
-        else if (value.dataType === 'Set') {
-            return new Set(value.value);
-        }
+  if (typeof value === "object" && value !== null) {
+    if (value.dataType === "Map") {
+      return new Map(value.value);
+    } else if (value.dataType === "Set") {
+      return new Set(value.value);
     }
-    return value;
+  }
+  return value;
 }
 
-export function saveState(stateToSave: { current: number; chat: Chat[]; currentChat: number; currentApp: App | null; currentEditor?: any; options: Options; is: { typeing: boolean; config: boolean; fullScreen: boolean; sidebar: boolean; toolbar: boolean; inputing: boolean; thinking: boolean; apps: boolean; tool: string; }; typeingMessage: any; user: any; eventProcessor?: any; version: string; release?: any; }) {
-    localStorage.setItem("SESSIONS", JSON.stringify(reduceState(stateToSave), replacer));
+export function saveState(stateToSave: {
+  current: number;
+  chat: Chat[];
+  currentChat: number;
+  currentApp: App | null;
+  currentEditor?: any;
+  options: Options;
+  is: {
+    typeing: boolean;
+    config: boolean;
+    fullScreen: boolean;
+    sidebar: boolean;
+    toolbar: boolean;
+    inputing: boolean;
+    thinking: boolean;
+    apps: boolean;
+    tool: string;
+  };
+  typeingMessage: any;
+  user: any;
+  eventProcessor?: any;
+  version: string;
+  release?: any;
+}) {
+  localStorage.setItem(
+    "SESSIONS",
+    JSON.stringify(reduceState(stateToSave), replacer)
+  );
 }
 
 export function loadState(): Promise<GlobalState> {
-    return new Promise((resolve, reject) => {
-        const data = localStorage.getItem("SESSIONS");
-        if (!data) {
-            resolve(initState);
-            return;
-        }
-        try {
-            const parsedData = JSON.parse(data, reviver);
-            resolve(inflateState(parsedData));
-        } catch (error) {
-            console.error("Error parsing state from localStorage:", error);
-            reject(error);
-        }
-    });
+  return new Promise((resolve, reject) => {
+    const data = localStorage.getItem("SESSIONS");
+    if (!data) {
+      resolve(initState);
+      return;
+    }
+    try {
+      const parsedData = JSON.parse(data, reviver);
+      resolve(inflateState(parsedData));
+    } catch (error) {
+      console.error("Error parsing state from localStorage:", error);
+      reject(error);
+    }
+  });
 }
 
 // save state to localStorage
 export function reduceState(state: GlobalState): GlobalState {
-    // Remove any properties that are not needed in the localStorage state
-    const cleanState = { ...state };
-    delete cleanState.is;
-    cleanState.chat = cleanState.chat.map((chat: Chat) => {
-        chat.messages = chat.messages.map((message: Message) => {
-            if (message.content && Array.isArray(message.content)) {
-                message.content = message.content.map((content) => {
-                    if (content.type === "input_image" && content.image_url) {
-                        // If the content is an image, remove the image_url property
-                        const { image_url, ...rest } = content;
-                        // If the image_url is too large, remove it
-                        if (image_url.length > 100000) {
-                            console.warn("Image URL is too large, removing it: %s", image_url);
-                            return rest;
-                        }
-                    }
-                    return content;
-                });
+  // Remove any properties that are not needed in the localStorage state
+  const cleanState = { ...state };
+  delete cleanState.is;
+  cleanState.chat = cleanState.chat.map((chat: Chat) => {
+    chat.messages = chat.messages.map((message: Message) => {
+      if (message.content && Array.isArray(message.content)) {
+        message.content = message.content.map((content) => {
+          if (content.type === "input_image" && content.image_url) {
+            // If the content is an image, remove the image_url property
+            const { image_url, ...rest } = content;
+            // If the image_url is too large, remove it
+            if (image_url.length > 100000) {
+              console.warn(
+                "Image URL is too large, removing it: %s",
+                image_url
+              );
+              return rest;
             }
-            return message
+          }
+          return content;
         });
-        return chat;
+      }
+      return message;
     });
-    // Remove any properties that are not needed in the options
-    return cleanState;
-};
+    return chat;
+  });
+  // Remove any properties that are not needed in the options
+  return cleanState;
+}
 
 export async function inflateState(state: GlobalState) {
-    console.log("Inflating state: %o", state);
+  console.log("Inflating state: %o", state);
 
-    let opfs = null;
+  let opfs = null;
 
-    try {
-        opfs = await navigator.storage.getDirectory();
-    }
-    catch (error) {
-        console.error("Error getting OPFS directory: %o", error);
-    }
+  try {
+    opfs = await navigator.storage.getDirectory();
+  } catch (error) {
+    console.error("Error getting OPFS directory: %o", error);
+  }
 
-    // Inflate the state by adding back any properties that were removed
-    const inflatedState = { ...state };
-    inflatedState.chat = await Promise.all(
-        inflatedState.chat.map(async (chat: Chat) => {
-            chat.messages = await Promise.all(
-                chat.messages.map(async (message) => {
-                    // If message has images (now an object), add back the src property for each image
-                    if (opfs && message.images && typeof message.images === "object") {
-                        const updatedImages = { ...message.images };
-                        await Promise.all(
-                            Object.entries(updatedImages).map(async ([file_id, image]) => {
-                                const file = await opfs.getFileHandle(image.name);
-                                image.src = URL.createObjectURL(await file.getFile());
-                                updatedImages[file_id] = image;
-                            })
-                        );
-                        message.images = updatedImages;
-                    }
-                    return message;
-                })
+  // Inflate the state by adding back any properties that were removed
+  const inflatedState = { ...state };
+  inflatedState.chat = await Promise.all(
+    inflatedState.chat.map(async (chat: Chat) => {
+      chat.messages = await Promise.all(
+        chat.messages.map(async (message) => {
+          // If message has images (now an object), add back the src property for each image
+          if (opfs && message.images && typeof message.images === "object") {
+            const updatedImages = { ...message.images };
+            await Promise.all(
+              Object.entries(updatedImages).map(async ([file_id, image]) => {
+                const file = await opfs.getFileHandle(image.name);
+                image.src = URL.createObjectURL(await file.getFile());
+                updatedImages[file_id] = image;
+              })
             );
-            return chat;
+            message.images = updatedImages;
+          }
+          return message;
         })
-    );
-    return inflatedState;
-};
+      );
+      return chat;
+    })
+  );
+  return inflatedState;
+}
 
 export const exportSettings = () => {
-    console.log('Export settings');
-    const data = localStorage.getItem('SESSIONS');
-    const blob = new Blob([data], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'settings.json';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
+  console.log("Export settings");
+  const data = localStorage.getItem("SESSIONS");
+  const blob = new Blob([data], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "settings.json";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
 };
 
 export const importSettings = (file: File): Promise<GlobalState> => {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = (event) => {
-            const data = event.target?.result as string;
-            try {
-                const settings = JSON.parse(data);
-                localStorage.setItem('SESSIONS', JSON.stringify(settings));
-                console.log('Settings imported successfully');
-                resolve(settings);
-            } catch (error) {
-                console.error('Error parsing settings file:', error);
-                reject(error);
-            }
-        };
-        reader.readAsText(file);
-    });
-};
\ No newline at end of file
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const data = event.target?.result as string;
+      try {
+        const settings = JSON.parse(data);
+        localStorage.setItem("SESSIONS", JSON.stringify(settings));
+        console.log("Settings imported successfully");
+        resolve(settings);
+      } catch (error) {
+        console.error("Error parsing settings file:", error);
+        reject(error);
+      }
+    };
+    reader.readAsText(file);
+  });
+};
diff --git a/src/components/hooks/useClickOutside.js b/src/components/hooks/useClickOutside.js
index ca450fee..829d6087 100644
--- a/src/components/hooks/useClickOutside.js
+++ b/src/components/hooks/useClickOutside.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 
 export function useClickOutside(ref, initialState) {
   const [visible, setVisible] = useState(initialState);
diff --git a/src/components/hooks/useLocalStorage.js b/src/components/hooks/useLocalStorage.js
index 0655a274..fc457367 100644
--- a/src/components/hooks/useLocalStorage.js
+++ b/src/components/hooks/useLocalStorage.js
@@ -18,7 +18,9 @@ export function useLocalStorage(key, initialValue) {
 
   useEffect(() => {
     try {
-      const value = isVal(storedValue) ? storedValue : JSON.stringify(storedValue);
+      const value = isVal(storedValue)
+        ? storedValue
+        : JSON.stringify(storedValue);
       value && localStorage.setItem(key, value);
     } catch (error) {
       console.error(error);
diff --git a/src/components/hooks/useTheme.js b/src/components/hooks/useTheme.js
index f0da82ea..cbd3fec9 100644
--- a/src/components/hooks/useTheme.js
+++ b/src/components/hooks/useTheme.js
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useLocalStorage } from "./useLocalStorage";
 
-export function useTheme(initTheme) {
+export function useTheme() {
   const [themes, setThemes] = useState("light");
   const [theme, setTheme] = useLocalStorage("THEME", "light");
   function toggleTheme() {
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index cd84664a..1245f112 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,24 +1,24 @@
-"use client"
+"use client";
 
-import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
-import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
-import * as React from "react"
+import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react";
+import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react";
+import * as React from "react";
 
-type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 
 export interface AvatarProps extends ChakraAvatar.RootProps {
-  name?: string
-  src?: string
-  srcSet?: string
-  loading?: ImageProps["loading"]
-  icon?: React.ReactElement
-  fallback?: React.ReactNode
+  name?: string;
+  src?: string;
+  srcSet?: string;
+  loading?: ImageProps["loading"];
+  icon?: React.ReactElement;
+  fallback?: React.ReactNode;
 }
 
 export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
   function Avatar(props, ref) {
     const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
-      props
+      props;
     return (
       <ChakraAvatar.Root ref={ref} {...rest}>
         <AvatarFallback name={name} icon={icon}>
@@ -27,18 +27,18 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
         <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
         {children}
       </ChakraAvatar.Root>
-    )
-  },
-)
+    );
+  }
+);
 
 interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
-  name?: string
-  icon?: React.ReactElement
+  name?: string;
+  icon?: React.ReactElement;
 }
 
 const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
   function AvatarFallback(props, ref) {
-    const { name, icon, children, ...rest } = props
+    const { name, icon, children, ...rest } = props;
     return (
       <ChakraAvatar.Fallback ref={ref} {...rest}>
         {children}
@@ -47,28 +47,28 @@ const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
           <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
         )}
       </ChakraAvatar.Fallback>
-    )
-  },
-)
+    );
+  }
+);
 
 function getInitials(name: string) {
-  const names = name.trim().split(" ")
-  const firstName = names[0] != null ? names[0] : ""
-  const lastName = names.length > 1 ? names[names.length - 1] : ""
+  const names = name.trim().split(" ");
+  const firstName = names[0] != null ? names[0] : "";
+  const lastName = names.length > 1 ? names[names.length - 1] : "";
   return firstName && lastName
     ? `${firstName.charAt(0)}${lastName.charAt(0)}`
-    : firstName.charAt(0)
+    : firstName.charAt(0);
 }
 
 interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
 
 export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
   function AvatarGroup(props, ref) {
-    const { size, variant, borderless, ...rest } = props
+    const { size, variant, borderless, ...rest } = props;
     return (
       <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
         <Group gap="0" spaceX="-3" ref={ref} {...rest} />
       </ChakraAvatar.PropsProvider>
-    )
-  },
-)
+    );
+  }
+);
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 2a27c2ff..b6c6bf13 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,15 +1,15 @@
-import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
-import * as React from "react"
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface CheckboxProps extends ChakraCheckbox.RootProps {
-  icon?: React.ReactNode
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-  rootRef?: React.Ref<HTMLLabelElement>
+  icon?: React.ReactNode;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: React.Ref<HTMLLabelElement>;
 }
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   function Checkbox(props, ref) {
-    const { icon, children, inputProps, rootRef, ...rest } = props
+    const { icon, children, inputProps, rootRef, ...rest } = props;
     return (
       <ChakraCheckbox.Root ref={rootRef} {...rest}>
         <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
@@ -20,6 +20,6 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
         )}
       </ChakraCheckbox.Root>
-    )
-  },
-)
+    );
+  }
+);
diff --git a/src/components/ui/close-button.jsx b/src/components/ui/close-button.jsx
index 07d36314..5610b490 100644
--- a/src/components/ui/close-button.jsx
+++ b/src/components/ui/close-button.jsx
@@ -1,20 +1,20 @@
 function _nullishCoalesce(lhs, rhsFn) {
   if (lhs != null) {
-    return lhs
+    return lhs;
   } else {
-    return rhsFn()
+    return rhsFn();
   }
 }
-import { IconButton as ChakraIconButton } from '@chakra-ui/react'
-import * as React from 'react'
-import { LuX } from 'react-icons/lu'
+import { IconButton as ChakraIconButton } from "@chakra-ui/react";
+import * as React from "react";
+import { LuX } from "react-icons/lu";
 
 export const CloseButton = React.forwardRef(function CloseButton(props, ref) {
   return (
-    <ChakraIconButton variant='ghost' aria-label='Close' ref={ref} {...props}>
+    <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
       {_nullishCoalesce(props.children, () => (
         <LuX />
       ))}
     </ChakraIconButton>
-  )
-})
+  );
+});
diff --git a/src/components/ui/close-button.tsx b/src/components/ui/close-button.tsx
index 94af4885..8dc4448a 100644
--- a/src/components/ui/close-button.tsx
+++ b/src/components/ui/close-button.tsx
@@ -1,9 +1,9 @@
-import type { ButtonProps } from "@chakra-ui/react"
-import { IconButton as ChakraIconButton } from "@chakra-ui/react"
-import * as React from "react"
-import { LuX } from "react-icons/lu"
+import type { ButtonProps } from "@chakra-ui/react";
+import { IconButton as ChakraIconButton } from "@chakra-ui/react";
+import * as React from "react";
+import { LuX } from "react-icons/lu";
 
-export type CloseButtonProps = ButtonProps
+export type CloseButtonProps = ButtonProps;
 
 export const CloseButton = React.forwardRef<
   HTMLButtonElement,
@@ -13,5 +13,5 @@ export const CloseButton = React.forwardRef<
     <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
       {props.children ?? <LuX />}
     </ChakraIconButton>
-  )
-})
+  );
+});
diff --git a/src/components/ui/color-mode.tsx b/src/components/ui/color-mode.tsx
index f93feabc..b5dd0bb7 100644
--- a/src/components/ui/color-mode.tsx
+++ b/src/components/ui/color-mode.tsx
@@ -1,48 +1,48 @@
-"use client"
+"use client";
 
-import type { IconButtonProps, SpanProps } from "@chakra-ui/react"
-import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react"
-import { ThemeProvider, useTheme } from "next-themes"
-import type { ThemeProviderProps } from "next-themes"
-import * as React from "react"
-import { LuMoon, LuSun } from "react-icons/lu"
+import type { IconButtonProps, SpanProps } from "@chakra-ui/react";
+import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react";
+import { ThemeProvider, useTheme } from "next-themes";
+import type { ThemeProviderProps } from "next-themes";
+import * as React from "react";
+import { LuMoon, LuSun } from "react-icons/lu";
 
 export interface ColorModeProviderProps extends ThemeProviderProps {}
 
 export function ColorModeProvider(props: ColorModeProviderProps) {
   return (
     <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
-  )
+  );
 }
 
-export type ColorMode = "light" | "dark"
+export type ColorMode = "light" | "dark";
 
 export interface UseColorModeReturn {
-  colorMode: ColorMode
-  setColorMode: (colorMode: ColorMode) => void
-  toggleColorMode: () => void
+  colorMode: ColorMode;
+  setColorMode: (colorMode: ColorMode) => void;
+  toggleColorMode: () => void;
 }
 
 export function useColorMode(): UseColorModeReturn {
-  const { resolvedTheme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme();
   const toggleColorMode = () => {
-    setTheme(resolvedTheme === "dark" ? "light" : "dark")
-  }
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
   return {
     colorMode: resolvedTheme as ColorMode,
     setColorMode: setTheme,
     toggleColorMode,
-  }
+  };
 }
 
 export function useColorModeValue<T>(light: T, dark: T) {
-  const { colorMode } = useColorMode()
-  return colorMode === "dark" ? dark : light
+  const { colorMode } = useColorMode();
+  return colorMode === "dark" ? dark : light;
 }
 
 export function ColorModeIcon() {
-  const { colorMode } = useColorMode()
-  return colorMode === "dark" ? <LuMoon /> : <LuSun />
+  const { colorMode } = useColorMode();
+  return colorMode === "dark" ? <LuMoon /> : <LuSun />;
 }
 
 interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
@@ -51,7 +51,7 @@ export const ColorModeButton = React.forwardRef<
   HTMLButtonElement,
   ColorModeButtonProps
 >(function ColorModeButton(props, ref) {
-  const { toggleColorMode } = useColorMode()
+  const { toggleColorMode } = useColorMode();
   return (
     <ClientOnly fallback={<Skeleton boxSize="8" />}>
       <IconButton
@@ -71,8 +71,8 @@ export const ColorModeButton = React.forwardRef<
         <ColorModeIcon />
       </IconButton>
     </ClientOnly>
-  )
-})
+  );
+});
 
 export const LightMode = React.forwardRef<HTMLSpanElement, SpanProps>(
   function LightMode(props, ref) {
@@ -86,9 +86,9 @@ export const LightMode = React.forwardRef<HTMLSpanElement, SpanProps>(
         ref={ref}
         {...props}
       />
-    )
-  },
-)
+    );
+  }
+);
 
 export const DarkMode = React.forwardRef<HTMLSpanElement, SpanProps>(
   function DarkMode(props, ref) {
@@ -102,6 +102,6 @@ export const DarkMode = React.forwardRef<HTMLSpanElement, SpanProps>(
         ref={ref}
         {...props}
       />
-    )
-  },
-)
+    );
+  }
+);
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
index 4558ec11..834de98b 100644
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.jsx
@@ -1,54 +1,56 @@
-import { Dialog as ChakraDialog, Portal } from '@chakra-ui/react'
-import { CloseButton } from './close-button'
-import * as React from 'react'
+import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react";
+import { CloseButton } from "./close-button";
+import * as React from "react";
 
-export const DialogContent = React.forwardRef(
-  function DialogContent(props, ref) {
-    const {
-      children,
-      portalled = true,
-      portalRef,
-      backdrop = true,
-      ...rest
-    } = props
+export const DialogContent = React.forwardRef(function DialogContent(
+  props,
+  ref
+) {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    backdrop = true,
+    ...rest
+  } = props;
 
-    return (
-      <Portal disabled={!portalled} container={portalRef}>
-        {backdrop && <ChakraDialog.Backdrop />}
-        <ChakraDialog.Positioner>
-          <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
-            {children}
-          </ChakraDialog.Content>
-        </ChakraDialog.Positioner>
-      </Portal>
-    )
-  },
-)
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      {backdrop && <ChakraDialog.Backdrop />}
+      <ChakraDialog.Positioner>
+        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDialog.Content>
+      </ChakraDialog.Positioner>
+    </Portal>
+  );
+});
 
-export const DialogCloseTrigger = React.forwardRef(
-  function DialogCloseTrigger(props, ref) {
-    return (
-      <ChakraDialog.CloseTrigger
-        position='absolute'
-        top='2'
-        insetEnd='2'
-        {...props}
-        asChild
-      >
-        <CloseButton size='sm' ref={ref}>
-          {props.children}
-        </CloseButton>
-      </ChakraDialog.CloseTrigger>
-    )
-  },
-)
+export const DialogCloseTrigger = React.forwardRef(function DialogCloseTrigger(
+  props,
+  ref
+) {
+  return (
+    <ChakraDialog.CloseTrigger
+      position="absolute"
+      top="2"
+      insetEnd="2"
+      {...props}
+      asChild
+    >
+      <CloseButton size="sm" ref={ref}>
+        {props.children}
+      </CloseButton>
+    </ChakraDialog.CloseTrigger>
+  );
+});
 
-export const DialogRoot = ChakraDialog.Root
-export const DialogFooter = ChakraDialog.Footer
-export const DialogHeader = ChakraDialog.Header
-export const DialogBody = ChakraDialog.Body
-export const DialogBackdrop = ChakraDialog.Backdrop
-export const DialogTitle = ChakraDialog.Title
-export const DialogDescription = ChakraDialog.Description
-export const DialogTrigger = ChakraDialog.Trigger
-export const DialogActionTrigger = ChakraDialog.ActionTrigger
+export const DialogRoot = ChakraDialog.Root;
+export const DialogFooter = ChakraDialog.Footer;
+export const DialogHeader = ChakraDialog.Header;
+export const DialogBody = ChakraDialog.Body;
+export const DialogBackdrop = ChakraDialog.Backdrop;
+export const DialogTitle = ChakraDialog.Title;
+export const DialogDescription = ChakraDialog.Description;
+export const DialogTrigger = ChakraDialog.Trigger;
+export const DialogActionTrigger = ChakraDialog.ActionTrigger;
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 89d68a5d..e954059e 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,11 +1,11 @@
-import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"
-import { CloseButton } from "./close-button"
-import * as React from "react"
+import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react";
+import { CloseButton } from "./close-button";
+import * as React from "react";
 
 interface DialogContentProps extends ChakraDialog.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-  backdrop?: boolean
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  backdrop?: boolean;
 }
 
 export const DialogContent = React.forwardRef<
@@ -18,7 +18,7 @@ export const DialogContent = React.forwardRef<
     portalRef,
     backdrop = true,
     ...rest
-  } = props
+  } = props;
 
   return (
     <Portal disabled={!portalled} container={portalRef}>
@@ -29,8 +29,8 @@ export const DialogContent = React.forwardRef<
         </ChakraDialog.Content>
       </ChakraDialog.Positioner>
     </Portal>
-  )
-})
+  );
+});
 
 export const DialogCloseTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -48,15 +48,15 @@ export const DialogCloseTrigger = React.forwardRef<
         {props.children}
       </CloseButton>
     </ChakraDialog.CloseTrigger>
-  )
-})
+  );
+});
 
-export const DialogRoot = ChakraDialog.Root
-export const DialogFooter = ChakraDialog.Footer
-export const DialogHeader = ChakraDialog.Header
-export const DialogBody = ChakraDialog.Body
-export const DialogBackdrop = ChakraDialog.Backdrop
-export const DialogTitle = ChakraDialog.Title
-export const DialogDescription = ChakraDialog.Description
-export const DialogTrigger = ChakraDialog.Trigger
-export const DialogActionTrigger = ChakraDialog.ActionTrigger
+export const DialogRoot = ChakraDialog.Root;
+export const DialogFooter = ChakraDialog.Footer;
+export const DialogHeader = ChakraDialog.Header;
+export const DialogBody = ChakraDialog.Body;
+export const DialogBackdrop = ChakraDialog.Backdrop;
+export const DialogTitle = ChakraDialog.Title;
+export const DialogDescription = ChakraDialog.Description;
+export const DialogTrigger = ChakraDialog.Trigger;
+export const DialogActionTrigger = ChakraDialog.ActionTrigger;
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index ccb96c80..447c57a0 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,18 +1,18 @@
-import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react"
-import { CloseButton } from "./close-button"
-import * as React from "react"
+import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react";
+import { CloseButton } from "./close-button";
+import * as React from "react";
 
 interface DrawerContentProps extends ChakraDrawer.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-  offset?: ChakraDrawer.ContentProps["padding"]
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  offset?: ChakraDrawer.ContentProps["padding"];
 }
 
 export const DrawerContent = React.forwardRef<
   HTMLDivElement,
   DrawerContentProps
 >(function DrawerContent(props, ref) {
-  const { children, portalled = true, portalRef, offset, ...rest } = props
+  const { children, portalled = true, portalRef, offset, ...rest } = props;
   return (
     <Portal disabled={!portalled} container={portalRef}>
       <ChakraDrawer.Positioner padding={offset}>
@@ -21,8 +21,8 @@ export const DrawerContent = React.forwardRef<
         </ChakraDrawer.Content>
       </ChakraDrawer.Positioner>
     </Portal>
-  )
-})
+  );
+});
 
 export const DrawerCloseTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -38,15 +38,15 @@ export const DrawerCloseTrigger = React.forwardRef<
     >
       <CloseButton size="sm" ref={ref} />
     </ChakraDrawer.CloseTrigger>
-  )
-})
+  );
+});
 
-export const DrawerTrigger = ChakraDrawer.Trigger
-export const DrawerRoot = ChakraDrawer.Root
-export const DrawerFooter = ChakraDrawer.Footer
-export const DrawerHeader = ChakraDrawer.Header
-export const DrawerBody = ChakraDrawer.Body
-export const DrawerBackdrop = ChakraDrawer.Backdrop
-export const DrawerDescription = ChakraDrawer.Description
-export const DrawerTitle = ChakraDrawer.Title
-export const DrawerActionTrigger = ChakraDrawer.ActionTrigger
+export const DrawerTrigger = ChakraDrawer.Trigger;
+export const DrawerRoot = ChakraDrawer.Root;
+export const DrawerFooter = ChakraDrawer.Footer;
+export const DrawerHeader = ChakraDrawer.Header;
+export const DrawerBody = ChakraDrawer.Body;
+export const DrawerBackdrop = ChakraDrawer.Backdrop;
+export const DrawerDescription = ChakraDrawer.Description;
+export const DrawerTitle = ChakraDrawer.Title;
+export const DrawerActionTrigger = ChakraDrawer.ActionTrigger;
diff --git a/src/components/ui/field.tsx b/src/components/ui/field.tsx
index dd3b66f1..27eb2ce6 100644
--- a/src/components/ui/field.tsx
+++ b/src/components/ui/field.tsx
@@ -1,17 +1,17 @@
-import { Field as ChakraField } from "@chakra-ui/react"
-import * as React from "react"
+import { Field as ChakraField } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
-  label?: React.ReactNode
-  helperText?: React.ReactNode
-  errorText?: React.ReactNode
-  optionalText?: React.ReactNode
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  errorText?: React.ReactNode;
+  optionalText?: React.ReactNode;
 }
 
 export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
   function Field(props, ref) {
     const { label, children, helperText, errorText, optionalText, ...rest } =
-      props
+      props;
     return (
       <ChakraField.Root ref={ref} {...rest}>
         {label && (
@@ -28,6 +28,6 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
         )}
       </ChakraField.Root>
-    )
-  },
-)
+    );
+  }
+);
diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
index 5d8fb32a..9a188a69 100644
--- a/src/components/ui/input-group.tsx
+++ b/src/components/ui/input-group.tsx
@@ -1,15 +1,15 @@
-import type { BoxProps, InputElementProps } from "@chakra-ui/react"
-import { Group, InputElement } from "@chakra-ui/react"
-import * as React from "react"
+import type { BoxProps, InputElementProps } from "@chakra-ui/react";
+import { Group, InputElement } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface InputGroupProps extends BoxProps {
-  startElementProps?: InputElementProps
-  endElementProps?: InputElementProps
-  startElement?: React.ReactNode
-  endElement?: React.ReactNode
-  children: React.ReactElement<InputElementProps>
-  startOffset?: InputElementProps["paddingStart"]
-  endOffset?: InputElementProps["paddingEnd"]
+  startElementProps?: InputElementProps;
+  endElementProps?: InputElementProps;
+  startElement?: React.ReactNode;
+  endElement?: React.ReactNode;
+  children: React.ReactElement<InputElementProps>;
+  startOffset?: InputElementProps["paddingStart"];
+  endOffset?: InputElementProps["paddingEnd"];
 }
 
 export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
@@ -23,10 +23,10 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       startOffset = "6px",
       endOffset = "6px",
       ...rest
-    } = props
+    } = props;
 
     const child =
-      React.Children.only<React.ReactElement<InputElementProps>>(children)
+      React.Children.only<React.ReactElement<InputElementProps>>(children);
 
     return (
       <Group ref={ref} {...rest}>
@@ -48,6 +48,6 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
           </InputElement>
         )}
       </Group>
-    )
-  },
-)
+    );
+  }
+);
diff --git a/src/components/ui/menu.tsx b/src/components/ui/menu.tsx
index 08e5db64..4b605cff 100644
--- a/src/components/ui/menu.tsx
+++ b/src/components/ui/menu.tsx
@@ -1,26 +1,26 @@
-"use client"
+"use client";
 
-import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react"
-import * as React from "react"
-import { LuCheck, LuChevronRight } from "react-icons/lu"
+import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react";
+import * as React from "react";
+import { LuCheck, LuChevronRight } from "react-icons/lu";
 
 interface MenuContentProps extends ChakraMenu.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
 }
 
 export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
   function MenuContent(props, ref) {
-    const { portalled = true, portalRef, ...rest } = props
+    const { portalled = true, portalRef, ...rest } = props;
     return (
       <Portal disabled={!portalled} container={portalRef}>
         <ChakraMenu.Positioner>
           <ChakraMenu.Content ref={ref} {...rest} />
         </ChakraMenu.Positioner>
       </Portal>
-    )
-  },
-)
+    );
+  }
+);
 
 export const MenuArrow = React.forwardRef<
   HTMLDivElement,
@@ -30,8 +30,8 @@ export const MenuArrow = React.forwardRef<
     <ChakraMenu.Arrow ref={ref} {...props}>
       <ChakraMenu.ArrowTip />
     </ChakraMenu.Arrow>
-  )
-})
+  );
+});
 
 export const MenuCheckboxItem = React.forwardRef<
   HTMLDivElement,
@@ -46,14 +46,14 @@ export const MenuCheckboxItem = React.forwardRef<
       </AbsoluteCenter>
       {props.children}
     </ChakraMenu.CheckboxItem>
-  )
-})
+  );
+});
 
 export const MenuRadioItem = React.forwardRef<
   HTMLDivElement,
   ChakraMenu.RadioItemProps
 >(function MenuRadioItem(props, ref) {
-  const { children, ...rest } = props
+  const { children, ...rest } = props;
   return (
     <ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
       <AbsoluteCenter axis="horizontal" insetStart="4" asChild>
@@ -63,14 +63,14 @@ export const MenuRadioItem = React.forwardRef<
       </AbsoluteCenter>
       <ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
     </ChakraMenu.RadioItem>
-  )
-})
+  );
+});
 
 export const MenuItemGroup = React.forwardRef<
   HTMLDivElement,
   ChakraMenu.ItemGroupProps
 >(function MenuItemGroup(props, ref) {
-  const { title, children, ...rest } = props
+  const { title, children, ...rest } = props;
   return (
     <ChakraMenu.ItemGroup ref={ref} {...rest}>
       {title && (
@@ -80,33 +80,33 @@ export const MenuItemGroup = React.forwardRef<
       )}
       {children}
     </ChakraMenu.ItemGroup>
-  )
-})
+  );
+});
 
 export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
-  startIcon?: React.ReactNode
+  startIcon?: React.ReactNode;
 }
 
 export const MenuTriggerItem = React.forwardRef<
   HTMLDivElement,
   MenuTriggerItemProps
 >(function MenuTriggerItem(props, ref) {
-  const { startIcon, children, ...rest } = props
+  const { startIcon, children, ...rest } = props;
   return (
     <ChakraMenu.TriggerItem ref={ref} {...rest}>
       {startIcon}
       {children}
       <LuChevronRight />
     </ChakraMenu.TriggerItem>
-  )
-})
+  );
+});
 
-export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup
-export const MenuContextTrigger = ChakraMenu.ContextTrigger
-export const MenuRoot = ChakraMenu.Root
-export const MenuSeparator = ChakraMenu.Separator
+export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup;
+export const MenuContextTrigger = ChakraMenu.ContextTrigger;
+export const MenuRoot = ChakraMenu.Root;
+export const MenuSeparator = ChakraMenu.Separator;
 
-export const MenuItem = ChakraMenu.Item
-export const MenuItemText = ChakraMenu.ItemText
-export const MenuItemCommand = ChakraMenu.ItemCommand
-export const MenuTrigger = ChakraMenu.Trigger
+export const MenuItem = ChakraMenu.Item;
+export const MenuItemText = ChakraMenu.ItemText;
+export const MenuItemCommand = ChakraMenu.ItemCommand;
+export const MenuTrigger = ChakraMenu.Trigger;
diff --git a/src/components/ui/number-input.tsx b/src/components/ui/number-input.tsx
index 4a6500f8..aacf432a 100644
--- a/src/components/ui/number-input.tsx
+++ b/src/components/ui/number-input.tsx
@@ -1,5 +1,5 @@
-import { NumberInput as ChakraNumberInput } from "@chakra-ui/react"
-import * as React from "react"
+import { NumberInput as ChakraNumberInput } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface NumberInputProps extends ChakraNumberInput.RootProps {}
 
@@ -7,7 +7,7 @@ export const NumberInputRoot = React.forwardRef<
   HTMLDivElement,
   NumberInputProps
 >(function NumberInput(props, ref) {
-  const { children, ...rest } = props
+  const { children, ...rest } = props;
   return (
     <ChakraNumberInput.Root ref={ref} variant="outline" {...rest}>
       {children}
@@ -16,9 +16,9 @@ export const NumberInputRoot = React.forwardRef<
         <ChakraNumberInput.DecrementTrigger />
       </ChakraNumberInput.Control>
     </ChakraNumberInput.Root>
-  )
-})
+  );
+});
 
-export const NumberInputField = ChakraNumberInput.Input
-export const NumberInputScrubber = ChakraNumberInput.Scrubber
-export const NumberInputLabel = ChakraNumberInput.Label
+export const NumberInputField = ChakraNumberInput.Input;
+export const NumberInputScrubber = ChakraNumberInput.Scrubber;
+export const NumberInputLabel = ChakraNumberInput.Label;
diff --git a/src/components/ui/popover.jsx b/src/components/ui/popover.jsx
index 6449eeff..243ba8ec 100644
--- a/src/components/ui/popover.jsx
+++ b/src/components/ui/popover.jsx
@@ -1,49 +1,50 @@
-import { Popover as ChakraPopover, Portal } from '@chakra-ui/react'
-import { CloseButton } from './close-button'
-import * as React from 'react'
+import { Popover as ChakraPopover, Portal } from "@chakra-ui/react";
+import { CloseButton } from "./close-button";
+import * as React from "react";
 
-export const PopoverContent = React.forwardRef(
-  function PopoverContent(props, ref) {
-    const { portalled = true, portalRef, ...rest } = props
-    return (
-      <Portal disabled={!portalled} container={portalRef}>
-        <ChakraPopover.Positioner>
-          <ChakraPopover.Content ref={ref} {...rest} />
-        </ChakraPopover.Positioner>
-      </Portal>
-    )
-  },
-)
+export const PopoverContent = React.forwardRef(function PopoverContent(
+  props,
+  ref
+) {
+  const { portalled = true, portalRef, ...rest } = props;
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraPopover.Positioner>
+        <ChakraPopover.Content ref={ref} {...rest} />
+      </ChakraPopover.Positioner>
+    </Portal>
+  );
+});
 
 export const PopoverArrow = React.forwardRef(function PopoverArrow(props, ref) {
   return (
     <ChakraPopover.Arrow {...props} ref={ref}>
       <ChakraPopover.ArrowTip />
     </ChakraPopover.Arrow>
-  )
-})
+  );
+});
 
 export const PopoverCloseTrigger = React.forwardRef(
   function PopoverCloseTrigger(props, ref) {
     return (
       <ChakraPopover.CloseTrigger
-        position='absolute'
-        top='1'
-        insetEnd='1'
+        position="absolute"
+        top="1"
+        insetEnd="1"
         {...props}
         asChild
         ref={ref}
       >
-        <CloseButton size='sm' />
+        <CloseButton size="sm" />
       </ChakraPopover.CloseTrigger>
-    )
-  },
-)
+    );
+  }
+);
 
-export const PopoverTitle = ChakraPopover.Title
-export const PopoverDescription = ChakraPopover.Description
-export const PopoverFooter = ChakraPopover.Footer
-export const PopoverHeader = ChakraPopover.Header
-export const PopoverRoot = ChakraPopover.Root
-export const PopoverBody = ChakraPopover.Body
-export const PopoverTrigger = ChakraPopover.Trigger
+export const PopoverTitle = ChakraPopover.Title;
+export const PopoverDescription = ChakraPopover.Description;
+export const PopoverFooter = ChakraPopover.Footer;
+export const PopoverHeader = ChakraPopover.Header;
+export const PopoverRoot = ChakraPopover.Root;
+export const PopoverBody = ChakraPopover.Body;
+export const PopoverTrigger = ChakraPopover.Trigger;
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 3320659d..0262a897 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,25 +1,25 @@
-import { Popover as ChakraPopover, Portal } from "@chakra-ui/react"
-import { CloseButton } from "./close-button"
-import * as React from "react"
+import { Popover as ChakraPopover, Portal } from "@chakra-ui/react";
+import { CloseButton } from "./close-button";
+import * as React from "react";
 
 interface PopoverContentProps extends ChakraPopover.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
 }
 
 export const PopoverContent = React.forwardRef<
   HTMLDivElement,
   PopoverContentProps
 >(function PopoverContent(props, ref) {
-  const { portalled = true, portalRef, ...rest } = props
+  const { portalled = true, portalRef, ...rest } = props;
   return (
     <Portal disabled={!portalled} container={portalRef}>
       <ChakraPopover.Positioner>
         <ChakraPopover.Content ref={ref} {...rest} />
       </ChakraPopover.Positioner>
     </Portal>
-  )
-})
+  );
+});
 
 export const PopoverArrow = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +29,8 @@ export const PopoverArrow = React.forwardRef<
     <ChakraPopover.Arrow {...props} ref={ref}>
       <ChakraPopover.ArrowTip />
     </ChakraPopover.Arrow>
-  )
-})
+  );
+});
 
 export const PopoverCloseTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -47,13 +47,13 @@ export const PopoverCloseTrigger = React.forwardRef<
     >
       <CloseButton size="sm" />
     </ChakraPopover.CloseTrigger>
-  )
-})
+  );
+});
 
-export const PopoverTitle = ChakraPopover.Title
-export const PopoverDescription = ChakraPopover.Description
-export const PopoverFooter = ChakraPopover.Footer
-export const PopoverHeader = ChakraPopover.Header
-export const PopoverRoot = ChakraPopover.Root
-export const PopoverBody = ChakraPopover.Body
-export const PopoverTrigger = ChakraPopover.Trigger
+export const PopoverTitle = ChakraPopover.Title;
+export const PopoverDescription = ChakraPopover.Description;
+export const PopoverFooter = ChakraPopover.Footer;
+export const PopoverHeader = ChakraPopover.Header;
+export const PopoverRoot = ChakraPopover.Root;
+export const PopoverBody = ChakraPopover.Body;
+export const PopoverTrigger = ChakraPopover.Trigger;
diff --git a/src/components/ui/provider.tsx b/src/components/ui/provider.tsx
index 50bb3fca..a011e218 100644
--- a/src/components/ui/provider.tsx
+++ b/src/components/ui/provider.tsx
@@ -1,10 +1,12 @@
-"use client"
+"use client";
 
-import { ChakraProvider, createSystem, defineConfig, defaultConfig, defaultSystem } from "@chakra-ui/react"
 import {
-  ColorModeProvider,
-  type ColorModeProviderProps,
-} from "./color-mode"
+  ChakraProvider,
+  createSystem,
+  defineConfig,
+  defaultConfig,
+} from "@chakra-ui/react";
+import { ColorModeProvider, type ColorModeProviderProps } from "./color-mode";
 
 const config = defineConfig({
   cssVarsRoot: ":where(:root)",
@@ -16,15 +18,14 @@ const config = defineConfig({
       colorPalette: "blue",
     },
   },
-})
+});
 
-const system = createSystem(defaultConfig, config)
+const system = createSystem(defaultConfig, config);
 
 export function Provider(props: ColorModeProviderProps) {
-
   return (
     <ChakraProvider value={system}>
       <ColorModeProvider {...props} />
     </ChakraProvider>
-  )
+  );
 }
diff --git a/src/components/ui/radio-card.tsx b/src/components/ui/radio-card.tsx
index d2fef428..8e69937f 100644
--- a/src/components/ui/radio-card.tsx
+++ b/src/components/ui/radio-card.tsx
@@ -1,14 +1,14 @@
-import { RadioCard } from "@chakra-ui/react"
-import * as React from "react"
+import { RadioCard } from "@chakra-ui/react";
+import * as React from "react";
 
 interface RadioCardItemProps extends RadioCard.ItemProps {
-  icon?: React.ReactElement
-  label?: React.ReactNode
-  description?: React.ReactNode
-  addon?: React.ReactNode
-  indicator?: React.ReactNode | null
-  indicatorPlacement?: "start" | "end" | "inside"
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  icon?: React.ReactElement;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  addon?: React.ReactNode;
+  indicator?: React.ReactNode | null;
+  indicatorPlacement?: "start" | "end" | "inside";
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 
 export const RadioCardItem = React.forwardRef<
@@ -24,10 +24,10 @@ export const RadioCardItem = React.forwardRef<
     indicator = <RadioCard.ItemIndicator />,
     indicatorPlacement = "end",
     ...rest
-  } = props
+  } = props;
 
-  const hasContent = label || description || icon
-  const ContentWrapper = indicator ? RadioCard.ItemContent : React.Fragment
+  const hasContent = label || description || icon;
+  const ContentWrapper = indicator ? RadioCard.ItemContent : React.Fragment;
 
   return (
     <RadioCard.Item {...rest}>
@@ -50,9 +50,9 @@ export const RadioCardItem = React.forwardRef<
       </RadioCard.ItemControl>
       {addon && <RadioCard.ItemAddon>{addon}</RadioCard.ItemAddon>}
     </RadioCard.Item>
-  )
-})
+  );
+});
 
-export const RadioCardRoot = RadioCard.Root
-export const RadioCardLabel = RadioCard.Label
-export const RadioCardItemIndicator = RadioCard.ItemIndicator
+export const RadioCardRoot = RadioCard.Root;
+export const RadioCardLabel = RadioCard.Label;
+export const RadioCardItemIndicator = RadioCard.ItemIndicator;
diff --git a/src/components/ui/radio.tsx b/src/components/ui/radio.tsx
index b3919d08..c081aef1 100644
--- a/src/components/ui/radio.tsx
+++ b/src/components/ui/radio.tsx
@@ -1,14 +1,14 @@
-import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
-import * as React from "react"
+import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface RadioProps extends ChakraRadioGroup.ItemProps {
-  rootRef?: React.Ref<HTMLDivElement>
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  rootRef?: React.Ref<HTMLDivElement>;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 
 export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
   function Radio(props, ref) {
-    const { children, inputProps, rootRef, ...rest } = props
+    const { children, inputProps, rootRef, ...rest } = props;
     return (
       <ChakraRadioGroup.Item ref={rootRef} {...rest}>
         <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
@@ -17,8 +17,8 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
           <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
         )}
       </ChakraRadioGroup.Item>
-    )
-  },
-)
+    );
+  }
+);
 
-export const RadioGroup = ChakraRadioGroup.Root
+export const RadioGroup = ChakraRadioGroup.Root;
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 99d84e6c..6588013c 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import type { CollectionItem } from "@chakra-ui/react"
-import { Select as ChakraSelect, Portal } from "@chakra-ui/react"
-import { CloseButton } from "./close-button"
-import * as React from "react"
+import type { CollectionItem } from "@chakra-ui/react";
+import { Select as ChakraSelect, Portal } from "@chakra-ui/react";
+import { CloseButton } from "./close-button";
+import * as React from "react";
 
 interface SelectTriggerProps extends ChakraSelect.ControlProps {
-  clearable?: boolean
+  clearable?: boolean;
 }
 
 export const SelectTrigger = React.forwardRef<
   HTMLButtonElement,
   SelectTriggerProps
 >(function SelectTrigger(props, ref) {
-  const { children, clearable, ...rest } = props
+  const { children, clearable, ...rest } = props;
   return (
     <ChakraSelect.Control {...rest}>
       <ChakraSelect.Trigger ref={ref}>{children}</ChakraSelect.Trigger>
@@ -22,8 +22,8 @@ export const SelectTrigger = React.forwardRef<
         <ChakraSelect.Indicator />
       </ChakraSelect.IndicatorGroup>
     </ChakraSelect.Control>
-  )
-})
+  );
+});
 
 const SelectClearTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -39,66 +39,66 @@ const SelectClearTrigger = React.forwardRef<
         pointerEvents="auto"
       />
     </ChakraSelect.ClearTrigger>
-  )
-})
+  );
+});
 
 interface SelectContentProps extends ChakraSelect.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
 }
 
 export const SelectContent = React.forwardRef<
   HTMLDivElement,
   SelectContentProps
 >(function SelectContent(props, ref) {
-  const { portalled = true, portalRef, ...rest } = props
+  const { portalled = true, portalRef, ...rest } = props;
   return (
     <Portal disabled={!portalled} container={portalRef}>
       <ChakraSelect.Positioner>
         <ChakraSelect.Content {...rest} ref={ref} />
       </ChakraSelect.Positioner>
     </Portal>
-  )
-})
+  );
+});
 
 export const SelectItem = React.forwardRef<
   HTMLDivElement,
   ChakraSelect.ItemProps
 >(function SelectItem(props, ref) {
-  const { item, children, ...rest } = props
+  const { item, children, ...rest } = props;
   return (
     <ChakraSelect.Item key={item.value} item={item} {...rest} ref={ref}>
       {children}
       <ChakraSelect.ItemIndicator />
     </ChakraSelect.Item>
-  )
-})
+  );
+});
 
 interface SelectValueTextProps
   extends Omit<ChakraSelect.ValueTextProps, "children"> {
-  children?(items: CollectionItem[]): React.ReactNode
+  children?(items: CollectionItem[]): React.ReactNode;
 }
 
 export const SelectValueText = React.forwardRef<
   HTMLSpanElement,
   SelectValueTextProps
 >(function SelectValueText(props, ref) {
-  const { children, ...rest } = props
+  const { children, ...rest } = props;
   return (
     <ChakraSelect.ValueText {...rest} ref={ref}>
       <ChakraSelect.Context>
         {(select) => {
-          const items = select.selectedItems
-          if (items.length === 0) return props.placeholder
-          if (children) return children(items)
+          const items = select.selectedItems;
+          if (items.length === 0) return props.placeholder;
+          if (children) return children(items);
           if (items.length === 1)
-            return select.collection.stringifyItem(items[0])
-          return `${items.length} selected`
+            return select.collection.stringifyItem(items[0]);
+          return `${items.length} selected`;
         }}
       </ChakraSelect.Context>
     </ChakraSelect.ValueText>
-  )
-})
+  );
+});
 
 export const SelectRoot = React.forwardRef<
   HTMLDivElement,
@@ -119,25 +119,25 @@ export const SelectRoot = React.forwardRef<
         </>
       )}
     </ChakraSelect.Root>
-  )
-}) as ChakraSelect.RootComponent
+  );
+}) as ChakraSelect.RootComponent;
 
 interface SelectItemGroupProps extends ChakraSelect.ItemGroupProps {
-  label: React.ReactNode
+  label: React.ReactNode;
 }
 
 export const SelectItemGroup = React.forwardRef<
   HTMLDivElement,
   SelectItemGroupProps
 >(function SelectItemGroup(props, ref) {
-  const { children, label, ...rest } = props
+  const { children, label, ...rest } = props;
   return (
     <ChakraSelect.ItemGroup {...rest} ref={ref}>
       <ChakraSelect.ItemGroupLabel>{label}</ChakraSelect.ItemGroupLabel>
       {children}
     </ChakraSelect.ItemGroup>
-  )
-})
+  );
+});
 
-export const SelectLabel = ChakraSelect.Label
-export const SelectItemText = ChakraSelect.ItemText
+export const SelectLabel = ChakraSelect.Label;
+export const SelectItemText = ChakraSelect.ItemText;
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index 55a7283b..18d530c9 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,23 +1,23 @@
-import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react"
-import * as React from "react"
+import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface SliderProps extends ChakraSlider.RootProps {
-  marks?: Array<number | { value: number; label: React.ReactNode }>
-  label?: React.ReactNode
-  showValue?: boolean
+  marks?: Array<number | { value: number; label: React.ReactNode }>;
+  label?: React.ReactNode;
+  showValue?: boolean;
 }
 
 export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
   function Slider(props, ref) {
-    const { marks: marksProp, label, showValue, ...rest } = props
-    const value = props.defaultValue ?? props.value
+    const { marks: marksProp, label, showValue, ...rest } = props;
+    const value = props.defaultValue ?? props.value;
 
     const marks = marksProp?.map((mark) => {
-      if (typeof mark === "number") return { value: mark, label: undefined }
-      return mark
-    })
+      if (typeof mark === "number") return { value: mark, label: undefined };
+      return mark;
+    });
 
-    const hasMarkLabel = !!marks?.some((mark) => mark.label)
+    const hasMarkLabel = !!marks?.some((mark) => mark.label);
 
     return (
       <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
@@ -38,12 +38,12 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
           <SliderMarks marks={marks} />
         </ChakraSlider.Control>
       </ChakraSlider.Root>
-    )
-  },
-)
+    );
+  }
+);
 
 function SliderThumbs(props: { value?: number[] }) {
-  const { value } = props
+  const { value } = props;
   return (
     <For each={value}>
       {(_, index) => (
@@ -52,31 +52,31 @@ function SliderThumbs(props: { value?: number[] }) {
         </ChakraSlider.Thumb>
       )}
     </For>
-  )
+  );
 }
 
 interface SliderMarksProps {
-  marks?: Array<number | { value: number; label: React.ReactNode }>
+  marks?: Array<number | { value: number; label: React.ReactNode }>;
 }
 
 const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
   function SliderMarks(props, ref) {
-    const { marks } = props
-    if (!marks?.length) return null
+    const { marks } = props;
+    if (!marks?.length) return null;
 
     return (
       <ChakraSlider.MarkerGroup ref={ref}>
         {marks.map((mark, index) => {
-          const value = typeof mark === "number" ? mark : mark.value
-          const label = typeof mark === "number" ? undefined : mark.label
+          const value = typeof mark === "number" ? mark : mark.value;
+          const label = typeof mark === "number" ? undefined : mark.label;
           return (
             <ChakraSlider.Marker key={index} value={value}>
               <ChakraSlider.MarkerIndicator />
               {label}
             </ChakraSlider.Marker>
-          )
+          );
         })}
       </ChakraSlider.MarkerGroup>
-    )
-  },
-)
+    );
+  }
+);
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index a677ca2e..ba92498a 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,17 +1,17 @@
-import { Switch as ChakraSwitch } from "@chakra-ui/react"
-import * as React from "react"
+import { Switch as ChakraSwitch } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface SwitchProps extends ChakraSwitch.RootProps {
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-  rootRef?: React.Ref<HTMLLabelElement>
-  trackLabel?: { on: React.ReactNode; off: React.ReactNode }
-  thumbLabel?: { on: React.ReactNode; off: React.ReactNode }
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: React.Ref<HTMLLabelElement>;
+  trackLabel?: { on: React.ReactNode; off: React.ReactNode };
+  thumbLabel?: { on: React.ReactNode; off: React.ReactNode };
 }
 
 export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
   function Switch(props, ref) {
     const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } =
-      props
+      props;
 
     return (
       <ChakraSwitch.Root ref={rootRef} {...rest}>
@@ -34,6 +34,6 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
           <ChakraSwitch.Label>{children}</ChakraSwitch.Label>
         )}
       </ChakraSwitch.Root>
-    )
-  },
-)
+    );
+  }
+);
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
index df6c2c38..a2b882cc 100644
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   Toaster as ChakraToaster,
@@ -7,12 +7,12 @@ import {
   Stack,
   Toast,
   createToaster,
-} from "@chakra-ui/react"
+} from "@chakra-ui/react";
 
 export const toaster = createToaster({
   placement: "bottom-end",
   pauseOnPageIdle: true,
-})
+});
 
 export const Toaster = () => {
   return (
@@ -39,5 +39,5 @@ export const Toaster = () => {
         )}
       </ChakraToaster>
     </Portal>
-  )
-}
+  );
+};
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 43a8a6c0..2916e914 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,13 +1,13 @@
-import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
-import * as React from "react"
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface TooltipProps extends ChakraTooltip.RootProps {
-  showArrow?: boolean
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-  content: React.ReactNode
-  contentProps?: ChakraTooltip.ContentProps
-  disabled?: boolean
+  showArrow?: boolean;
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  content: React.ReactNode;
+  contentProps?: ChakraTooltip.ContentProps;
+  disabled?: boolean;
 }
 
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
@@ -21,9 +21,9 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       contentProps,
       portalRef,
       ...rest
-    } = props
+    } = props;
 
-    if (disabled) return children
+    if (disabled) return children;
 
     return (
       <ChakraTooltip.Root {...rest}>
@@ -41,6 +41,6 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
           </ChakraTooltip.Positioner>
         </Portal>
       </ChakraTooltip.Root>
-    )
-  },
-)
+    );
+  }
+);
diff --git a/src/hooks/useKey.js b/src/hooks/useKey.js
index 92018d4f..d0a4e16c 100644
--- a/src/hooks/useKey.js
+++ b/src/hooks/useKey.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
 
 export function useCtrlEnterSend(callback) {
   const callbackRef = useRef(callback);
@@ -9,18 +9,18 @@ export function useCtrlEnterSend(callback) {
 
   useEffect(() => {
     function handleKeyDown(event) {
-      const isCtrlEnter = (event.ctrlKey || event.metaKey) && event.keyCode === 13;
+      const isCtrlEnter =
+        (event.ctrlKey || event.metaKey) && event.keyCode === 13;
       if (isCtrlEnter) {
         event.preventDefault();
         callbackRef.current();
       }
     }
 
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
 }
-
diff --git a/src/i18n/config.ts b/src/i18n/config.ts
index 0e491a73..c099a00d 100644
--- a/src/i18n/config.ts
+++ b/src/i18n/config.ts
@@ -3,267 +3,360 @@ import i18n from "i18next";
 // re-render when language changes.
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import { max } from "cypress/types/lodash";
 
 i18n
-    .use(LanguageDetector)
-    // Add React bindings as a plugin.
-    .use(initReactI18next)
-    // Initialize the i18next instance.
-    .init({
-        // Config options
+  .use(LanguageDetector)
+  // Add React bindings as a plugin.
+  .use(initReactI18next)
+  // Initialize the i18next instance.
+  .init({
+    // Config options
 
-        // Fallback locale used when a translation is
-        // missing in the active locale. Again, use your
-        // preferred locale here. 
-        fallbackLng: "en",
+    // Fallback locale used when a translation is
+    // missing in the active locale. Again, use your
+    // preferred locale here.
+    fallbackLng: "en",
 
-        // Enables useful output in the browser’s
-        // dev console.
-        debug: true,
+    // Enables useful output in the browser’s
+    // dev console.
+    debug: true,
 
-        // Normally, we want `escapeValue: true` as it
-        // ensures that i18next escapes any code in
-        // translation messages, safeguarding against
-        // XSS (cross-site scripting) attacks. However,
-        // React does this escaping itself, so we turn 
-        // it off in i18next.
-        interpolation: {
-            escapeValue: false,
+    // Normally, we want `escapeValue: true` as it
+    // ensures that i18next escapes any code in
+    // translation messages, safeguarding against
+    // XSS (cross-site scripting) attacks. However,
+    // React does this escaping itself, so we turn
+    // it off in i18next.
+    interpolation: {
+      escapeValue: false,
+    },
+
+    // Translation messages. Add any languages
+    // you want here.
+    resources: {
+      // English
+      en: {
+        // `translation` is the default namespace.
+        // More details about namespaces shortly.
+        translation: {
+          user_not_allowed: `
+# No Access
+
+Access to the chat is only available to members of FH SWF. If you are a member, please log in with your university credentials.
+`,
+          hello_world: "Hello, World!",
+          count_messages: "{{count}} messages",
+          chatbot_title:
+            "K!mpuls, the privacy-friendly chatbot of FH Südwestfalen",
+          system_welcome:
+            "Hello, I'm K!mpuls, your university chatbot. How can I help you?",
+          new_conversation: "This is a New Conversation",
+          top_p_help:
+            "Top_p is a parameter that controls the randomness in the model's output by limiting the token pool, specifying that only those tokens with a cumulative probability that adds up to the top_p value can be considered for selection.",
+          temperature_help:
+            "Temperature is a parameter that controls the randomness in the model's output by scaling the logits before applying softmax.",
+          theme_help: "Select a color scheme for the user interface.",
+          language_help: "Select a language for the user interface.",
+          send_help: "Select a button for sending messages.",
+          fontsize_help: "Select the font size of the user interface.",
+          openai_model_help: "Select a model for AI support.",
+          custom_endpoint_desc:
+            "If you don't want to use our proxy server, you can configure a different endpoint, e.g. api.openai.com",
+          chat_settings: "Chat Settings",
+          clear_thread: "Clear Conversation",
+          reload_thread: "Reload Conversation",
+          general: "General",
+          files: "Files",
+          name: "Name",
+          instructions: "Instructions",
+          help_name: "Give the chatbot a name.",
+          help_instructions: "Give the chatbot instructions.",
+          help: "Help",
+          save: "Save",
+          cancel: "Cancel",
+          title: "Title",
+          "Enter something....": "Enter something....",
+          "Code Editor": "Code Editor",
+          clear: "Clear",
+          send: "Send",
+          COMMAND_ENTER: "Ctrl + Enter",
+          Always: "Always",
+          Never: "Never",
+          show_toolbar: "Show Toolbar",
+          chat_options: "Chat Options",
+          model_options: "Model Options",
+          tool_options: "Tool Options",
+          "MCP Services": "MCP Services",
+          "Add/Remove MCP Services": "Add/Remove MCP Services",
+          "Edit MCP Services": "Edit MCP Services",
+          Label: "Label",
+          "Server URL": "Server URL",
+          "Require Approval": "Require Approval",
+          "Allowed Tools": "Allowed Tools",
+          "Comma separated": "Comma separated",
+          "Add/Save Service": "Add/Save Service",
+          new_chat: "New Chat",
+          download_thread: "Download Thread",
+          download_json: "Download JSON",
+          download_markdown: "Download Markdown",
+          usage_information: "Usage Information",
+          "User information": "User Information",
+          chat_history: "Chat History",
+          close: "Close",
+          empty_chat: "Empty Chat",
+          delete_chat: "Delete Chat",
+          open_issue: "Open Issue",
+          release_notes: "Release Notes",
+          Theme: "Theme",
+          Config: "Config",
+          Minimize: "Minimize",
+          about: "About",
+          About: "About",
+          "Accept Terms": "Accept Terms",
+          "Remove Message": "Remove Message",
+          chatbot_description:
+            "K!mpuls is the privacy-friendly access of the South Westphalia University of Applied Sciences to OpenAI's language models.",
+          chat_mode_desc:
+            "In chat mode, you can chat with the chatbot. In this mode, you can select the language model used. The chatbot can help you answer questions and solve problems, but it cannot access tools or external APIs.",
+          assistant_mode_desc:
+            "In assistant mode, you can use the chatbot as an assistant. Currently, only a limited number of pre-configured assistants are available.",
         },
+      }, // German
+      de: {
+        translation: {
+          user_not_allowed: `
+# Kein Zugriff
 
-        // Translation messages. Add any languages
-        // you want here.
-        resources: {
-            // English
-            en: {
-                // `translation` is the default namespace.
-                // More details about namespaces shortly.
-                translation: {
-                    hello_world: "Hello, World!",
-                    count_messages: "{{count}} messages",
-                    chatbot_title: "K!mpuls, the privacy-friendly chatbot of FH Südwestfalen",
-                    system_welcome: "Hello, I'm K!mpuls, your university chatbot. How can I help you?",
-                    new_conversation: "This is a New Conversation",
-                    top_p_help: "Top_p is a parameter that controls the randomness in the model's output by limiting the token pool, specifying that only those tokens with a cumulative probability that adds up to the top_p value can be considered for selection.",
-                    temperature_help: "Temperature is a parameter that controls the randomness in the model's output by scaling the logits before applying softmax.",
-                    theme_help: "Select a color scheme for the user interface.",
-                    language_help: "Select a language for the user interface.",
-                    send_help: "Select a button for sending messages.",
-                    fontsize_help: "Select the font size of the user interface.",
-                    openai_model_help: "Select a model for AI support.",
-                    custom_endpoint_desc: "If you don't want to use our proxy server, you can configure a different endpoint, e.g. api.openai.com",
-                    chat_settings: "Chat Settings",
-                    clear_thread: "Clear Conversation",
-                    reload_thread: "Reload Conversation",
-                    general: "General",
-                    files: "Files",
-                    name: "Name",
-                    instructions: "Instructions",
-                    help_name: "Give the chatbot a name.",
-                    help_instructions: "Give the chatbot instructions.",
-                    help: "Help",
-                    save: "Save",
-                    cancel: "Cancel",
-                    title: "Title",
-                },
-            },
-            // German
-            de: {
-                translation: {
-                    hello_world: "Hallo, Welt!",
-                    chatbot_title: "K!mpuls",
-                    chatbot_description: "K!mpuls ist der datenschutzfreundliche Zugang der Fachhochschule Südwestfalen zu den Sprachmodellen von OpenAI.",
-                    system_welcome: "Hallo, ich bin K!mpuls, Dein FH-Chatbot. Wie kann ich Dir helfen?",
-                    "copy": "Kopieren",
-                    "Enter something....": "Gib Deine Frage ein …",
-                    "Remove Messages": "Nachrichten entfernen",
-                    "Remove Message": "Nachricht entfernen",
-                    "Search...": "Suche …",
-                    count_messages_one: "Eine Nachricht",
-                    count_messages_other: "{{count}} Nachrichten",
-                    new_conversation: "Dies ist ein neues Gespräch",
-                    "New Conversation": "Neues Gespräch",
-                    "Start a new conversation to begin storing them locally.": "Beginnen Sie ein neues Gespräch. Die Nachrichten werden lokal gespeichert.",
-                    theme_help: "Wählen Sie ein Farbschema für die Benutzeroberfläche aus.",
-                    language_help: "Wählen Sie eine Sprache für die Benutzeroberfläche aus.",
-                    send_help: "Wählen Sie eine Taste für das Senden von Nachrichten aus.",
-                    fontsize: "Schriftgröße",
-                    fontsize_help: "Wählen Sie die Schriftgröße der Benutzeroberfläche aus.",
-                    openai_model_help: "Wählen Sie ein Modell für die KI-Unterstützung aus.",
-                    custom_endpoint_desc: "Wenn Sie unseren Proxy-Server nicht verwenden möchten, können Sie einen anderen Endpunkt konfigurieren, z.B. api.openai.com",
-                    about: "Infos",
-                    chat_settings: "Chat-Einstellungen",
-                    clear_thread: "Chat löschen",
-                    reload_thread: "Unterhaltung neu laden",
-                    new_chat: "Neuer Chat",
-                    delete_chat: "Chat löschen",
-                    clear_chat: "Chat löschen",
-                    delete_message: "Nachricht löschen",
-                    delete_conversation: "Unterhaltung löschen",
-                    empty_chat: "Noch keine Nachrichten",
-                    more_actions: "Mehr Aktionen",
-                    chat_history: "Chat-Verlauf",
-                    general: "Allgemein",
-                    files: "Dateien",
-                    name: "Name",
-                    help_name: "Dies ist der interne Name des Chatbots",
-                    instructions: "Anweisungen",
-                    help_instructions: "Dies sind Arbeitsanweisungen für den Chatbot.",
-                    help: "Hilfe",
-                    save: "Speichern",
-                    cancel: "Abbrechen",
-                    title: "Titel",
-                    help_title: "Dieser Titel wird in der Chat-Überschrift angezeigt.",
-                    code_editor: "Code-Editor",
-                    help_code_editor: "Aktivieren Sie den Code-Editor für die Bearbeitung von Skripten, etwa für einen Python-Tutor.",
-                    tools: "Werkzeuge",
-                    tool_retrieval: "Informationssuche",
-                    tool_code_interpreter: "Code-Interpreter",
-                    help_delete_file: "Löschen Sie die Datei aus dem Chatbot.",
-                    send: "Senden",
-                    clear: "Löschen",
-                    description: "Beschreibung",
-                    help_description: "Geben Sie eine Beschreibung des Chatbots ein.",
-                    help_gravatar: "Falls Sie bei Gravatar registriert sind, aktivieren Sie diese Option, um Ihr Profilbild anzuzeigen. Gravatar ist ein Dienst, der Ihr Profilbild anhand Ihrer E-Mail-Adresse erkennt. <strong>Achtung</strong>: Ihre IP-Adresse wird an Gravatar übertragen.",
-                    gravatar: "Gravatar",
-                    open_issue: "Melde einen Verbesserungswunsch",
-                    theme_style: "Farbschema",
-                    language: "Sprache",
+Der Zugriff auf den Chat ist nur für **Mitglieder der FH SWF** möglich. 
+Wenn du ein Mitglied bist, melde dich bitte mit Deiner **Hochschulkennung** an.
+`,
+          hello_world: "Hallo, Welt!",
+          chatbot_title: "K!mpuls",
+          chatbot_description:
+            "K!mpuls ist der datenschutzfreundliche Zugang der Fachhochschule Südwestfalen zu den Sprachmodellen von OpenAI.",
+          system_welcome:
+            "Hallo, ich bin K!mpuls, Dein FH-Chatbot. Wie kann ich Dir helfen?",
+          copy: "Kopieren",
+          "Enter something....": "Gib Deine Frage ein …",
+          "Remove Messages": "Nachrichten entfernen",
+          "Remove Message": "Nachricht entfernen",
+          "Search...": "Suche …",
+          count_messages_one: "Eine Nachricht",
+          count_messages_other: "{{count}} Nachrichten",
+          new_conversation: "Dies ist ein neues Gespräch",
+          "New Conversation": "Neues Gespräch",
+          "Start a new conversation to begin storing them locally.":
+            "Beginnen Sie ein neues Gespräch. Die Nachrichten werden lokal gespeichert.",
+          theme_help:
+            "Wählen Sie ein Farbschema für die Benutzeroberfläche aus.",
+          language_help:
+            "Wählen Sie eine Sprache für die Benutzeroberfläche aus.",
+          send_help:
+            "Wählen Sie eine Taste für das Senden von Nachrichten aus.",
+          fontsize: "Schriftgröße",
+          fontsize_help:
+            "Wählen Sie die Schriftgröße der Benutzeroberfläche aus.",
+          openai_model_help:
+            "Wählen Sie ein Modell für die KI-Unterstützung aus.",
+          custom_endpoint_desc:
+            "Wenn Sie unseren Proxy-Server nicht verwenden möchten, können Sie einen anderen Endpunkt konfigurieren, z.B. api.openai.com",
+          about: "Infos",
+          chat_settings: "Chat-Einstellungen",
+          clear_thread: "Chat löschen",
+          reload_thread: "Unterhaltung neu laden",
+          new_chat: "Neuer Chat",
+          delete_chat: "Chat löschen",
+          clear_chat: "Chat löschen",
+          delete_message: "Nachricht löschen",
+          delete_conversation: "Unterhaltung löschen",
+          empty_chat: "Noch keine Nachrichten",
+          more_actions: "Mehr Aktionen",
+          chat_history: "Chat-Verlauf",
+          general: "Allgemein",
+          files: "Dateien",
+          name: "Name",
+          help_name: "Dies ist der interne Name des Chatbots",
+          instructions: "Anweisungen",
+          help_instructions: "Dies sind Arbeitsanweisungen für den Chatbot.",
+          help: "Hilfe",
+          save: "Speichern",
+          cancel: "Abbrechen",
+          title: "Titel",
+          help_title: "Dieser Titel wird in der Chat-Überschrift angezeigt.",
+          code_editor: "Code-Editor",
+          help_code_editor:
+            "Aktivieren Sie den Code-Editor für die Bearbeitung von Skripten, etwa für einen Python-Tutor.",
+          tools: "Werkzeuge",
+          tool_retrieval: "Informationssuche",
+          tool_code_interpreter: "Code-Interpreter",
+          help_delete_file: "Löschen Sie die Datei aus dem Chatbot.",
+          send: "Senden",
+          clear: "Löschen",
+          description: "Beschreibung",
+          help_description: "Geben Sie eine Beschreibung des Chatbots ein.",
+          help_gravatar:
+            "Falls Sie bei Gravatar registriert sind, aktivieren Sie diese Option, um Ihr Profilbild anzuzeigen. Gravatar ist ein Dienst, der Ihr Profilbild anhand Ihrer E-Mail-Adresse erkennt. <strong>Achtung</strong>: Ihre IP-Adresse wird an Gravatar übertragen.",
+          gravatar: "Gravatar",
+          open_issue: "Melde einen Verbesserungswunsch",
+          theme_style: "Farbschema",
+          language: "Sprache",
 
-                    api_mode: "API-Modus",
-                    api_mode_help: "Wählen Sie den API-Modus aus.",
-                    assistant: "Assistent",
-                    assistent_help: "Wählen Sie den Assistenten aus.",
-                    max_tokens: "Maximale Tokens",
-                    max_tokens_help: "Wählen Sie die maximale Anzahl von Tokens aus.",
-                    top_p: "Top_p",
-                    top_p_help: "Top_p ist ein Parameter, der die Zufälligkeit in der Ausgabe des Modells steuert, indem der Token-Pool begrenzt wird und festgelegt wird, dass nur diejenigen Token mit einer kumulativen Wahrscheinlichkeit, die sich auf den top_p-Wert addiert, für die Auswahl in Betracht gezogen werden können.",
-                    temperature: "Temperatur",
-                    temperature_help: "Die Temperatur ist ein Parameter, der die Zufälligkeit in der Ausgabe des Modells steuert, indem die Logits skaliert werden, bevor die Softmax-Funktion angewendet wird. Eine höhere Temperatur führt zu zufälligeren Ausgaben.",
-                    api_base_url: "API-Basis-URL",
-                    api_base_url_help: "Hier können Sie eine eigene API-Basis-URL eingeben.",
-                    api_key: "API-Schlüssel",
-                    api_key_help: "Hier können Sie einen eigenen API-Schlüssel eingeben.",
-                    organization_id: "Organisations-ID",
-                    organization_id_help: "Hier können Sie eine eigene Organisations-ID eingeben.",
+          api_mode: "API-Modus",
+          api_mode_help: "Wählen Sie den API-Modus aus.",
+          assistant: "Assistent",
+          assistent_help: "Wählen Sie den Assistenten aus.",
+          max_tokens: "Maximale Tokens",
+          max_tokens_help: "Wählen Sie die maximale Anzahl von Tokens aus.",
+          top_p: "Top_p",
+          top_p_help:
+            "Top_p ist ein Parameter, der die Zufälligkeit in der Ausgabe des Modells steuert, indem der Token-Pool begrenzt wird und festgelegt wird, dass nur diejenigen Token mit einer kumulativen Wahrscheinlichkeit, die sich auf den top_p-Wert addiert, für die Auswahl in Betracht gezogen werden können.",
+          temperature: "Temperatur",
+          temperature_help:
+            "Die Temperatur ist ein Parameter, der die Zufälligkeit in der Ausgabe des Modells steuert, indem die Logits skaliert werden, bevor die Softmax-Funktion angewendet wird. Eine höhere Temperatur führt zu zufälligeren Ausgaben.",
+          api_base_url: "API-Basis-URL",
+          api_base_url_help:
+            "Hier können Sie eine eigene API-Basis-URL eingeben.",
+          api_key: "API-Schlüssel",
+          api_key_help: "Hier können Sie einen eigenen API-Schlüssel eingeben.",
+          organization_id: "Organisations-ID",
+          organization_id_help:
+            "Hier können Sie eine eigene Organisations-ID eingeben.",
 
-                    About: "Über die Anwendung",
-                    "User information": "Benutzerinformationen",
+          About: "Über die Anwendung",
+          "User information": "Benutzerinformationen",
 
-                    Title: "Titel",
-                    Cancel: "Abbrechen",
-                    Save: "Speichern",
-                    Close: "Schließen",
-                    close: "Schließen",
-                    Reset: "Zurücksetzen",
-                    "Edit Conversation": "Unterhaltung bearbeiten",
-                    "Edit the title of the conversation.": "Bearbeiten Sie den Titel der Unterhaltung.",
-                    "Accept Terms": "Ich habe diese Hinweise gelesen und verstanden.",
-                    "download_thread": "Unterhaltung herunterladen",
+          Title: "Titel",
+          Cancel: "Abbrechen",
+          Save: "Speichern",
+          Close: "Schließen",
+          close: "Schließen",
+          Reset: "Zurücksetzen",
+          "Edit Conversation": "Unterhaltung bearbeiten",
+          "Edit the title of the conversation.":
+            "Bearbeiten Sie den Titel der Unterhaltung.",
+          "Accept Terms": "Ich habe diese Hinweise gelesen und verstanden.",
+          download_thread: "Unterhaltung herunterladen",
 
-                    "chat_mode_desc": "Im Chat-Modus können Sie mit dem Chatbbot unterhalten. In diesem Modus können Sie das verwendete Sprachmodell auswählen. Der Chatbot kann Ihnen bei der Beantwortung von Fragen und der Lösung von Problemen helfen, allerdings kann er nicht auf Tools oder externe APIs zugreifen.",
-                    "assistant_mode_desc": "Im Assistenten-Modus können Sie den Chatbot als Assistenten verwenden. Aktuell steht nur eine eingeschränkte Anzahl von vorkonfigurierten Assistenten zur Verfügung.",
-                    "Global OpenAI Config": "Globale OpenAI-Einstellungen",
-                    "Custom API Endpoint": "Benutzerdefinierter API-Endpunkt",
+          chat_mode_desc:
+            "Im Chat-Modus können Sie mit dem Chatbbot unterhalten. In diesem Modus können Sie das verwendete Sprachmodell auswählen. Der Chatbot kann Ihnen bei der Beantwortung von Fragen und der Lösung von Problemen helfen, allerdings kann er nicht auf Tools oder externe APIs zugreifen.",
+          assistant_mode_desc:
+            "Im Assistenten-Modus können Sie den Chatbot als Assistenten verwenden. Aktuell steht nur eine eingeschränkte Anzahl von vorkonfigurierten Assistenten zur Verfügung.",
+          "Global OpenAI Config": "Globale OpenAI-Einstellungen",
+          "Custom API Endpoint": "Benutzerdefinierter API-Endpunkt",
 
-                    "An error occurred": "Ein Fehler ist aufgetreten",
-                    "Try again": "Erneut versuchen",
-                    "Reset settings": "Einstellungen zurücksetzen",
+          "An error occurred": "Ein Fehler ist aufgetreten",
+          "Try again": "Erneut versuchen",
+          "Reset settings": "Einstellungen zurücksetzen",
 
-                    "COMMAND_ENTER": "Strg + Enter",
-                    "ALT_ENTER": "Alt + Enter",
-                    "ENTER": "Enter",
-                    "Code Editor": "Code-Editor",
-                    "Please enter Python code.": "Bitte geben Sie Python-Code ein.",
+          COMMAND_ENTER: "Strg + Enter",
+          ALT_ENTER: "Alt + Enter",
+          ENTER: "Enter",
+          "Code Editor": "Code-Editor",
+          "Please enter Python code.": "Bitte geben Sie Python-Code ein.",
 
-                    "Apps": "Apps",
-                    "History": "Chat-Verlauf",
-                    "Config": "Einstellungen",
-                    "Minimize": "Minimieren",
-                    "Maximize": "Maximieren",
-                    "Theme": "Farbschema",
-                    "Language": "Sprache",
-                    "hide_toolbar": "Werkzeugleiste ausblenden",
-                    "show_toolbar": "Werkzeugleiste einblenden",
-                    "hide_sidebar": "Seitenleiste ausblenden",
-                    "show_sidebar": "Seitenleiste einblenden",
-                    "chats": "Chats",
-                    "download_json": "als JSON herunterladen",
-                    "download_markdown": "als Markdown herunterladen",
-                    chat_options: "Chat-Optionen",
-                    tool_options: "Werkzeug-Optionen",
-                    model_options: "Modell",
-                    release_notes: "Versionshinweise",
-                    thinking: "Denke nach...",
-                    web_search_call: "Web-Suche",
-                    web_search: "Web-Suche",
-                    web_search_call_description: "Bei dieser Antwort wurde eine Web-Suche durchgeführt.",
-                    web_search_call_title: "Web-Suche",
-                    error_occurred: "Ein Fehler ist aufgetreten",
-                    not_image: "Kein Bild",
-                    not_image_description: "Sie können nur Bilder hochladen.",
+          Apps: "Apps",
+          History: "Chat-Verlauf",
+          Config: "Einstellungen",
+          Minimize: "Minimieren",
+          Maximize: "Maximieren",
+          Theme: "Farbschema",
+          Language: "Sprache",
+          hide_toolbar: "Werkzeugleiste ausblenden",
+          show_toolbar: "Werkzeugleiste einblenden",
+          hide_sidebar: "Seitenleiste ausblenden",
+          show_sidebar: "Seitenleiste einblenden",
+          chats: "Chats",
+          download_json: "als JSON herunterladen",
+          download_markdown: "als Markdown herunterladen",
+          chat_options: "Chat-Optionen",
+          tool_options: "Werkzeug-Optionen",
+          model_options: "Modell",
+          release_notes: "Versionshinweise",
+          thinking: "Denke nach...",
+          web_search_call: "Web-Suche",
+          web_search: "Web-Suche",
+          web_search_call_description:
+            "Bei dieser Antwort wurde eine Web-Suche durchgeführt.",
+          web_search_call_title: "Web-Suche",
+          error_occurred: "Ein Fehler ist aufgetreten",
+          not_image: "Kein Bild",
+          not_image_description: "Sie können nur Bilder hochladen.",
 
-                    total_requests: "Gesamtzahl der Aufrufe (fh-swf.de) über die Monate",
-                    total_requests_title: "Gesamtzahl der Aufrufe",
-                    requests_breakdown_legend: "Aufschlüsselung der Aufrufe nach Bereichen",
-                    requests_breakdown_title: "Aufschlüsselung der Aufrufe",
-                    requests_breakdown_label: "# Zugriffe",
-                    usage_information: "Nutzungsstatistik",
-                    usage_information_description: "Hier finden Sie eine Übersicht über die Nutzung des Chatbots.",
-                    scope_breakdown_title: "Aufschlüsselung der Zugriffe nach Bereichen",
-                    role_breakdown_title: "Aufschlüsselung der Zugriffe nach Rollen",
+          total_requests: "Gesamtzahl der Aufrufe (fh-swf.de) über die Monate",
+          total_requests_title: "Gesamtzahl der Aufrufe",
+          requests_breakdown_legend:
+            "Aufschlüsselung der Aufrufe nach Bereichen",
+          requests_breakdown_title: "Aufschlüsselung der Aufrufe",
+          requests_breakdown_label: "# Zugriffe",
+          usage_information: "Nutzungsstatistik",
+          usage_information_description:
+            "Hier finden Sie eine Übersicht über die Nutzung des Chatbots.",
+          scope_breakdown_title: "Aufschlüsselung der Zugriffe nach Bereichen",
+          role_breakdown_title: "Aufschlüsselung der Zugriffe nach Rollen",
 
-                    import_export: "Import/Export",
-                    import_export_description: "Hier können Sie Ihre Konfiguration (inkl. Chat-Historie) importieren oder exportieren.",
-                    import: "Importieren",
-                    import_settings: "Einstellungen importieren",
-                    import_description: "Hier können Sie Ihre Konfiguration importieren.",
-                    import_settings_help: "Hier können Sie Ihre Konfiguration importieren. Bitte beachten Sie, dass alle bestehenden Einstellungen überschrieben werden.",
-                    import_settings_error: "Beim Importieren der Einstellungen ist ein Fehler aufgetreten. Bitte überprüfen Sie die Datei und versuchen Sie es erneut.",
-                    import_settings_success: "Einstellungen importiert",
-                    import_settings_success_desc: "Die Einstellungen wurden erfolgreich importiert.",
-                    export: "Exportieren",
-                    export_settings: "Einstellungen exportieren",
-                    export_settings_help: "Hier können Sie Ihre Konfiguration exportieren.",
+          import_export: "Import/Export",
+          import_export_description:
+            "Hier können Sie Ihre Konfiguration (inkl. Chat-Historie) importieren oder exportieren.",
+          import: "Importieren",
+          import_settings: "Einstellungen importieren",
+          import_description: "Hier können Sie Ihre Konfiguration importieren.",
+          import_settings_help:
+            "Hier können Sie Ihre Konfiguration importieren. Bitte beachten Sie, dass alle bestehenden Einstellungen überschrieben werden.",
+          import_settings_error:
+            "Beim Importieren der Einstellungen ist ein Fehler aufgetreten. Bitte überprüfen Sie die Datei und versuchen Sie es erneut.",
+          import_settings_success: "Einstellungen importiert",
+          import_settings_success_desc:
+            "Die Einstellungen wurden erfolgreich importiert.",
+          export: "Exportieren",
+          export_settings: "Einstellungen exportieren",
+          export_settings_help:
+            "Hier können Sie Ihre Konfiguration exportieren.",
 
-                    mcp_call: "MCP-Dienst",
-                    mcp_call_description: "Bei dieser Antwort wurde ein MCP-Dienst aufgerufen.",
-                    mcp_call_title: "Aufgerufene MCP-Tools",
-                    mcp_list_tools: "MCP-Tools",
-                    mcp_list_tools_description: "Auflistung der verfügbaren MCP-Dienste.",
-                    mcp_list_tools_title: "Gefundene MCP-Tools",
-                    code_interpreter_call: "Code-Interpreter",
-                    code_interpreter_call_description: "Bei dieser Antwort wurde der Code-Interpreter verwendet.",
-                    code_interpreter_call_title: "Code-Interpreter",
-                    reasoning: "Reasoning",
-                    reasoning_description: "Denke über die nächsten Schritte nach.",
-                    reasoning_title: "Reasoning Schritte",
-                    "Code": "Code",
-                    "Outputs": "Ausgaben",
-                    "MCP Services": "MCP-Dienste",
-                    "Edit MCP Services": "MCP-Dienste bearbeiten",
-                    "Add/Save Service": "Dienst hinzufügen/speichern",
-                    "Add/Remove MCP Services": "MCP-Dienste hinzufügen/entfernen",
-                    "Add Service": "Dienst hinzufügen",
-                    "Save Service": "Dienst speichern",
-                    "Label": "Bezeichnung",
-                    "Server URL": "Server-URL",
-                    "Allowed Tools": "Erlaubte Werkzeuge",
-                    "Comma separated": "Kommagetrennt",
-                    "Require Approval": "Genehmigung erforderlich",
-                    "Always": "Immer",
-                    "Never": "Niemals",
+          mcp_call: "MCP-Dienst",
+          mcp_call_description:
+            "Bei dieser Antwort wurde ein MCP-Dienst aufgerufen.",
+          mcp_call_title: "Aufgerufene MCP-Tools",
+          mcp_list_tools: "MCP-Tools",
+          mcp_list_tools_description: "Auflistung der verfügbaren MCP-Dienste.",
+          mcp_list_tools_title: "Gefundene MCP-Tools",
+          code_interpreter_call: "Code-Interpreter",
+          code_interpreter_call_description:
+            "Bei dieser Antwort wurde der Code-Interpreter verwendet.",
+          code_interpreter_call_title: "Code-Interpreter",
+          reasoning: "Reasoning",
+          reasoning_description: "Denke über die nächsten Schritte nach.",
+          reasoning_title: "Reasoning Schritte",
+          Code: "Code",
+          Outputs: "Ausgaben",
+          "MCP Services": "MCP-Dienste",
+          "Edit MCP Services": "MCP-Dienste bearbeiten",
+          "Add/Save Service": "Dienst hinzufügen/speichern",
+          "Add/Remove MCP Services": "MCP-Dienste hinzufügen/entfernen",
+          "Add Service": "Dienst hinzufügen",
+          "Save Service": "Dienst speichern",
+          Label: "Bezeichnung",
+          "Server URL": "Server-URL",
+          "Allowed Tools": "Erlaubte Werkzeuge",
+          "Comma separated": "Kommagetrennt",
+          "Require Approval": "Genehmigung erforderlich",
+          Always: "Immer",
+          Never: "Niemals",
 
-                    "image_generation": "Bildgenerierung",
-                    "image_generation_call": "Bildgenerierung",
-                    "image_generation_call_description": "Bei dieser Antwort wurde eine Bildgenerierung durchgeführt.",
+          image_generation: "Bildgenerierung",
+          image_generation_call: "Bildgenerierung",
+          image_generation_call_description:
+            "Bei dieser Antwort wurde eine Bildgenerierung durchgeführt.",
 
-                    opfs_not_supported: "Origin Private File System (OPFS) wird von Ihrem Browser nicht unterstützt.",
-                    opfs_not_supported_desc: "OPFS wird von Ihrem Browser nicht unterstützt, Bilder können nicht gespeichert werden. Bitte aktualisieren Sie Ihren Browser, um diese Funktion zu nutzen.",
-                },
-            },
+          opfs_not_supported:
+            "Origin Private File System (OPFS) wird von Ihrem Browser nicht unterstützt.",
+          opfs_not_supported_desc:
+            "OPFS wird von Ihrem Browser nicht unterstützt, Bilder können nicht gespeichert werden. Bitte aktualisieren Sie Ihren Browser, um diese Funktion zu nutzen.",
+          upload_file: "Datei hochladen",
+          upload_file_desc:
+            "Datei hochladen",
         },
-    });
+      },
+    },
+  });
 
-export default i18n;
\ No newline at end of file
+export { default } from "i18next";
diff --git a/src/index.tsx b/src/index.tsx
index b8a763e1..86a2d14a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,17 +1,15 @@
-import React from "react";
-import * as ReactDOMClient from "react-dom/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import ChatApp from "./chat/ChatApp";
-import { Provider } from "./components/ui/provider"
-import { defaultSystem } from "@chakra-ui/react"
+import { Provider } from "./components/ui/provider";
 import "./i18n/config.ts";
 
-const root = ReactDOMClient.createRoot(document.getElementById("app"));
-
+const root = createRoot(document.getElementById("app"));
 
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <Provider>
       <ChatApp />
     </Provider>
-  </React.StrictMode>
+  </StrictMode>
 );
diff --git a/yarn.lock b/yarn.lock
index 0cf4096f..e0902471 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,6 +41,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@adobe/css-tools@npm:^4.4.0":
+  version: 4.4.4
+  resolution: "@adobe/css-tools@npm:4.4.4"
+  checksum: 10c0/8f3e6cfaa5e6286e6f05de01d91d060425be2ebaef490881f5fe6da8bbdb336835c5d373ea337b0c3b0a1af4be048ba18780f0f6021d30809b4545922a7e13d9
+  languageName: node
+  linkType: hard
+
 "@ark-ui/react@npm:^5.27.1":
   version: 5.28.0
   resolution: "@ark-ui/react@npm:5.28.0"
@@ -891,6 +898,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/aix-ppc64@npm:0.27.0"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/android-arm64@npm:0.25.12"
@@ -898,6 +912,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/android-arm64@npm:0.27.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/android-arm@npm:0.25.12"
@@ -905,6 +926,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/android-arm@npm:0.27.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/android-x64@npm:0.25.12"
@@ -912,6 +940,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/android-x64@npm:0.27.0"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/darwin-arm64@npm:0.25.12"
@@ -919,6 +954,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/darwin-arm64@npm:0.27.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/darwin-x64@npm:0.25.12"
@@ -926,6 +968,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/darwin-x64@npm:0.27.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/freebsd-arm64@npm:0.25.12"
@@ -933,6 +982,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/freebsd-arm64@npm:0.27.0"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/freebsd-x64@npm:0.25.12"
@@ -940,6 +996,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/freebsd-x64@npm:0.27.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/linux-arm64@npm:0.25.12"
@@ -947,6 +1010,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/linux-arm64@npm:0.27.0"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/linux-arm@npm:0.25.12"
@@ -954,6 +1024,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/linux-arm@npm:0.27.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/linux-ia32@npm:0.25.12"
@@ -961,6 +1038,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/linux-ia32@npm:0.27.0"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/linux-loong64@npm:0.25.12"
@@ -968,6 +1052,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/linux-loong64@npm:0.27.0"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/linux-mips64el@npm:0.25.12"
@@ -975,6 +1066,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/linux-mips64el@npm:0.27.0"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/linux-ppc64@npm:0.25.12"
@@ -982,6 +1080,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/linux-ppc64@npm:0.27.0"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/linux-riscv64@npm:0.25.12"
@@ -989,6 +1094,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/linux-riscv64@npm:0.27.0"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/linux-s390x@npm:0.25.12"
@@ -996,6 +1108,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/linux-s390x@npm:0.27.0"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/linux-x64@npm:0.25.12"
@@ -1003,6 +1122,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/linux-x64@npm:0.27.0"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-arm64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/netbsd-arm64@npm:0.25.12"
@@ -1010,6 +1136,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-arm64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/netbsd-arm64@npm:0.27.0"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/netbsd-x64@npm:0.25.12"
@@ -1017,6 +1150,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/netbsd-x64@npm:0.27.0"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-arm64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/openbsd-arm64@npm:0.25.12"
@@ -1024,6 +1164,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-arm64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/openbsd-arm64@npm:0.27.0"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/openbsd-x64@npm:0.25.12"
@@ -1031,6 +1178,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/openbsd-x64@npm:0.27.0"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openharmony-arm64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/openharmony-arm64@npm:0.25.12"
@@ -1038,6 +1192,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openharmony-arm64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/openharmony-arm64@npm:0.27.0"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/sunos-x64@npm:0.25.12"
@@ -1045,6 +1206,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/sunos-x64@npm:0.27.0"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/win32-arm64@npm:0.25.12"
@@ -1052,6 +1220,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/win32-arm64@npm:0.27.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/win32-ia32@npm:0.25.12"
@@ -1059,6 +1234,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/win32-ia32@npm:0.27.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.25.12":
   version: 0.25.12
   resolution: "@esbuild/win32-x64@npm:0.25.12"
@@ -1066,7 +1248,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/eslint-utils@npm:^4.8.0":
+"@esbuild/win32-x64@npm:0.27.0":
+  version: 0.27.0
+  resolution: "@esbuild/win32-x64@npm:0.27.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@eslint-community/eslint-utils@npm:^4.7.0, @eslint-community/eslint-utils@npm:^4.8.0":
   version: 4.9.0
   resolution: "@eslint-community/eslint-utils@npm:4.9.0"
   dependencies:
@@ -1077,7 +1266,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.12.1":
+"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.12.1":
   version: 4.12.2
   resolution: "@eslint-community/regexpp@npm:4.12.2"
   checksum: 10c0/fddcbc66851b308478d04e302a4d771d6917a0b3740dc351513c0da9ca2eab8a1adf99f5e0aa7ab8b13fa0df005c81adeee7e63a92f3effd7d367a163b721c2d
@@ -2182,6 +2371,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pkgr/core@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@pkgr/core@npm:0.2.9"
+  checksum: 10c0/ac8e4e8138b1a7a4ac6282873aef7389c352f1f8b577b4850778f5182e4a39a5241facbe48361fec817f56d02b51691b383010843fb08b34a8e8ea3614688fd5
+  languageName: node
+  linkType: hard
+
 "@playwright/test@npm:^1.56.1":
   version: 1.56.1
   resolution: "@playwright/test@npm:1.56.1"
@@ -2817,6 +3013,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/global@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@storybook/global@npm:5.0.0"
+  checksum: 10c0/8f1b61dcdd3a89584540896e659af2ecc700bc740c16909a7be24ac19127ea213324de144a141f7caf8affaed017d064fea0618d453afbe027cf60f54b4a6d0b
+  languageName: node
+  linkType: hard
+
+"@storybook/icons@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "@storybook/icons@npm:2.0.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/df2bbf1a5b50f12ab1bf78cae6de4dbf7c49df0e3a5f845553b51b20adbe8386a09fd172ea60342379f9284bb528cba2d0e2659cae6eb8d015cf92c8b32f1222
+  languageName: node
+  linkType: hard
+
 "@swc/helpers@npm:^0.5.0":
   version: 0.5.17
   resolution: "@swc/helpers@npm:0.5.17"
@@ -2826,6 +3039,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/jest-dom@npm:^6.6.3":
+  version: 6.9.1
+  resolution: "@testing-library/jest-dom@npm:6.9.1"
+  dependencies:
+    "@adobe/css-tools": "npm:^4.4.0"
+    aria-query: "npm:^5.0.0"
+    css.escape: "npm:^1.5.1"
+    dom-accessibility-api: "npm:^0.6.3"
+    picocolors: "npm:^1.1.1"
+    redent: "npm:^3.0.0"
+  checksum: 10c0/4291ebd2f0f38d14cefac142c56c337941775a5807e2a3d6f1a14c2fbd6be76a18e498ed189e95bedc97d9e8cf1738049bc76c85b5bc5e23fae7c9e10f7b3a12
+  languageName: node
+  linkType: hard
+
+"@testing-library/user-event@npm:^14.6.1":
+  version: 14.6.1
+  resolution: "@testing-library/user-event@npm:14.6.1"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 10c0/75fea130a52bf320d35d46ed54f3eec77e71a56911b8b69a3fe29497b0b9947b2dc80d30f04054ad4ce7f577856ae3e5397ea7dff0ef14944d3909784c7a93fe
+  languageName: node
+  linkType: hard
+
 "@tootallnate/quickjs-emscripten@npm:^0.23.0":
   version: 0.23.0
   resolution: "@tootallnate/quickjs-emscripten@npm:0.23.0"
@@ -2910,6 +3146,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/chai@npm:^5.2.2":
+  version: 5.2.3
+  resolution: "@types/chai@npm:5.2.3"
+  dependencies:
+    "@types/deep-eql": "npm:*"
+    assertion-error: "npm:^2.0.1"
+  checksum: 10c0/e0ef1de3b6f8045a5e473e867c8565788c444271409d155588504840ad1a53611011f85072188c2833941189400228c1745d78323dac13fcede9c2b28bacfb2f
+  languageName: node
+  linkType: hard
+
 "@types/d3-array@npm:^3.0.3":
   version: 3.2.2
   resolution: "@types/d3-array@npm:3.2.2"
@@ -2988,6 +3234,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/deep-eql@npm:*":
+  version: 4.0.2
+  resolution: "@types/deep-eql@npm:4.0.2"
+  checksum: 10c0/bf3f811843117900d7084b9d0c852da9a044d12eb40e6de73b552598a6843c21291a8a381b0532644574beecd5e3491c5ff3a0365ab86b15d59862c025384844
+  languageName: node
+  linkType: hard
+
 "@types/estree-jsx@npm:^1.0.0":
   version: 1.0.5
   resolution: "@types/estree-jsx@npm:1.0.5"
@@ -3151,6 +3404,142 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/eslint-plugin@npm:8.48.0":
+  version: 8.48.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.48.0"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.48.0"
+    "@typescript-eslint/type-utils": "npm:8.48.0"
+    "@typescript-eslint/utils": "npm:8.48.0"
+    "@typescript-eslint/visitor-keys": "npm:8.48.0"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^7.0.0"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^2.1.0"
+  peerDependencies:
+    "@typescript-eslint/parser": ^8.48.0
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/5f4f9ac3ace3f615bac428859026b70fb7fa236666cfe8856fed3add7e4ba73c7113264c2df7a9d68247b679dfcc21b0414488bda7b9b3de1c209b1807ed7842
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/parser@npm:8.48.0":
+  version: 8.48.0
+  resolution: "@typescript-eslint/parser@npm:8.48.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": "npm:8.48.0"
+    "@typescript-eslint/types": "npm:8.48.0"
+    "@typescript-eslint/typescript-estree": "npm:8.48.0"
+    "@typescript-eslint/visitor-keys": "npm:8.48.0"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/180753e1dc55cd5174a236b738d3b0dd6dd6c131797cd417b3b3b8fac344168f3d21bd49eae6c0a075be29ed69b7bc74d97cadd917f1f4d4c113c29e76c1f9cd
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/project-service@npm:8.48.0":
+  version: 8.48.0
+  resolution: "@typescript-eslint/project-service@npm:8.48.0"
+  dependencies:
+    "@typescript-eslint/tsconfig-utils": "npm:^8.48.0"
+    "@typescript-eslint/types": "npm:^8.48.0"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/6e1d08312fe55a91ba37eb19131af91ad7834bafd15d1cddb83a1e35e5134382e10dc0b14531036ba1c075ce4cba627123625ed6f2e209fb3355f3dda25da0a1
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/scope-manager@npm:8.48.0":
+  version: 8.48.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.48.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.48.0"
+    "@typescript-eslint/visitor-keys": "npm:8.48.0"
+  checksum: 10c0/0766e365901a8af9d9e41fa70464254aacf8b4d167734d88b6cdaa0235e86bfdffc57a3e39a20e105929b8df499d252090f64f81f86770f74626ca809afe54b6
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/tsconfig-utils@npm:8.48.0, @typescript-eslint/tsconfig-utils@npm:^8.48.0":
+  version: 8.48.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.48.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/52e9ce8ffbaf32f3c6f4b8fa8af6e3901c430411e137a0baf650fcefdd8edf3dcc4569eba726a28424471d4d1d96b815aa4cf7b63aa7b67380efd6a8dd354222
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:8.48.0":
+  version: 8.48.0
+  resolution: "@typescript-eslint/type-utils@npm:8.48.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.48.0"
+    "@typescript-eslint/typescript-estree": "npm:8.48.0"
+    "@typescript-eslint/utils": "npm:8.48.0"
+    debug: "npm:^4.3.4"
+    ts-api-utils: "npm:^2.1.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/72ab5c7d183b844e4870bfa5dfeb68e2e7ce5f3e1b33c06d5a8e70f0d0a012c9152ad15071d41ba3788266109804a9f4cdb85d664b11df8948bc930e29e0c244
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/types@npm:8.48.0, @typescript-eslint/types@npm:^8.48.0":
+  version: 8.48.0
+  resolution: "@typescript-eslint/types@npm:8.48.0"
+  checksum: 10c0/865a8f4ae4a50aa8976f3d7e0f874f1a1c80227ec53ded68644d41011c729a489bb59f70683b29237ab945716ea0258e1d47387163379eab3edaaf5e5cc3b757
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:8.48.0":
+  version: 8.48.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.48.0"
+  dependencies:
+    "@typescript-eslint/project-service": "npm:8.48.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.48.0"
+    "@typescript-eslint/types": "npm:8.48.0"
+    "@typescript-eslint/visitor-keys": "npm:8.48.0"
+    debug: "npm:^4.3.4"
+    minimatch: "npm:^9.0.4"
+    semver: "npm:^7.6.0"
+    tinyglobby: "npm:^0.2.15"
+    ts-api-utils: "npm:^2.1.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/f17dd35f7b82654fae9fe83c2eb650572464dbce0170d55b3ef94b99e9aae010f2cbadd436089c8e59eef97d41719ace3a2deb4ac3cdfac26d43b36f34df5590
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:8.48.0, @typescript-eslint/utils@npm:^8.8.1":
+  version: 8.48.0
+  resolution: "@typescript-eslint/utils@npm:8.48.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.7.0"
+    "@typescript-eslint/scope-manager": "npm:8.48.0"
+    "@typescript-eslint/types": "npm:8.48.0"
+    "@typescript-eslint/typescript-estree": "npm:8.48.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/56334312d1dc114a5c8b05dac4da191c40a416a5705fa76797ebdc9f6a96d35727fd0993cf8776f5c4411837e5fc2151bfa61d3eecc98b24f5a821a63a4d56f3
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/visitor-keys@npm:8.48.0":
+  version: 8.48.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.48.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.48.0"
+    eslint-visitor-keys: "npm:^4.2.1"
+  checksum: 10c0/20ae9ec255a786de40cdba281b63f634a642dcc34d2a79c5ffc160109f7f6227c28ae2c64be32cbc53dc68dc398c3da715bfcce90422b5024f15f7124a3c1704
+  languageName: node
+  linkType: hard
+
 "@uiw/react-textarea-code-editor@npm:^3.0.2":
   version: 3.1.1
   resolution: "@uiw/react-textarea-code-editor@npm:3.1.1"
@@ -3189,6 +3578,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/expect@npm:3.2.4":
+  version: 3.2.4
+  resolution: "@vitest/expect@npm:3.2.4"
+  dependencies:
+    "@types/chai": "npm:^5.2.2"
+    "@vitest/spy": "npm:3.2.4"
+    "@vitest/utils": "npm:3.2.4"
+    chai: "npm:^5.2.0"
+    tinyrainbow: "npm:^2.0.0"
+  checksum: 10c0/7586104e3fd31dbe1e6ecaafb9a70131e4197dce2940f727b6a84131eee3decac7b10f9c7c72fa5edbdb68b6f854353bd4c0fa84779e274207fb7379563b10db
+  languageName: node
+  linkType: hard
+
+"@vitest/pretty-format@npm:3.2.4":
+  version: 3.2.4
+  resolution: "@vitest/pretty-format@npm:3.2.4"
+  dependencies:
+    tinyrainbow: "npm:^2.0.0"
+  checksum: 10c0/5ad7d4278e067390d7d633e307fee8103958806a419ca380aec0e33fae71b44a64415f7a9b4bc11635d3c13d4a9186111c581d3cef9c65cc317e68f077456887
+  languageName: node
+  linkType: hard
+
+"@vitest/spy@npm:3.2.4":
+  version: 3.2.4
+  resolution: "@vitest/spy@npm:3.2.4"
+  dependencies:
+    tinyspy: "npm:^4.0.3"
+  checksum: 10c0/6ebf0b4697dc238476d6b6a60c76ba9eb1dd8167a307e30f08f64149612fd50227682b876420e4c2e09a76334e73f72e3ebf0e350714dc22474258292e202024
+  languageName: node
+  linkType: hard
+
+"@vitest/utils@npm:3.2.4":
+  version: 3.2.4
+  resolution: "@vitest/utils@npm:3.2.4"
+  dependencies:
+    "@vitest/pretty-format": "npm:3.2.4"
+    loupe: "npm:^3.1.4"
+    tinyrainbow: "npm:^2.0.0"
+  checksum: 10c0/024a9b8c8bcc12cf40183c246c244b52ecff861c6deb3477cbf487ac8781ad44c68a9c5fd69f8c1361878e55b97c10d99d511f2597f1f7244b5e5101d028ba64
+  languageName: node
+  linkType: hard
+
 "@zag-js/accordion@npm:1.27.1":
   version: 1.27.1
   resolution: "@zag-js/accordion@npm:1.27.1"
@@ -4330,6 +4761,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:^5.0.0":
+  version: 5.3.2
+  resolution: "aria-query@npm:5.3.2"
+  checksum: 10c0/003c7e3e2cff5540bf7a7893775fc614de82b0c5dde8ae823d47b7a28a9d4da1f7ed85f340bdb93d5649caa927755f0e31ecc7ab63edfdfc00c8ef07e505e03e
+  languageName: node
+  linkType: hard
+
 "array-buffer-byte-length@npm:^1.0.1, array-buffer-byte-length@npm:^1.0.2":
   version: 1.0.2
   resolution: "array-buffer-byte-length@npm:1.0.2"
@@ -4452,6 +4890,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"assertion-error@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "assertion-error@npm:2.0.1"
+  checksum: 10c0/bbbcb117ac6480138f8c93cf7f535614282dea9dc828f540cdece85e3c665e8f78958b96afac52f29ff883c72638e6a87d469ecc9fe5bc902df03ed24a55dba8
+  languageName: node
+  linkType: hard
+
 "ast-types@npm:^0.13.4":
   version: 0.13.4
   resolution: "ast-types@npm:0.13.4"
@@ -4461,6 +4906,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ast-types@npm:^0.16.1":
+  version: 0.16.1
+  resolution: "ast-types@npm:0.16.1"
+  dependencies:
+    tslib: "npm:^2.0.1"
+  checksum: 10c0/abcc49e42eb921a7ebc013d5bec1154651fb6dbc3f497541d488859e681256901b2990b954d530ba0da4d0851271d484f7057d5eff5e07cb73e8b10909f711bf
+  languageName: node
+  linkType: hard
+
 "astral-regex@npm:^2.0.0":
   version: 2.0.0
   resolution: "astral-regex@npm:2.0.0"
@@ -4970,6 +5424,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chai@npm:^5.2.0":
+  version: 5.3.3
+  resolution: "chai@npm:5.3.3"
+  dependencies:
+    assertion-error: "npm:^2.0.1"
+    check-error: "npm:^2.1.1"
+    deep-eql: "npm:^5.0.1"
+    loupe: "npm:^3.1.0"
+    pathval: "npm:^2.0.0"
+  checksum: 10c0/b360fd4d38861622e5010c2f709736988b05c7f31042305fa3f4e9911f6adb80ccfb4e302068bf8ed10e835c2e2520cba0f5edc13d878b886987e5aa62483f53
+  languageName: node
+  linkType: hard
+
 "chalk@npm:^2.3.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
@@ -5033,6 +5500,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"check-error@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "check-error@npm:2.1.1"
+  checksum: 10c0/979f13eccab306cf1785fa10941a590b4e7ea9916ea2a4f8c87f0316fc3eab07eabefb6e587424ef0f88cbcd3805791f172ea739863ca3d7ce2afc54641c7f0e
+  languageName: node
+  linkType: hard
+
 "check-more-types@npm:^2.24.0":
   version: 2.24.0
   resolution: "check-more-types@npm:2.24.0"
@@ -5632,6 +6106,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css.escape@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "css.escape@npm:1.5.1"
+  checksum: 10c0/5e09035e5bf6c2c422b40c6df2eb1529657a17df37fda5d0433d722609527ab98090baf25b13970ca754079a0f3161dd3dfc0e743563ded8cfa0749d861c1525
+  languageName: node
+  linkType: hard
+
 "cssdb@npm:^7.6.0":
   version: 7.11.2
   resolution: "cssdb@npm:7.11.2"
@@ -5902,6 +6383,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-eql@npm:^5.0.1":
+  version: 5.0.2
+  resolution: "deep-eql@npm:5.0.2"
+  checksum: 10c0/7102cf3b7bb719c6b9c0db2e19bf0aa9318d141581befe8c7ce8ccd39af9eaa4346e5e05adef7f9bd7015da0f13a3a25dcfe306ef79dc8668aedbecb658dd247
+  languageName: node
+  linkType: hard
+
 "deep-extend@npm:^0.6.0":
   version: 0.6.0
   resolution: "deep-extend@npm:0.6.0"
@@ -6018,6 +6506,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-accessibility-api@npm:^0.6.3":
+  version: 0.6.3
+  resolution: "dom-accessibility-api@npm:0.6.3"
+  checksum: 10c0/10bee5aa514b2a9a37c87cd81268db607a2e933a050074abc2f6fa3da9080ebed206a320cbc123567f2c3087d22292853bdfdceaffdd4334ffe2af9510b29360
+  languageName: node
+  linkType: hard
+
 "dom-converter@npm:^0.2.0":
   version: 0.2.0
   resolution: "dom-converter@npm:0.2.0"
@@ -6423,6 +6918,95 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0":
+  version: 0.27.0
+  resolution: "esbuild@npm:0.27.0"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.27.0"
+    "@esbuild/android-arm": "npm:0.27.0"
+    "@esbuild/android-arm64": "npm:0.27.0"
+    "@esbuild/android-x64": "npm:0.27.0"
+    "@esbuild/darwin-arm64": "npm:0.27.0"
+    "@esbuild/darwin-x64": "npm:0.27.0"
+    "@esbuild/freebsd-arm64": "npm:0.27.0"
+    "@esbuild/freebsd-x64": "npm:0.27.0"
+    "@esbuild/linux-arm": "npm:0.27.0"
+    "@esbuild/linux-arm64": "npm:0.27.0"
+    "@esbuild/linux-ia32": "npm:0.27.0"
+    "@esbuild/linux-loong64": "npm:0.27.0"
+    "@esbuild/linux-mips64el": "npm:0.27.0"
+    "@esbuild/linux-ppc64": "npm:0.27.0"
+    "@esbuild/linux-riscv64": "npm:0.27.0"
+    "@esbuild/linux-s390x": "npm:0.27.0"
+    "@esbuild/linux-x64": "npm:0.27.0"
+    "@esbuild/netbsd-arm64": "npm:0.27.0"
+    "@esbuild/netbsd-x64": "npm:0.27.0"
+    "@esbuild/openbsd-arm64": "npm:0.27.0"
+    "@esbuild/openbsd-x64": "npm:0.27.0"
+    "@esbuild/openharmony-arm64": "npm:0.27.0"
+    "@esbuild/sunos-x64": "npm:0.27.0"
+    "@esbuild/win32-arm64": "npm:0.27.0"
+    "@esbuild/win32-ia32": "npm:0.27.0"
+    "@esbuild/win32-x64": "npm:0.27.0"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-arm64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/openharmony-arm64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/a3a1deec285337b7dfe25cbb9aa8765d27a0192b610a8477a39bf5bd907a6bdb75e98898b61fb4337114cfadb13163bd95977db14e241373115f548e235b40a2
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.25.0":
   version: 0.25.12
   resolution: "esbuild@npm:0.25.12"
@@ -6577,6 +7161,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-config-prettier@npm:^10.1.8":
+  version: 10.1.8
+  resolution: "eslint-config-prettier@npm:10.1.8"
+  peerDependencies:
+    eslint: ">=7.0.0"
+  bin:
+    eslint-config-prettier: bin/cli.js
+  checksum: 10c0/e1bcfadc9eccd526c240056b1e59c5cd26544fe59feb85f38f4f1f116caed96aea0b3b87868e68b3099e55caaac3f2e5b9f58110f85db893e83a332751192682
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-prettier@npm:^5.5.4":
+  version: 5.5.4
+  resolution: "eslint-plugin-prettier@npm:5.5.4"
+  dependencies:
+    prettier-linter-helpers: "npm:^1.0.0"
+    synckit: "npm:^0.11.7"
+  peerDependencies:
+    "@types/eslint": ">=8.0.0"
+    eslint: ">=8.0.0"
+    eslint-config-prettier: ">= 7.0.0 <10.0.0 || >=10.1.0"
+    prettier: ">=3.0.0"
+  peerDependenciesMeta:
+    "@types/eslint":
+      optional: true
+    eslint-config-prettier:
+      optional: true
+  checksum: 10c0/5cc780e0ab002f838ad8057409e86de4ff8281aa2704a50fa8511abff87028060c2e45741bc9cbcbd498712e8d189de8026e70aed9e20e50fe5ba534ee5a8442
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react@npm:^7.37.2":
   version: 7.37.5
   resolution: "eslint-plugin-react@npm:7.37.5"
@@ -6605,6 +7220,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-storybook@npm:^10.1.0":
+  version: 10.1.0
+  resolution: "eslint-plugin-storybook@npm:10.1.0"
+  dependencies:
+    "@typescript-eslint/utils": "npm:^8.8.1"
+  peerDependencies:
+    eslint: ">=8"
+    storybook: ^10.1.0
+  checksum: 10c0/25fdfc21cde3f07c6d0a84690a434cb981808e6fdbd811b7c96b73b7aedaae7bbf1e9a20f009ed109803c408aa45de73d93049acc0e0e363a271a94f7074cf7b
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:^8.4.0":
   version: 8.4.0
   resolution: "eslint-scope@npm:8.4.0"
@@ -6699,7 +7326,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esprima@npm:^4.0.0, esprima@npm:^4.0.1":
+"esprima@npm:^4.0.0, esprima@npm:^4.0.1, esprima@npm:~4.0.0":
   version: 4.0.1
   resolution: "esprima@npm:4.0.1"
   bin:
@@ -6931,6 +7558,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-diff@npm:^1.1.2":
+  version: 1.3.0
+  resolution: "fast-diff@npm:1.3.0"
+  checksum: 10c0/5c19af237edb5d5effda008c891a18a585f74bf12953be57923f17a3a4d0979565fc64dbc73b9e20926b9d895f5b690c618cbb969af0cf022e3222471220ad29
+  languageName: node
+  linkType: hard
+
 "fast-equals@npm:^5.0.1":
   version: 5.3.3
   resolution: "fast-equals@npm:5.3.3"
@@ -7557,6 +8191,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globals@npm:^16.5.0":
+  version: 16.5.0
+  resolution: "globals@npm:16.5.0"
+  checksum: 10c0/615241dae7851c8012f5aa0223005b1ed6607713d6813de0741768bd4ddc39353117648f1a7086b4b0fa45eae733f1c0a0fe369aa4e543bb63f8de8990178ea9
+  languageName: node
+  linkType: hard
+
 "globalthis@npm:^1.0.4":
   version: 1.0.4
   resolution: "globalthis@npm:1.0.4"
@@ -7588,6 +8229,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"graphemer@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "graphemer@npm:1.4.0"
+  checksum: 10c0/e951259d8cd2e0d196c72ec711add7115d42eb9a8146c8eeda5b8d3ac91e5dd816b9cd68920726d9fd4490368e7ed86e9c423f40db87e2d8dfafa00fa17c3a31
+  languageName: node
+  linkType: hard
+
 "handlebars@npm:^4.7.7":
   version: 4.7.8
   resolution: "handlebars@npm:4.7.8"
@@ -8202,6 +8850,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:^7.0.0":
+  version: 7.0.5
+  resolution: "ignore@npm:7.0.5"
+  checksum: 10c0/ae00db89fe873064a093b8999fe4cc284b13ef2a178636211842cceb650b9c3e390d3339191acb145d81ed5379d2074840cf0c33a20bdbd6f32821f79eb4ad5d
+  languageName: node
+  linkType: hard
+
 "image-size@npm:~0.5.0":
   version: 0.5.5
   resolution: "image-size@npm:0.5.5"
@@ -9671,6 +10326,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loupe@npm:^3.1.0, loupe@npm:^3.1.4":
+  version: 3.2.1
+  resolution: "loupe@npm:3.2.1"
+  checksum: 10c0/910c872cba291309664c2d094368d31a68907b6f5913e989d301b5c25f30e97d76d77f23ab3bf3b46d0f601ff0b6af8810c10c31b91d2c6b2f132809ca2cc705
+  languageName: node
+  linkType: hard
+
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"
@@ -10481,6 +11143,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"min-indent@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "min-indent@npm:1.0.1"
+  checksum: 10c0/7e207bd5c20401b292de291f02913230cb1163abca162044f7db1d951fa245b174dc00869d40dd9a9f32a885ad6a5f3e767ee104cf278f399cb4e92d3f582d5c
+  languageName: node
+  linkType: hard
+
 "mini-css-extract-plugin@npm:^2.7.5":
   version: 2.9.4
   resolution: "mini-css-extract-plugin@npm:2.9.4"
@@ -11418,6 +12087,7 @@ __metadata:
   dependencies:
     "@chakra-ui/react": "npm:^3.13.0"
     "@emotion/react": "npm:^11.14.0"
+    "@eslint/eslintrc": "npm:^3.3.1"
     "@opentelemetry/api": "npm:^1.9.0"
     "@opentelemetry/context-zone": "npm:^2.0.0"
     "@opentelemetry/exporter-logs-otlp-http": "npm:^0.200.0"
@@ -11444,9 +12114,13 @@ __metadata:
     cypress: "npm:^14.2.1"
     dotenv: "npm:^16.4.5"
     eslint: "npm:^9.20.1"
+    eslint-config-prettier: "npm:^10.1.8"
+    eslint-plugin-prettier: "npm:^5.5.4"
     eslint-plugin-react: "npm:^7.37.2"
+    eslint-plugin-storybook: "npm:^10.1.0"
     eventsource-parser: "npm:^1.0.0"
     file-loader: "npm:^6.2.0"
+    globals: "npm:^16.5.0"
     html-webpack-plugin: "npm:^5.5.0"
     i18next: "npm:^24.2.2"
     i18next-browser-languagedetector: "npm:^8.0.4"
@@ -11481,9 +12155,11 @@ __metadata:
     semantic-release: "npm:^25.0.2"
     semantic-release-replace-plugin: "npm:^1.2.7"
     semver: "npm:^7.7.1"
+    storybook: "npm:^10.1.0"
     style-loader: "npm:^4.0.0"
     tailwindcss: "npm:^4.0.8"
     typescript: "npm:^5.8.2"
+    typescript-eslint: "npm:^8.48.0"
     url-loader: "npm:^4.1.1"
     vite: "npm:^6.3.4"
     vite-plugin-compression2: "npm:^1.3.3"
@@ -12053,6 +12729,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathval@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "pathval@npm:2.0.1"
+  checksum: 10c0/460f4709479fbf2c45903a65655fc8f0a5f6d808f989173aeef5fdea4ff4f303dc13f7870303999add60ec49d4c14733895c0a869392e9866f1091fa64fd7581
+  languageName: node
+  linkType: hard
+
 "pend@npm:~1.2.0":
   version: 1.2.0
   resolution: "pend@npm:1.2.0"
@@ -12633,6 +13316,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier-linter-helpers@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "prettier-linter-helpers@npm:1.0.0"
+  dependencies:
+    fast-diff: "npm:^1.1.2"
+  checksum: 10c0/81e0027d731b7b3697ccd2129470ed9913ecb111e4ec175a12f0fcfab0096516373bf0af2fef132af50cafb0a905b74ff57996d615f59512bb9ac7378fcc64ab
+  languageName: node
+  linkType: hard
+
 "prettier@npm:^2.8.6":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
@@ -13185,6 +13877,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"recast@npm:^0.23.5":
+  version: 0.23.11
+  resolution: "recast@npm:0.23.11"
+  dependencies:
+    ast-types: "npm:^0.16.1"
+    esprima: "npm:~4.0.0"
+    source-map: "npm:~0.6.1"
+    tiny-invariant: "npm:^1.3.3"
+    tslib: "npm:^2.0.1"
+  checksum: 10c0/45b520a8f0868a5a24ecde495be9de3c48e69a54295d82a7331106554b75cfba75d16c909959d056e9ceed47a1be5e061e2db8b9ecbcd6ba44c2f3ef9a47bd18
+  languageName: node
+  linkType: hard
+
 "recharts-scale@npm:^0.4.4":
   version: 0.4.5
   resolution: "recharts-scale@npm:0.4.5"
@@ -13213,6 +13918,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"redent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "redent@npm:3.0.0"
+  dependencies:
+    indent-string: "npm:^4.0.0"
+    strip-indent: "npm:^3.0.0"
+  checksum: 10c0/d64a6b5c0b50eb3ddce3ab770f866658a2b9998c678f797919ceb1b586bab9259b311407280bd80b804e2a7c7539b19238ae6a2a20c843f1a7fcff21d48c2eae
+  languageName: node
+  linkType: hard
+
 "reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.9":
   version: 1.0.10
   resolution: "reflect.getprototypeof@npm:1.0.10"
@@ -13918,7 +14633,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.1.1, semver@npm:^7.1.2, semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.3, semver@npm:^7.7.1, semver@npm:^7.7.2, semver@npm:^7.7.3":
+"semver@npm:^7.1.1, semver@npm:^7.1.2, semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.6.3, semver@npm:^7.7.1, semver@npm:^7.7.2, semver@npm:^7.7.3":
   version: 7.7.3
   resolution: "semver@npm:7.7.3"
   bin:
@@ -14326,6 +15041,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook@npm:^10.1.0":
+  version: 10.1.0
+  resolution: "storybook@npm:10.1.0"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^2.0.0"
+    "@testing-library/jest-dom": "npm:^6.6.3"
+    "@testing-library/user-event": "npm:^14.6.1"
+    "@vitest/expect": "npm:3.2.4"
+    "@vitest/spy": "npm:3.2.4"
+    esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0"
+    recast: "npm:^0.23.5"
+    semver: "npm:^7.6.2"
+    use-sync-external-store: "npm:^1.5.0"
+    ws: "npm:^8.18.0"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
+  bin:
+    storybook: ./dist/bin/dispatcher.js
+  checksum: 10c0/a8a73cf033898b6d2c59f936a2089c62ecc10b494cb4e0a7d459e27bf9f45c60971f80a14370eda29155e31db84a0782820c6404af22641134c68a0e62e1ae38
+  languageName: node
+  linkType: hard
+
 "stream-combiner2@npm:~1.1.1":
   version: 1.1.1
   resolution: "stream-combiner2@npm:1.1.1"
@@ -14514,6 +15255,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-indent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "strip-indent@npm:3.0.0"
+  dependencies:
+    min-indent: "npm:^1.0.0"
+  checksum: 10c0/ae0deaf41c8d1001c5d4fbe16cb553865c1863da4fae036683b474fa926af9fc121e155cb3fc57a68262b2ae7d5b8420aa752c97a6428c315d00efe2a3875679
+  languageName: node
+  linkType: hard
+
 "strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
@@ -14631,6 +15381,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"synckit@npm:^0.11.7":
+  version: 0.11.11
+  resolution: "synckit@npm:0.11.11"
+  dependencies:
+    "@pkgr/core": "npm:^0.2.9"
+  checksum: 10c0/f0761495953d12d94a86edf6326b3a565496c72f9b94c02549b6961fb4d999f4ca316ce6b3eb8ed2e4bfc5056a8de65cda0bd03a233333a35221cd2fdc0e196b
+  languageName: node
+  linkType: hard
+
 "tagged-tag@npm:^1.0.0":
   version: 1.0.0
   resolution: "tagged-tag@npm:1.0.0"
@@ -14825,7 +15584,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-invariant@npm:^1.3.1":
+"tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3":
   version: 1.3.3
   resolution: "tiny-invariant@npm:1.3.3"
   checksum: 10c0/65af4a07324b591a059b35269cd696aba21bef2107f29b9f5894d83cc143159a204b299553435b03874ebb5b94d019afa8b8eff241c8a4cfee95872c2e1c1c4a
@@ -14846,7 +15605,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.13, tinyglobby@npm:^0.2.14":
+"tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.13, tinyglobby@npm:^0.2.14, tinyglobby@npm:^0.2.15":
   version: 0.2.15
   resolution: "tinyglobby@npm:0.2.15"
   dependencies:
@@ -14856,6 +15615,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinyrainbow@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "tinyrainbow@npm:2.0.0"
+  checksum: 10c0/c83c52bef4e0ae7fb8ec6a722f70b5b6fa8d8be1c85792e829f56c0e1be94ab70b293c032dc5048d4d37cfe678f1f5babb04bdc65fd123098800148ca989184f
+  languageName: node
+  linkType: hard
+
+"tinyspy@npm:^4.0.3":
+  version: 4.0.4
+  resolution: "tinyspy@npm:4.0.4"
+  checksum: 10c0/a8020fc17799251e06a8398dcc352601d2770aa91c556b9531ecd7a12581161fd1c14e81cbdaff0c1306c93bfdde8ff6d1c1a3f9bbe6d91604f0fd4e01e2f1eb
+  languageName: node
+  linkType: hard
+
 "tldts-core@npm:^6.1.86":
   version: 6.1.86
   resolution: "tldts-core@npm:6.1.86"
@@ -14950,6 +15723,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-api-utils@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "ts-api-utils@npm:2.1.0"
+  peerDependencies:
+    typescript: ">=4.8.4"
+  checksum: 10c0/9806a38adea2db0f6aa217ccc6bc9c391ddba338a9fe3080676d0d50ed806d305bb90e8cef0276e793d28c8a929f400abb184ddd7ff83a416959c0f4d2ce754f
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.8.0":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
@@ -15117,6 +15899,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript-eslint@npm:^8.48.0":
+  version: 8.48.0
+  resolution: "typescript-eslint@npm:8.48.0"
+  dependencies:
+    "@typescript-eslint/eslint-plugin": "npm:8.48.0"
+    "@typescript-eslint/parser": "npm:8.48.0"
+    "@typescript-eslint/typescript-estree": "npm:8.48.0"
+    "@typescript-eslint/utils": "npm:8.48.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/bd1a8691148c2424a92458e1f67f0b78b4ee8698a561ec53412874fb1333cf475d604c71a5832ce5140dbda76420dfd299d3cd39dd18ca7101476f86d3cd67af
+  languageName: node
+  linkType: hard
+
 "typescript@npm:^5.8.2":
   version: 5.9.3
   resolution: "typescript@npm:5.9.3"
@@ -15441,6 +16238,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.5.0":
+  version: 1.6.0
+  resolution: "use-sync-external-store@npm:1.6.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/35e1179f872a53227bdf8a827f7911da4c37c0f4091c29b76b1e32473d1670ebe7bcd880b808b7549ba9a5605c233350f800ffab963ee4a4ee346ee983b6019b
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"