feat: add Hugging Face and Clerk integrations with enhanced configuration

.gitignore

@@ -22,5 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.env
+.env*
 package-lock.json

README.md

@@ -84,3 +84,94 @@ react-vite-ui/
 ## 📄 License
 
 This project is licensed under the MIT License. See the [LICENSE](https://choosealicense.com/licenses/mit/) file for details.
+
+# AI Platform with Integrations
+
+This platform allows you to configure and use various AI providers and models, with integrations for Hugging Face and Google Drive.
+
+## Setting Up Integrations
+
+### Hugging Face Integration
+
+To set up the Hugging Face integration:
+
+1. Go to [Hugging Face](https://huggingface.co/) and create an account if you don't have one.
+2. Navigate to your profile settings and go to "Access Tokens".
+3. Create a new OAuth application:
+   - Name: Your App Name
+   - Redirect URI: `https://your-domain.com/integrations/huggingface-callback`
+   - Scopes: `inference-api`
+4. Copy the Client ID and Client Secret.
+5. Update the environment variables in your application:
+   ```
+   OAUTH_CLIENT_ID=your_client_id
+   OAUTH_CLIENT_SECRET=your_client_secret
+   ```
+
+### Google Drive Integration
+
+To set up the Google Drive integration:
+
+1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
+2. Create a new project or select an existing one.
+3. Navigate to "APIs & Services" > "Credentials".
+4. Click "Create Credentials" > "OAuth client ID".
+5. Configure the OAuth consent screen:
+   - User Type: External
+   - App name: Your App Name
+   - User support email: Your email
+   - Developer contact information: Your email
+6. Add the following scopes:
+   - `https://www.googleapis.com/auth/drive.file`
+7. Create the OAuth client ID:
+   - Application type: Web application
+   - Name: Your App Name
+   - Authorized JavaScript origins: `https://your-domain.com`
+   - Authorized redirect URIs: `https://your-domain.com/integrations/google-callback`
+8. Copy the Client ID and Client Secret.
+9. Update the environment variables in your application:
+   ```
+   GOOGLE_CLIENT_ID=your_client_id
+   GOOGLE_CLIENT_SECRET=your_client_secret
+   ```
+
+## Using the Integrations
+
+### Hugging Face
+
+Once authenticated, you can use the Hugging Face Inference API to access models hosted on Hugging Face. The integration provides the following functionality:
+
+- Call the Inference API with any model
+- Access to all public and your private models
+
+### Google Drive
+
+Once authenticated, you can use the Google Drive API to read and write files. The integration provides the following functionality:
+
+- List files in your Google Drive
+- Upload files to your Google Drive
+- Download files from your Google Drive
+
+## Development
+
+To run the application locally:
+
+1. Clone the repository
+2. Install dependencies: `npm install`
+3. Start the development server: `npm run dev`
+4. Open [http://localhost:3000](http://localhost:3000) in your browser
+
+## Environment Variables
+
+Create a `.env` file in the root directory with the following variables:
+
+```
+OAUTH_CLIENT_ID=your_huggingface_client_id
+OAUTH_CLIENT_SECRET=your_huggingface_client_secret
+GOOGLE_CLIENT_ID=your_google_client_id
+GOOGLE_CLIENT_SECRET=your_google_client_secret
+```
+
+## License
+
+MIT

bun.lock

@@ -4,7 +4,9 @@
     "": {
       "name": "react-vite-ui",
       "dependencies": {
+        "@clerk/clerk-react": "^5.23.0",
         "@hookform/resolvers": "^4.1.1",
+        "@huggingface/inference": "2",
         "@langchain/anthropic": "^0.3.13",
         "@langchain/community": "^0.3.32",
         "@langchain/core": "^0.3.40",
@@ -42,7 +44,7 @@
         "buffer": "^6.0.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "cmdk": "1.0.0",
+        "cmdk": "^1.0.4",
         "date-fns": "^4.1.0",
         "dexie": "^4.0.11",
         "dexie-react-hooks": "^1.1.7",
@@ -153,6 +155,12 @@
 
     "@cfworker/json-schema": ["@cfworker/[email protected]", "", {}, "sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og=="],
 
+    "@clerk/clerk-react": ["@clerk/[email protected]", "", { "dependencies": { "@clerk/shared": "^2.22.0", "@clerk/types": "^4.46.1", "tslib": "2.4.1" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0" } }, "sha512-2BMT3+KOWRJsAPDuhFoVdee2solukUcHw8BuKFfiOw6XXbU01H7WBezQCgF8gGFwrygEzZ0P5MBIz3L6MC/LYQ=="],
+
+    "@clerk/shared": ["@clerk/[email protected]", "", { "dependencies": { "@clerk/types": "^4.46.1", "dequal": "2.0.3", "glob-to-regexp": "0.4.1", "js-cookie": "3.0.5", "std-env": "^3.7.0", "swr": "^2.2.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-VWBeddOJVa3sqUPdvquaaQYw4h5hACSG3EUDOW7eSu2F6W3BXUozyLJQPBJ9C0MuoeHhOe/DeV8x2KqOgxVZaQ=="],
+
+    "@clerk/types": ["@clerk/[email protected]", "", { "dependencies": { "csstype": "3.1.3" } }, "sha512-QwomMjG1v2GqOITU2/rQUC11LFFsqNFUA92VKDo8dS1nN9iQadT6cNk7MZWqEYTxAfAM/IgX/gB00aGsLKaV8g=="],
+
     "@esbuild/aix-ppc64": ["@esbuild/[email protected]", "", { "os": "aix", "cpu": "ppc64" }, "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA=="],
 
     "@esbuild/android-arm": ["@esbuild/[email protected]", "", { "os": "android", "cpu": "arm" }, "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q=="],
@@ -233,6 +241,10 @@
 
     "@hookform/resolvers": ["@hookform/[email protected]", "", { "dependencies": { "caniuse-lite": "^1.0.30001698" }, "peerDependencies": { "react-hook-form": "^7.0.0" } }, "sha512-S9YN1RgNWG+klUz5uQaV6rjE4pr6Py2tamj7ekshzLcMyg+/Pal1KZAYgGszV0+doiy41dUiQgXL3uRS9stndQ=="],
 
+    "@huggingface/inference": ["@huggingface/[email protected]", "", { "dependencies": { "@huggingface/tasks": "^0.12.9" } }, "sha512-EfsNtY9OR6JCNaUa5bZu2mrs48iqeTz0Gutwf+fU0Kypx33xFQB4DKMhp8u4Ee6qVbLbNWvTHuWwlppLQl4p4Q=="],
+
+    "@huggingface/tasks": ["@huggingface/[email protected]", "", {}, "sha512-A1ITdxbEzx9L8wKR8pF7swyrTLxWNDFIGDLUWInxvks2ruQ8PLRBZe8r0EcjC3CDdtlj9jV1V4cgV35K/iy3GQ=="],
+
     "@humanfs/core": ["@humanfs/[email protected]", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/[email protected]", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
@@ -625,7 +637,7 @@
 
     "clsx": ["[email protected]", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
-    "cmdk": ["[email protected].0", "", { "dependencies": { "@radix-ui/react-dialog": "1.0.5", "@radix-ui/react-primitive": "1.0.3" }, "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" } }, "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q=="],
+    "cmdk": ["[email protected].4", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-id": "^1.1.0", "@radix-ui/react-primitive": "^2.0.0", "use-sync-external-store": "^1.2.2" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg=="],
 
     "color-convert": ["[email protected]", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
 
@@ -855,6 +867,8 @@
 
     "glob-parent": ["[email protected]", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
 
+    "glob-to-regexp": ["[email protected]", "", {}, "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="],
+
     "globals": ["[email protected]", "", {}, "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg=="],
 
     "globby": ["[email protected]", "", { "dependencies": { "array-union": "^2.1.0", "dir-glob": "^3.0.1", "fast-glob": "^3.2.9", "ignore": "^5.2.0", "merge2": "^1.4.1", "slash": "^3.0.0" } }, "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g=="],
@@ -955,6 +969,8 @@
 
     "jiti": ["[email protected]", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
 
+    "js-cookie": ["[email protected]", "", {}, "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="],
+
     "js-tiktoken": ["[email protected]", "", { "dependencies": { "base64-js": "^1.5.1" } }, "sha512-XC63YQeEcS47Y53gg950xiZ4IWmkfMe4p2V9OSaBt26q+p47WHn18izuXzSclCI73B7yGqtfRsT6jcZQI0y08g=="],
 
     "js-tokens": ["[email protected]", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
@@ -1383,6 +1399,8 @@
 
     "sprintf-js": ["[email protected]", "", {}, "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="],
 
+    "std-env": ["[email protected]", "", {}, "sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w=="],
+
     "string-width": ["[email protected]", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
 
     "string-width-cjs": ["[email protected]", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
@@ -1411,6 +1429,8 @@
 
     "supports-preserve-symlinks-flag": ["[email protected]", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
+    "swr": ["[email protected]", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-RosxFpiabojs75IwQ316DGoDRmOqtiAj0tg8wCcbEu4CiLZBs/a9QNtHV7TUfDXmmlgqij/NqzKq/eLelyv9xA=="],
+
     "tailwind-merge": ["[email protected]", "", {}, "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw=="],
 
     "tailwindcss": ["[email protected]", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.6", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og=="],
@@ -1441,7 +1461,7 @@
 
     "ts-interface-checker": ["[email protected]", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],
 
-    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+    "tslib": ["tslib@2.4.1", "", {}, "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="],
 
     "turbo-stream": ["[email protected]", "", {}, "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="],
 
@@ -1485,6 +1505,8 @@
 
     "use-sidecar": ["[email protected]", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
 
+    "use-sync-external-store": ["[email protected]", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw=="],
+
     "util-deprecate": ["[email protected]", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
     "uuid": ["[email protected]", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ=="],
@@ -1567,6 +1589,8 @@
 
     "@typescript-eslint/typescript-estree/semver": ["[email protected]", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
+    "aria-hidden/tslib": ["[email protected]", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "axios/form-data": ["[email protected]", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "mime-types": "^2.1.12" } }, "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w=="],
 
     "browserfs/async": ["[email protected]", "", { "dependencies": { "lodash": "^4.17.14" } }, "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA=="],
@@ -1575,10 +1599,6 @@
 
     "chokidar/glob-parent": ["[email protected]", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
-    "cmdk/@radix-ui/react-dialog": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.1", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-context": "1.0.1", "@radix-ui/react-dismissable-layer": "1.0.5", "@radix-ui/react-focus-guards": "1.0.1", "@radix-ui/react-focus-scope": "1.0.4", "@radix-ui/react-id": "1.0.1", "@radix-ui/react-portal": "1.0.4", "@radix-ui/react-presence": "1.0.1", "@radix-ui/react-primitive": "1.0.3", "@radix-ui/react-slot": "1.0.2", "@radix-ui/react-use-controllable-state": "1.0.1", "aria-hidden": "^1.1.1", "react-remove-scroll": "2.5.5" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q=="],
-
-    "cmdk/@radix-ui/react-primitive": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g=="],
-
     "decode-named-character-reference/character-entities": ["[email protected]", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
 
     "fast-glob/glob-parent": ["[email protected]", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -1623,12 +1643,20 @@
 
     "prop-types/react-is": ["[email protected]", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
+    "react-remove-scroll/tslib": ["[email protected]", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "react-remove-scroll-bar/tslib": ["[email protected]", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "react-style-singleton/tslib": ["[email protected]", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "readable-stream/safe-buffer": ["[email protected]", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
 
     "readable-web-to-node-stream/readable-stream": ["[email protected]", "", { "dependencies": { "abort-controller": "^3.0.0", "buffer": "^6.0.3", "events": "^3.3.0", "process": "^0.11.10", "string_decoder": "^1.3.0" } }, "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg=="],
 
     "refractor/prismjs": ["[email protected]", "", {}, "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA=="],
 
+    "rxjs/tslib": ["[email protected]", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "string-width-cjs/emoji-regex": ["[email protected]", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
     "string-width-cjs/strip-ansi": ["[email protected]", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
@@ -1647,6 +1675,10 @@
 
     "trim-repeated/escape-string-regexp": ["[email protected]", "", {}, "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="],
 
+    "use-callback-ref/tslib": ["[email protected]", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "use-sidecar/tslib": ["[email protected]", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "wrap-ansi/ansi-styles": ["[email protected]", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
 
     "wrap-ansi-cjs/ansi-styles": ["[email protected]", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
@@ -1655,6 +1687,8 @@
 
     "wrap-ansi-cjs/strip-ansi": ["[email protected]", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "youtubei.js/tslib": ["[email protected]", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "@anthropic-ai/sdk/@types/node/undici-types": ["[email protected]", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
 
     "@browserbasehq/sdk/@types/node/undici-types": ["[email protected]", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
@@ -1665,32 +1699,6 @@
 
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["[email protected]", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
 
-    "cmdk/@radix-ui/react-dialog/@radix-ui/primitive": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" } }, "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-compose-refs": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-context": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-dismissable-layer": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.1", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-primitive": "1.0.3", "@radix-ui/react-use-callback-ref": "1.0.1", "@radix-ui/react-use-escape-keydown": "1.0.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-focus-guards": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-focus-scope": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-primitive": "1.0.3", "@radix-ui/react-use-callback-ref": "1.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-id": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-portal": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-primitive": "1.0.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-presence": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1", "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-use-controllable-state": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-callback-ref": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA=="],
-
-    "cmdk/@radix-ui/react-dialog/react-remove-scroll": ["[email protected]", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.3", "react-style-singleton": "^2.2.1", "tslib": "^2.1.0", "use-callback-ref": "^1.3.0", "use-sidecar": "^1.1.2" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw=="],
-
-    "cmdk/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg=="],
-
     "glob/minimatch/brace-expansion": ["[email protected]", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
 
     "hast-util-from-dom/hastscript/hast-util-parse-selector": ["[email protected]", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A=="],
@@ -1725,20 +1733,6 @@
 
     "@browserbasehq/stagehand/@anthropic-ai/sdk/@types/node/undici-types": ["[email protected]", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
 
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-dismissable-layer/@radix-ui/react-use-callback-ref": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-dismissable-layer/@radix-ui/react-use-escape-keydown": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-callback-ref": "1.0.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-focus-scope/@radix-ui/react-use-callback-ref": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-id/@radix-ui/react-use-layout-effect": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-presence/@radix-ui/react-use-layout-effect": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ=="],
-
-    "cmdk/@radix-ui/react-dialog/@radix-ui/react-use-controllable-state/@radix-ui/react-use-callback-ref": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ=="],
-
-    "cmdk/@radix-ui/react-primitive/@radix-ui/react-slot/@radix-ui/react-compose-refs": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" }, "optionalPeers": ["@types/react"] }, "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw=="],
-
     "mdast-util-mdx-jsx/parse-entities/is-alphanumerical/is-alphabetical": ["[email protected]", "", {}, "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="],
 
     "pkg-dir/find-up/locate-path/p-locate": ["[email protected]", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],

package.json

@@ -13,7 +13,9 @@
     "deploy": "bun run build && npx wrangler pages deploy dist"
   },
   "dependencies": {
+    "@clerk/clerk-react": "^5.23.0",
     "@hookform/resolvers": "^4.1.1",
+    "@huggingface/inference": "2",
     "@langchain/anthropic": "^0.3.13",
     "@langchain/community": "^0.3.32",
     "@langchain/core": "^0.3.40",

src/App.tsx

@@ -4,37 +4,45 @@ import { routes } from "@/routes";
 import Layout from "@/layout";
 import { Toaster } from "sonner";
 import { ChatPage } from "./pages/chat/page";
+import { LoadingProvider } from "@/contexts/loading-context";
+import { HuggingFaceCallback } from "./pages/integrations/huggingface-callback";
 
 function App() {
   const queryClient = new QueryClient();
 
   return (
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <Routes>
-          {routes.map((route) => (
+      <LoadingProvider>
+        <BrowserRouter>
+          <Routes>
+            {routes.map((route) => (
+              <Route
+                key={route.path}
+                path={route.path}
+                element={
+                  <Layout>
+                    {route.component}
+                  </Layout>
+                }
+              />
+            ))}
             <Route
-              key={route.path}
-              path={route.path}
+              key="chat"
+              path="/chat/:id"
               element={
                 <Layout>
-                  {route.component}
+                  <ChatPage />
                 </Layout>
               }
             />
-          ))}
-          <Route
-            key="chat"
-            path="/chat/:id"
-            element={
-              <Layout>
-                <ChatPage />
-              </Layout>
-            }
-          />
-        </Routes>
-      </BrowserRouter>
-      <Toaster />
+            <Route
+              path="/integrations/huggingface-callback"
+              element={<HuggingFaceCallback />}
+            />
+          </Routes>
+        </BrowserRouter>
+        <Toaster />
+      </LoadingProvider>
     </QueryClientProvider>
   );
 }

src/components/sidebar/app-sidebar.tsx

@@ -18,13 +18,14 @@ import { useLiveQuery } from "dexie-react-hooks";
 import { ChatHistoryDB } from "@/lib/chat/memory";
 import { useState } from "react";
 import { toast } from "sonner";
+import { IChatSession } from "@/lib/chat/types";
 
 export function AppSidebar() {
   const location = useLocation();
   const navigate = useNavigate();
   const chats = useLiveQuery(async () => {
-    const sessions = await new ChatHistoryDB().sessions.toArray();
-    return sessions.sort((a, b) => b.updatedAt - a.updatedAt);
+    const sessions = await ChatHistoryDB.getInstance().sessions.toArray();
+    return sessions.sort((a: IChatSession, b: IChatSession) => b.updatedAt - a.updatedAt);
   });
   const [hoveringId, setHoveringId] = useState<string | null>(null);
 
@@ -63,7 +64,7 @@ export function AppSidebar() {
           <SidebarGroupLabel>Chats</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-              {chats?.map((chat) => (
+              {chats?.map((chat: IChatSession) => (
                 <SidebarMenuItem key={chat.id}>
                     <SidebarMenuButton
                       asChild
@@ -85,7 +86,7 @@ export function AppSidebar() {
                           }`}
                           onClick={(e) => {
                             e.preventDefault();
-                            new ChatHistoryDB().sessions.delete(chat.id);
+                            ChatHistoryDB.getInstance().sessions.delete(chat.id);
                             toast.success("Chat deleted");
                             return navigate("/chat/new");
                           }}

src/components/ui/loading-screen.tsx

@@ -0,0 +1,14 @@
+interface LoadingScreenProps {
+  message?: string;
+}
+
+export function LoadingScreen({ message = "Loading..." }: LoadingScreenProps) {
+  return (
+    <div className="fixed inset-0 flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm z-50">
+      <div className="flex flex-col items-center gap-4 p-6 rounded-lg bg-card shadow-lg">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+        <p className="text-lg font-medium text-foreground">{message}</p>
+      </div>
+    </div>
+  );
+} 

src/components/ui/spinner.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+
+export function Spinner({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("animate-spin", className)} {...props}>
+      <Loader2 className="h-full w-full" />
+    </div>
+  );
+} 

src/contexts/loading-context.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+import { LoadingScreen } from "@/components/ui/loading-screen";
+
+interface LoadingContextType {
+  isLoading: boolean;
+  message: string;
+  startLoading: (message?: string) => void;
+  stopLoading: () => void;
+}
+
+const LoadingContext = createContext<LoadingContextType | undefined>(undefined);
+
+interface LoadingProviderProps {
+  children: ReactNode;
+}
+
+export function LoadingProvider({ children }: LoadingProviderProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState("Loading...");
+
+  const startLoading = (message = "Loading...") => {
+    setMessage(message);
+    setIsLoading(true);
+  };
+
+  const stopLoading = () => {
+    setIsLoading(false);
+  };
+
+  return (
+    <LoadingContext.Provider value={{ isLoading, message, startLoading, stopLoading }}>
+      {children}
+      {isLoading && <LoadingScreen message={message} />}
+    </LoadingContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useLoading() {
+  const context = useContext(LoadingContext);
+  if (context === undefined) {
+    throw new Error("useLoading must be used within a LoadingProvider");
+  }
+  return context;
+}

src/hooks/use-chat.ts

@@ -0,0 +1,89 @@
+import React from "react";
+import { useLiveQuery } from "dexie-react-hooks";
+import { ChatHistoryDB } from "@/lib/chat/memory";
+import { HumanMessage, AIMessageChunk } from "@langchain/core/messages";
+import { ChatManager } from "@/lib/chat/manager";
+import { IDocument } from "@/lib/document/types";
+import { toast } from "sonner";
+import { IConfig } from "@/lib/config/types";
+
+// Get the singleton instance of ChatHistoryDB
+const chatHistoryDB = ChatHistoryDB.getInstance();
+
+export const useChatSession = (id: string | undefined) => {
+  return useLiveQuery(async () => {
+    if (!id || id === "new") return null;
+    return await chatHistoryDB.sessions.get(id);
+  }, [id]);
+};
+
+export interface ChatSessionConfig {
+  config?: IConfig;
+  id?: string;
+}
+
+export const useSelectedModel = (id: string | undefined, config: IConfig | undefined) => {
+  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);
+
+  useLiveQuery(async () => {
+    if (!config) return;
+    
+    const model = !id || id === "new" 
+      ? config.default_chat_model
+      : (await chatHistoryDB.sessions.get(id))?.model ?? config.default_chat_model;
+    setSelectedModel(model);
+  }, [id, config]);
+
+  return [selectedModel, setSelectedModel, chatHistoryDB] as const;
+};
+
+// Use the singleton pattern for ChatManager
+export const useChatManager = () => {
+  return React.useMemo(() => ChatManager.getInstance(), []);
+};
+
+export const generateMessage = async (
+  chatId: string | undefined, 
+  input: string, 
+  attachments: IDocument[], 
+  isGenerating: boolean, 
+  setIsGenerating: (isGenerating: boolean) => void, 
+  setStreamingHumanMessage: (streamingHumanMessage: HumanMessage | null) => void, 
+  setStreamingAIMessageChunks: React.Dispatch<React.SetStateAction<AIMessageChunk[]>>, 
+  chatManager: ChatManager,
+  setInput: (input: string) => void,
+  setAttachments: (attachments: IDocument[]) => void
+) => {
+  if (!chatId || isGenerating) return;
+  if (!input.trim() && !attachments.length) {
+    return;
+  }
+
+  try {
+    setIsGenerating(true);
+
+    const chatInput = input;
+    const chatAttachments = attachments;
+
+    setInput("");
+    setAttachments([]);
+    setStreamingHumanMessage(new HumanMessage(chatInput));
+    setStreamingAIMessageChunks([]);
+
+    const messageIterator = chatManager.chat(chatId, chatInput, chatAttachments);
+
+    for await (const event of messageIterator) {
+      if (event.type === "stream") {
+        setStreamingAIMessageChunks(prev => [...prev, event.content as AIMessageChunk]);
+      } else if (event.type === "end") {
+        setIsGenerating(false);
+        setStreamingHumanMessage(null);
+        setStreamingAIMessageChunks([]);
+      }
+    }
+  } catch (error) {
+    console.error(error);
+    toast.error(`Failed to send message: ${error}`);
+    setIsGenerating(false);
+  }
+}; 

src/lib/chat/chat-hf.ts

@@ -0,0 +1,23 @@
+import { ChatOpenAI } from "@langchain/openai";
+
+export const ChatHFInference = ({
+  modelName,
+  apiKey
+}: {
+  modelName: string;
+  apiKey: string;
+}) => {
+  if (!apiKey) {
+    throw new Error("Hugging Face API token is required");
+  }
+  
+  return new ChatOpenAI(
+    {
+      model: modelName,
+      apiKey: apiKey,
+      configuration: {
+        baseURL: "https://api-inference.huggingface.co/v1/"
+      }
+    },
+  );
+}

src/lib/chat/manager.ts

@@ -17,91 +17,179 @@ import { DocumentManager } from "@/lib/document/manager";
 import { Document } from "@langchain/core/documents";
 import { HumanMessage, ToolMessage } from "@langchain/core/messages";
 import { IChatSession } from "./types";
+import { ChatHFInference } from "./chat-hf";
+
+// Define an error interface for better type safety
+interface ErrorWithMessage {
+  message: string;
+}
+
+function isErrorWithMessage(error: unknown): error is ErrorWithMessage {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'message' in error &&
+    typeof (error as Record<string, unknown>).message === 'string'
+  );
+}
+
+function toErrorWithMessage(error: unknown): ErrorWithMessage {
+  if (isErrorWithMessage(error)) return error;
+  
+  try {
+    return new Error(String(error));
+  } catch {
+    // fallback in case there's an error stringifying the error
+    return new Error('Unknown error');
+  }
+}
+
+function getErrorMessage(error: unknown): string {
+  return toErrorWithMessage(error).message;
+}
 
 export class ChatManager {
   model!: BaseChatModel;
-  embeddings!: Embeddings;
-  controller!: AbortController;
-  configManager!: ConfigManager;
+  embeddings!: Embeddings | null;
+  controller: AbortController;
+  configManager: ConfigManager;
   config!: IConfig;
-  documentManager!: DocumentManager;
+  documentManager: DocumentManager;
+  private static instance: ChatManager | null = null;
 
   constructor() {
     this.controller = new AbortController();
-    this.initializeModels();
+    this.configManager = ConfigManager.getInstance();
     this.documentManager = DocumentManager.getInstance();
+    this.initializeConfig();
   }
 
-  private async initializeModels() {
-    this.configManager = await ConfigManager.getInstance();
+  public static getInstance(): ChatManager {
+    if (!ChatManager.instance) {
+      ChatManager.instance = new ChatManager();
+    }
+    return ChatManager.instance;
+  }
+
+  private async initializeConfig() {
     this.config = await this.configManager.getConfig();
   }
 
+  public resetController() {
+    this.controller = new AbortController();
+  }
+
   private async getChatModel(modelName: string): Promise<BaseChatModel> {
+    // Ensure config is loaded
+    if (!this.config) {
+      await this.initializeConfig();
+    }
+    
     const model = CHAT_MODELS.find(m => m.model === modelName);
 
     if (!model) {
       throw new Error(`Chat model ${modelName} not found`);
     }
 
-    switch (model.provider) {
-      case PROVIDERS.ollama:
-        return new ChatOllama({
-          baseUrl: this.config.ollama_base_url,
-          model: model.model,
-        });
-
-      case PROVIDERS.openai:
-        return new ChatOpenAI({
-          modelName: model.model,
-          apiKey: this.config.openai_api_key,
-        });
-
-      case PROVIDERS.anthropic:
-        return new ChatAnthropic({
-          modelName: model.model,
-          apiKey: this.config.anthropic_api_key,
-        });
-
-      case PROVIDERS.gemini:
-        return new ChatGoogleGenerativeAI({
-          modelName: model.model,
-          apiKey: this.config.gemini_api_key,
-        });
-
-      default:
-        throw new Error(`Provider ${model.provider} not implemented yet for chat models`);
+    try {
+      switch (model.provider) {
+        case PROVIDERS.ollama:
+          return new ChatOllama({
+            baseUrl: this.config.ollama_base_url,
+            model: model.model,
+          });
+
+        case PROVIDERS.openai:
+          return new ChatOpenAI({
+            modelName: this.config.openai_model && this.config.openai_model.trim() !== '' ? this.config.openai_model : model.model,
+            apiKey: this.config.openai_api_key,
+            configuration: {
+              baseURL: this.config.openai_base_url && this.config.openai_base_url.trim() !== '' ? this.config.openai_base_url : undefined,
+            }
+          });
+
+        case PROVIDERS.anthropic:
+          return new ChatAnthropic({
+            modelName: model.model,
+            apiKey: this.config.anthropic_api_key,
+          });
+
+        case PROVIDERS.gemini:
+          return new ChatGoogleGenerativeAI({
+            modelName: model.model,
+            apiKey: this.config.gemini_api_key,
+          });
+
+        case PROVIDERS.huggingface:
+          return ChatHFInference({
+            modelName: model.model,
+            apiKey: this.config.hf_token,
+          });
+
+        default:
+          throw new Error(`Provider ${model.provider} not implemented yet for chat models`);
+      }
+    } catch (error: unknown) {
+      console.error(`Error creating chat model ${modelName}:`, error);
+      throw new Error(`Failed to initialize chat model ${modelName}: ${getErrorMessage(error)}`);
     }
   }
 
   private async getEmbeddingModel(modelName: string): Promise<Embeddings> {
+    // Ensure config is loaded
+    if (!this.config) {
+      await this.initializeConfig();
+    }
+    
+    if (!modelName) {
+      throw new Error("No embedding model specified");
+    }
+    
     const model = EMBEDDING_MODELS.find(m => m.model === modelName);
 
     if (!model) {
       throw new Error(`Embedding model ${modelName} not found`);
     }
 
-    switch (model.provider) {
-      case PROVIDERS.ollama:
-        return new OllamaEmbeddings({
-          baseUrl: this.config.ollama_base_url,
-          model: model.model,
-        });
-
-      case PROVIDERS.openai:
-        return new OpenAIEmbeddings({
-          modelName: model.model,
-          apiKey: this.config.openai_api_key,
-        });
-
-      case PROVIDERS.gemini:
-        return new GoogleGenerativeAIEmbeddings({
-          modelName: model.model,
-          apiKey: this.config.gemini_api_key,
-        });
-
-      default:
-        throw new Error(`Provider ${model.provider} not implemented yet for embedding models`);
+    // Check if trying to use Ollama when it's not available
+    if (model.provider === PROVIDERS.ollama) {
+      // Check if Ollama base URL is not configured
+      if (!this.config.ollama_base_url || this.config.ollama_base_url.trim() === '') {
+        throw new Error(`Ollama base URL is not configured. Please set a valid URL in the settings.`);
+      }
+      
+      // Check if Ollama is not available
+      if (!this.config.ollama_available) {
+        throw new Error(`Ollama server is not available. Please check your connection to ${this.config.ollama_base_url}`);
+      }
+    }
+
+    try {
+      switch (model.provider) {
+        case PROVIDERS.ollama:
+          return new OllamaEmbeddings({
+            baseUrl: this.config.ollama_base_url,
+            model: model.model,
+          });
+
+        case PROVIDERS.openai:
+          return new OpenAIEmbeddings({
+            modelName: model.model,
+            apiKey: this.config.openai_api_key,
+          });
+
+        case PROVIDERS.gemini:
+          return new GoogleGenerativeAIEmbeddings({
+            modelName: model.model,
+            apiKey: this.config.gemini_api_key,
+          });
+
+        default:
+          throw new Error(`Provider ${model.provider} not implemented yet for embedding models`);
+      }
+    } catch (error: unknown) {
+      console.error(`Error creating embedding model ${modelName}:`, error);
+      throw new Error(`Failed to initialize embedding model ${modelName}: ${getErrorMessage(error)}`);
     }
   }
 
@@ -298,6 +386,14 @@ export class ChatManager {
         }
         
         return content;
+      },
+
+      [PROVIDERS.huggingface]: async () => {
+        // Hugging Face Inference API primarily supports text
+        return processedContent.docs.map(doc => ({
+          type: "text",
+          text: `File name: ${doc.metadata.name}\nFile content: ${doc.pageContent}`
+        }));
       }
     };
   
@@ -335,7 +431,7 @@ export class ChatManager {
     const chatSession = await memory.db.table("sessions").get(sessionId);
     
     this.model = await this.getChatModel(chatSession?.model || this.config.default_chat_model);
-    this.embeddings = await this.getEmbeddingModel(chatSession?.embedding_model || this.config.default_embedding_model);
+    this.embeddings = await this.getEmbeddingModel(chatSession?.embedding_model || this.config.default_embedding_model || null);
 
     const agent = await this.getAgent(chatSession?.enabled_tools || []);
 

src/lib/chat/memory.ts

@@ -11,15 +11,24 @@ import {
 } from "@langchain/core/messages";
 import { IConfig, CHAT_MODELS, EMBEDDING_MODELS } from "@/lib/config/types";
 
+// Create a singleton instance of ChatHistoryDB
 export class ChatHistoryDB extends Dexie {
   sessions!: Dexie.Table<IChatSession, string>;
+  private static instance: ChatHistoryDB | null = null;
 
-  constructor() {
+  private constructor() {
     super("chat_history");
     this.version(1).stores({
       sessions: "id, title, createdAt, updatedAt, model, embedding_model, enabled_tools, messages",
     });
   }
+
+  public static getInstance(): ChatHistoryDB {
+    if (!ChatHistoryDB.instance) {
+      ChatHistoryDB.instance = new ChatHistoryDB();
+    }
+    return ChatHistoryDB.instance;
+  }
 }
 
 export class DexieChatMemory extends BaseChatMessageHistory {
@@ -28,19 +37,19 @@ export class DexieChatMemory extends BaseChatMessageHistory {
   sessionId: string;
   chatHistory!: IChatSession | undefined;
   config!: IConfig;
-  configManager!: ConfigManager;
+  configManager: ConfigManager;
   initialized: boolean = false;
 
   constructor(sessionId: string) {
     super();
     this.sessionId = sessionId;
-    this.db = new ChatHistoryDB();
+    this.db = ChatHistoryDB.getInstance();
+    this.configManager = ConfigManager.getInstance();
   }
 
   async initialize() {
     if (this.initialized) return;
     
-    this.configManager = await ConfigManager.getInstance();
     this.config = await this.configManager.getConfig();
     this.chatHistory = await this.db.sessions.get(this.sessionId);
     
@@ -49,7 +58,7 @@ export class DexieChatMemory extends BaseChatMessageHistory {
       const embeddingModel = EMBEDDING_MODELS.find((m) => m.model === this.config.default_embedding_model);
       
       if (!chatModel || !embeddingModel) {
-        throw new Error("Default models not found in configuration");
+        throw new Error("Chat or embedding models are not configured.");
       }
 
       this.chatHistory = {

src/lib/chat/types.ts

@@ -9,4 +9,35 @@ export interface IChatSession {
   model: string;
   embedding_model: string;
   enabled_tools: string[];
+  python_session_id?: string;
 }
+
+export type ToolType = 
+  | "calculator" 
+  | "python" 
+  | "python_repl" 
+  | "python_visualization" 
+  | "python_data_processing";
+
+export const AVAILABLE_TOOLS: Record<ToolType, { name: string; description: string }> = {
+  calculator: {
+    name: "Calculator",
+    description: "Perform mathematical calculations"
+  },
+  python: {
+    name: "Python",
+    description: "Execute Python code with data science libraries"
+  },
+  python_repl: {
+    name: "Python REPL",
+    description: "Interactive Python REPL with state persistence"
+  },
+  python_visualization: {
+    name: "Python Visualization",
+    description: "Generate visualizations using matplotlib, plotly, etc."
+  },
+  python_data_processing: {
+    name: "Python Data Processing",
+    description: "Process data using pandas, numpy, scikit-learn, etc."
+  }
+};

src/lib/config/manager.ts

@@ -1,17 +1,18 @@
 import Dexie, { Table } from "dexie";
-import { IConfig, DEFAULT_CONFIG } from "./types";
+import { IConfig, DEFAULT_CONFIG, loadAllModels } from "./types";
 
 export class ConfigManager extends Dexie {
   configs!: Table<IConfig>;
   private static instance: ConfigManager;
   private currentConfig: IConfig | null = null;
+  private initPromise: Promise<IConfig> | null = null;
 
   private constructor() {
     super("configs");
     this.version(1).stores({
       configs: "id, createdAt, updatedAt",
     });
-    this.initialize();
+    this.initPromise = this.initialize();
   }
 
   public static getInstance(): ConfigManager {
@@ -21,30 +22,93 @@ export class ConfigManager extends Dexie {
     return ConfigManager.instance;
   }
 
-  async initialize() {
-    const configs = await this.configs.toArray();
-    if (configs.length === 0) {
-      // Create default config if none exists
-      const defaultConfig: IConfig = {
-        ...DEFAULT_CONFIG,
-        id: crypto.randomUUID(),
-        createdAt: Date.now(),
-        updatedAt: Date.now(),
-      };
-      await this.configs.add(defaultConfig);
-      this.currentConfig = defaultConfig;
-    } else {
-      // Use the most recently updated config
-      this.currentConfig = configs.sort((a, b) => b.updatedAt - a.updatedAt)[0];
+  async initialize(): Promise<IConfig> {
+    // Return existing config or in-progress initialization
+    if (this.currentConfig) return this.currentConfig;
+    if (this.initPromise) return this.initPromise;
+    
+    try {
+      const configs = await this.configs.toArray();
+      
+      if (configs.length === 0) {
+        // Create default config if none exists
+        const defaultConfig: IConfig = {
+          ...DEFAULT_CONFIG,
+          id: crypto.randomUUID(),
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+          ollama_available: false
+        };
+        
+        // Check Ollama availability if URL is provided
+        if (defaultConfig.ollama_base_url.trim() !== '') {
+          defaultConfig.ollama_available = await this.checkOllamaAvailability(defaultConfig.ollama_base_url);
+        }
+        
+        await this.configs.add(defaultConfig);
+        this.currentConfig = defaultConfig;
+      } else {
+        // Use the most recently updated config
+        this.currentConfig = configs.sort((a, b) => b.updatedAt - a.updatedAt)[0];
+        
+        // Check Ollama availability if URL is provided
+        if (this.currentConfig.ollama_base_url.trim() !== '') {
+          const ollamaAvailable = await this.checkOllamaAvailability(this.currentConfig.ollama_base_url);
+          
+          // Update availability if changed
+          if (ollamaAvailable !== this.currentConfig.ollama_available) {
+            await this.updateConfig({ ollama_available: ollamaAvailable });
+          }
+        }
+      }
+      
+      // Load models after config is ready
+      await this.loadModels();
+      return this.currentConfig;
+    } catch (error) {
+      console.error("Error initializing config:", error);
+      throw error;
+    } finally {
+      this.initPromise = null;
     }
-    return this.currentConfig;
   }
 
-  async getConfig(): Promise<IConfig> {
-    if (!this.currentConfig) {
-      await this.initialize();
+  private async checkOllamaAvailability(baseUrl: string): Promise<boolean> {
+    if (!baseUrl || baseUrl.trim() === '') return false;
+    
+    try {
+      const response = await fetch(`${baseUrl}/api/tags`);
+      if (!response.ok) return false;
+      
+      const data = await response.json();
+      return Array.isArray(data.models) && data.models.length > 0;
+    } catch (error) {
+      console.error("Ollama server not available:", error);
+      return false;
     }
-    return this.currentConfig!;
+  }
+
+  private async loadModels(): Promise<void> {
+    if (!this.currentConfig) return;
+    
+    try {
+      const { ollamaAvailable } = await loadAllModels(
+        this.currentConfig.ollama_base_url,
+        this.currentConfig.openai_model,
+        this.currentConfig.hf_custom_models
+      );
+      
+      // Update availability if changed
+      if (ollamaAvailable !== this.currentConfig.ollama_available) {
+        await this.updateConfig({ ollama_available: ollamaAvailable });
+      }
+    } catch (error) {
+      console.error("Error loading models:", error);
+    }
+  }
+
+  async getConfig(): Promise<IConfig> {
+    return this.currentConfig || this.initialize();
   }
 
   async updateConfig(updates: Partial<Omit<IConfig, 'id' | 'createdAt' | 'updatedAt'>>): Promise<IConfig> {
@@ -57,6 +121,36 @@ export class ConfigManager extends Dexie {
     
     await this.configs.put(updatedConfig);
     this.currentConfig = updatedConfig;
+    
+    // Handle Ollama URL updates
+    if (updates.ollama_base_url !== undefined && 
+        updates.ollama_base_url !== current.ollama_base_url) {
+      
+      // Check availability only if URL is not empty
+      const ollamaAvailable = updates.ollama_base_url.trim() === '' 
+        ? false 
+        : await this.checkOllamaAvailability(updates.ollama_base_url);
+      
+      if (ollamaAvailable !== this.currentConfig.ollama_available) {
+        return this.updateConfig({ ollama_available: ollamaAvailable });
+      }
+      
+      // Reload models if URL changed
+      await this.loadModels();
+    }
+    
+    // Reload models if OpenAI custom models changed
+    if (updates.openai_model !== undefined &&
+        updates.openai_model !== current.openai_model) {
+      await this.loadModels();
+    }
+    
+    // Reload models if Hugging Face custom models changed
+    if (updates.hf_custom_models !== undefined &&
+        updates.hf_custom_models !== current.hf_custom_models) {
+      await this.loadModels();
+    }
+    
     return updatedConfig;
   }
 
@@ -67,10 +161,20 @@ export class ConfigManager extends Dexie {
       id: current.id,
       createdAt: current.createdAt,
       updatedAt: Date.now(),
+      ollama_available: false
     };
     
+    // Check Ollama availability if URL is provided
+    if (resetConfig.ollama_base_url.trim() !== '') {
+      resetConfig.ollama_available = await this.checkOllamaAvailability(resetConfig.ollama_base_url);
+    }
+    
     await this.configs.put(resetConfig);
     this.currentConfig = resetConfig;
+    
+    // Reload models after reset
+    await this.loadModels();
+    
     return resetConfig;
   }
 }

src/lib/config/types.ts

@@ -1,4 +1,4 @@
-import ollama from "ollama/browser";
+// import ollama from "ollama/browser";
 
 export interface IConfig {
   id: string;
@@ -10,8 +10,14 @@ export interface IConfig {
   enabled_embedding_models: string[];
   ollama_base_url: string;
   openai_api_key: string;
+  openai_base_url: string;
+  openai_model: string;
   anthropic_api_key: string;
   gemini_api_key: string;
+  ollama_available: boolean;
+  hf_token: string;
+  hf_model: string;
+  hf_custom_models: string;
 }
 
 export const DEFAULT_CONFIG: Omit<IConfig, 'id' | 'createdAt' | 'updatedAt'> = {
@@ -21,8 +27,14 @@ export const DEFAULT_CONFIG: Omit<IConfig, 'id' | 'createdAt' | 'updatedAt'> = {
   enabled_embedding_models: [],
   ollama_base_url: 'http://localhost:11434',
   openai_api_key: '',
+  openai_base_url: '',
+  openai_model: '',
   anthropic_api_key: '',
-  gemini_api_key: ''
+  gemini_api_key: '',
+  ollama_available: false,
+  hf_token: '',
+  hf_model: '',
+  hf_custom_models: '',
 };
 
 export enum PROVIDERS {
@@ -30,6 +42,7 @@ export enum PROVIDERS {
   anthropic = 'anthropic',
   ollama = 'ollama',
   gemini = 'gemini',
+  huggingface = 'huggingface',
 }
 
 export enum MODALITIES {
@@ -40,10 +53,11 @@ export enum MODALITIES {
 }
 
 export const PROVIDERS_CONN_ARGS_MAP: Record<PROVIDERS, string[]> = {
-  [PROVIDERS.openai]: ['openai_api_key'],
+  [PROVIDERS.openai]: ['openai_api_key', 'openai_base_url', 'openai_model'],
   [PROVIDERS.anthropic]: ['anthropic_api_key'],
   [PROVIDERS.ollama]: ['ollama_base_url'],
   [PROVIDERS.gemini]: ['gemini_api_key'],
+  [PROVIDERS.huggingface]: ['hf_token', 'hf_custom_models'],
 };
 
 export interface BaseModel {
@@ -61,7 +75,8 @@ export interface ChatModel extends BaseModel {
 
 export type EmbeddingModel = BaseModel
 
-export const CHAT_MODELS: ChatModel[] = [
+// Base models that are always available
+export const BASE_CHAT_MODELS: ChatModel[] = [
   {
     name: 'GPT-4o',
     provider: PROVIDERS.openai,
@@ -135,19 +150,26 @@ export const CHAT_MODELS: ChatModel[] = [
     modalities: [MODALITIES.image, MODALITIES.pdf, MODALITIES.audio, MODALITIES.video],
     isReasoning: false,
   },
-  ...(await ollama.list()).models.map(
-    (model) => ({
-      name: model.name,
-      model: model.name,
-      description: 'Ollama model',
-      provider: PROVIDERS.ollama,
-      modalities: [],
-      isReasoning: false,
-    }),
-  ),
-]
-
-export const EMBEDDING_MODELS: EmbeddingModel[] = [
+  {
+    name: 'Hugging Face - Mistral',
+    provider: PROVIDERS.huggingface,
+    model: 'mistralai/Mistral-7B-Instruct-v0.2',
+    description: 'Mistral AI 7B Instruct model',
+    modalities: [],
+    isReasoning: false,
+  },
+  {
+    name: 'Hugging Face - Llama 2',
+    provider: PROVIDERS.huggingface,
+    model: 'meta-llama/Llama-2-7b-chat-hf',
+    description: 'Meta Llama 2 7B Chat',
+    modalities: [],
+    isReasoning: false,
+  },
+];
+
+// Base embedding models that are always available
+export const BASE_EMBEDDING_MODELS: EmbeddingModel[] = [
   {
     name: 'OpenAI Embeddings',
     provider: PROVIDERS.openai,
@@ -160,12 +182,158 @@ export const EMBEDDING_MODELS: EmbeddingModel[] = [
     model: 'text-embedding-005',
     description: 'Google GenAI Embeddings',
   },
-  ...(await ollama.list()).models.map(
-    (model) => ({
-      name: model.name,
-      model: model.name,
-      description: 'Ollama Embeddings',
-      provider: PROVIDERS.ollama,
-    }),
-  ),
-]
+];
+
+// Function to safely get custom OpenAI models
+export async function getCustomOpenAIModels(openaiModel?: string): Promise<ChatModel[]> {
+  if (!openaiModel || openaiModel.trim() === '') {
+    return [];
+  }
+
+  // Split the comma-separated list of models into an array
+  const models = openaiModel.split(',').map(model => model.trim());
+
+  return models.map(model => ({
+    name: `Custom: ${model}`,
+    provider: PROVIDERS.openai,
+    model: model,
+    description: `Custom OpenAI model: ${model}`,
+    modalities: [MODALITIES.image],
+    isReasoning: false,
+  }));
+}
+
+// Function to safely get Ollama models
+export async function getOllamaModels(baseUrl?: string): Promise<ChatModel[]> {
+  // Skip if no base URL is provided or it's empty
+  if (!baseUrl || baseUrl.trim() === '') {
+    return [];
+  }
+  
+  try {
+    // We can't directly configure Ollama's base URL through the API
+    // Instead, we'll use the fetch API with the provided base URL
+    const response = await fetch(`${baseUrl}/api/tags`);
+    if (!response.ok) {
+      throw new Error(`Failed to connect to Ollama server: ${response.statusText}`);
+    }
+    
+    const data = await response.json();
+    return data.models.map(
+      (model: { name: string }) => ({
+        name: model.name,
+        model: model.name,
+        description: 'Ollama model',
+        provider: PROVIDERS.ollama,
+        modalities: [],
+        isReasoning: false,
+      })
+    );
+  } catch (error) {
+    console.error("Failed to fetch Ollama models:", error);
+    return [];
+  }
+}
+
+// Function to safely get Ollama embedding models
+export async function getOllamaEmbeddingModels(baseUrl?: string): Promise<EmbeddingModel[]> {
+  // Skip if no base URL is provided or it's empty
+  if (!baseUrl || baseUrl.trim() === '') {
+    return [];
+  }
+  
+  try {
+    // We can't directly configure Ollama's base URL through the API
+    // Instead, we'll use the fetch API with the provided base URL
+    const response = await fetch(`${baseUrl}/api/tags`);
+    if (!response.ok) {
+      throw new Error(`Failed to connect to Ollama server: ${response.statusText}`);
+    }
+    
+    const data = await response.json();
+    return data.models.map(
+      (model: { name: string }) => ({
+        name: model.name,
+        model: model.name,
+        description: 'Ollama Embeddings',
+        provider: PROVIDERS.ollama,
+      })
+    );
+  } catch (error) {
+    console.error("Failed to fetch Ollama embedding models:", error);
+    return [];
+  }
+}
+
+// Function to safely get custom HuggingFace models
+export async function getCustomHuggingFaceModels(hfCustomModels?: string): Promise<ChatModel[]> {
+  if (!hfCustomModels || hfCustomModels.trim() === '') {
+    return [];
+  }
+
+  // Split the comma-separated list of models into an array
+  const models = hfCustomModels.split(',').map(model => model.trim());
+
+  return models.map(model => ({
+    name: `HF Custom: ${model.split('/').pop() || model}`,
+    provider: PROVIDERS.huggingface,
+    model: model,
+    description: `Custom Hugging Face model: ${model}`,
+    modalities: [MODALITIES.image],
+    isReasoning: false,
+  }));
+}
+
+// Initialize with base models
+export let CHAT_MODELS: ChatModel[] = [...BASE_CHAT_MODELS];
+export let EMBEDDING_MODELS: EmbeddingModel[] = [...BASE_EMBEDDING_MODELS];
+
+// Function to load all models including Ollama if available
+export async function loadAllModels(ollamaBaseUrl?: string, openaiModel?: string, hfCustomModels?: string) {
+  try {
+    // Get the Ollama base URL from the config if not provided
+    const configManager = (await import('./manager')).ConfigManager.getInstance();
+    const config = await configManager.getConfig();
+    if (ollamaBaseUrl === undefined) {
+      try {
+        ollamaBaseUrl = config.ollama_base_url;
+      } catch (error) {
+        console.error("Error getting config for Ollama base URL:", error);
+        ollamaBaseUrl = '';
+      }
+    }
+    
+    // Skip loading Ollama models if base URL is not configured
+    let ollamaModels: ChatModel[] = [];
+    let ollamaEmbeddingModels: EmbeddingModel[] = [];
+    
+    if (ollamaBaseUrl && ollamaBaseUrl.trim() !== '') {
+      ollamaModels = await getOllamaModels(ollamaBaseUrl);
+      ollamaEmbeddingModels = await getOllamaEmbeddingModels(ollamaBaseUrl);
+    }
+
+    const customOpenAIModels = await getCustomOpenAIModels(openaiModel || config.openai_model);
+    const customHuggingFaceModels = await getCustomHuggingFaceModels(hfCustomModels || config.hf_custom_models);
+    
+    CHAT_MODELS = [
+      ...BASE_CHAT_MODELS, 
+      ...ollamaModels, 
+      ...customOpenAIModels,
+      ...customHuggingFaceModels
+    ];
+    EMBEDDING_MODELS = [...BASE_EMBEDDING_MODELS, ...ollamaEmbeddingModels];
+    
+    return {
+      ollamaAvailable: ollamaModels.length > 0,
+      chatModels: CHAT_MODELS,
+      embeddingModels: EMBEDDING_MODELS
+    };
+  } catch (error) {
+    console.error("Error loading models:", error);
+    return {
+      ollamaAvailable: false,
+      chatModels: BASE_CHAT_MODELS,
+      embeddingModels: BASE_EMBEDDING_MODELS
+    };
+  }
+}

src/lib/document/manager.ts

@@ -20,6 +20,8 @@ export class DocumentManager extends Dexie {
   private static instance: DocumentManager;
   fs!: typeof import("fs");
   documents!: Table<IDocument>;
+  private initialized: boolean = false;
+  private initPromise: Promise<void> | null = null;
 
   public static getInstance(): DocumentManager {
     if (!DocumentManager.instance) {
@@ -33,9 +35,12 @@ export class DocumentManager extends Dexie {
     this.version(1).stores({
       documents: "id, name, path, type, createdAt",
     });
-    this.initialize();
+    this.initPromise = this.initialize();
   }
+  
   private async initialize() {
+    if (this.initialized) return;
+    
     await new Promise<void>((resolve) => {
       configure({ 
         fs: "IndexedDB",
@@ -45,6 +50,14 @@ export class DocumentManager extends Dexie {
         resolve();
       });
     });
+    
+    this.initialized = true;
+  }
+
+  private async ensureInitialized() {
+    if (!this.initialized) {
+      await this.initPromise;
+    }
   }
 
   getDocumentType(mimeType: string): DocumentType {
@@ -77,6 +90,8 @@ export class DocumentManager extends Dexie {
   }
 
   async uploadDocument(file: File) {
+    await this.ensureInitialized();
+    
     const fileId = crypto.randomUUID();
     const fileName = `${fileId}.${file.type.split("/")[1]}`;
     const filePath = `documents/${fileName}`;
@@ -115,6 +130,8 @@ export class DocumentManager extends Dexie {
   }
 
   async uploadUrl(url: string) {
+    await this.ensureInitialized();
+    
     const fileId = crypto.randomUUID();
     const createdAt = Date.now();
     let newDoc: IDocument;
@@ -140,6 +157,8 @@ export class DocumentManager extends Dexie {
   }
 
   async getDocument(id: string) {
+    await this.ensureInitialized();
+    
     const file = await this.documents.get(id);
     if (!file) {
       throw new Error("Document not found");
@@ -156,12 +175,13 @@ export class DocumentManager extends Dexie {
   }
 
   async loadDocument(id: string) {
+    await this.ensureInitialized();
+    
     const file = await this.documents.get(id);
     if (!file) {
       throw new Error("Document not found");
     }
     const type = file.type;
-    console.log(type)
     let loader: DocumentLoader;
     switch (type) {
       case "pdf":

src/pages/chat/components/AIMessage.tsx

@@ -21,7 +21,7 @@ export const AIMessageComponent = React.memo(({ message }: MessageProps) => {
   }, [message.content]);
 
   return (
-    <div className="flex flex-col gap-4 group">
+    <div className="flex flex-col gap-1 group">
       <div className="prose prose-sm dark:prose-invert max-w-none">
         <ReactMarkdown
           remarkPlugins={[remarkMath, remarkGfm]}

src/pages/chat/components/ModelSelector.tsx

@@ -23,9 +23,9 @@ export const ModelSelector = React.memo(({
     <DropdownMenuTrigger asChild>
       <Button 
         variant="ghost" 
-        className="w-[200px] h-8 p-1 justify-start font-normal"
+        className="w-[200px] h-8 p-1 justify-start font-normal truncate"
       >
-        {selectedModelName}
+        <span className="truncate">{selectedModelName}</span>
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent className="w-[400px]">

src/pages/chat/hooks.ts

@@ -1,74 +1,4 @@
-import React from "react";
-import { useLiveQuery } from "dexie-react-hooks";
-import { ChatHistoryDB } from "@/lib/chat/memory";
-import { Config, ChatSession } from "./types";
-import { HumanMessage, AIMessageChunk } from "@langchain/core/messages";
-import { ChatManager } from "@/lib/chat/manager";
-import { IDocument } from "@/lib/document/types";
-import { toast } from "sonner";
+import { useChatSession, useSelectedModel, generateMessage, useChatManager } from "@/hooks/use-chat";
 
-export const useChatSession = (id: string | undefined) => {
-  const chatHistoryDB = React.useMemo(() => new ChatHistoryDB(), []);
-  return useLiveQuery(async () => {
-    if (!id || id === "new") return null;
-    return await chatHistoryDB.sessions.get(id);
-  }, [id]);
-};
-
-export const useSelectedModel = (id: string | undefined, config: Config | undefined) => {
-  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);
-  const chatHistoryDB = React.useMemo(() => new ChatHistoryDB(), []);
-
-  useLiveQuery(async () => {
-    if (!config) return;
-    
-    const model = !id || id === "new" 
-      ? config.default_chat_model
-      : (await chatHistoryDB.sessions.get(id) as ChatSession | undefined)?.model ?? config.default_chat_model;
-    setSelectedModel(model);
-  }, [id, config]);
-
-  return [selectedModel, setSelectedModel, chatHistoryDB] as const;
-};
-
-export const generateMessage = async (
-  chatId: string | undefined, 
-  input: string, 
-  attachments: IDocument[], 
-  isGenerating: boolean, 
-  setIsGenerating: (isGenerating: boolean) => void, 
-  setStreamingHumanMessage: (streamingHumanMessage: HumanMessage | null) => void, 
-  setStreamingAIMessageChunks: React.Dispatch<React.SetStateAction<AIMessageChunk[]>>, 
-  chatManager: ChatManager,
-  setInput: (input: string) => void,
-  setAttachments: (attachments: IDocument[]) => void
-) => {
-  if (!chatId || !input.trim() || isGenerating) return;
-
-  try {
-    setIsGenerating(true);
-
-    const chatInput = input;
-    const chatAttachments = attachments;
-
-    setInput("");
-    setAttachments([]);
-    setStreamingHumanMessage(new HumanMessage(chatInput));
-
-    const messageIterator = chatManager.chat(chatId, chatInput, chatAttachments);
-
-    for await (const event of messageIterator) {
-      if (event.type === "stream") {
-        setStreamingAIMessageChunks(prev => [...prev, event.content as AIMessageChunk]);
-      } else if (event.type === "end") {
-        setIsGenerating(false);
-        setStreamingHumanMessage(null);
-        setStreamingAIMessageChunks([]);
-      }
-    }
-  } catch (error) {
-    console.error(error);
-    toast.error(`Failed to send message: ${error}`);
-    setIsGenerating(false);
-  }
-}; 
+// Re-export the hooks
+export { useChatSession, useSelectedModel, generateMessage, useChatManager }; 

src/pages/chat/page.tsx

@@ -1,27 +1,30 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import { ChatManager } from "@/lib/chat/manager";
 import { useLiveQuery } from "dexie-react-hooks";
 import { mapStoredMessageToChatMessage } from "@langchain/core/messages";
-import { DexieChatMemory } from "@/lib/chat/memory";
 import { ConfigManager } from "@/lib/config/manager";
-import { DocumentManager } from "@/lib/document/manager";
 import { toast } from "sonner";
 import { Messages } from "./components/Messages";
 import { Input } from "./components/Input";
 import { FilePreviewDialog } from "./components/FilePreviewDialog";
-import { useChatSession, useSelectedModel, generateMessage } from "./hooks";
-import { CHAT_MODELS } from "@/lib/config/types";
+import { useChatSession, useSelectedModel, generateMessage, useChatManager } from "@/hooks/use-chat";
+import { CHAT_MODELS, PROVIDERS } from "@/lib/config/types";
 import { IDocument } from "@/lib/document/types";
 import { HumanMessage } from "@langchain/core/messages";
 import { AIMessageChunk } from "@langchain/core/messages";
+import { DocumentManager } from "@/lib/document/manager";
+import { useLoading } from "@/contexts/loading-context";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
 
 export function ChatPage() {
   const { id } = useParams();
   const navigate = useNavigate();
+  const { startLoading, stopLoading } = useLoading();
 
+  // Use singleton instances
   const configManager = React.useMemo(() => ConfigManager.getInstance(), []);
-  const chatManager = React.useMemo(() => new ChatManager(), []);
+  const chatManager = useChatManager();
   const documentManager = React.useMemo(() => DocumentManager.getInstance(), []);
 
   const [input, setInput] = React.useState("");
@@ -33,15 +36,30 @@ export function ChatPage() {
   const [streamingHumanMessage, setStreamingHumanMessage] = React.useState<HumanMessage | null>(null);
   const [streamingAIMessageChunks, setStreamingAIMessageChunks] = React.useState<AIMessageChunk[]>([]);
   const [editingMessageIndex, setEditingMessageIndex] = React.useState<number | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
 
   const config = useLiveQuery(async () => await configManager.getConfig());
   const chatSession = useChatSession(id);
   const [selectedModel, setSelectedModel, chatHistoryDB] = useSelectedModel(id, config);
 
+  // Show loading screen during initial config load
+  useEffect(() => {
+    if (!config) {
+      startLoading("Loading configuration...");
+      return;
+    }
+    stopLoading();
+  }, [config, startLoading, stopLoading]);
+
   const selectedModelName = React.useMemo(() => (
     CHAT_MODELS.find(model => model.model === selectedModel)?.name || "Select a model"
   ), [selectedModel]);
 
+  const selectedModelProvider = React.useMemo(() => {
+    const model = CHAT_MODELS.find(model => model.model === selectedModel);
+    return model?.provider;
+  }, [selectedModel]);
+
   const handleModelChange = React.useCallback(async (model: string) => {
     if (!config) return;
     
@@ -61,29 +79,69 @@ export function ChatPage() {
       }
     }
     setSelectedModel(model);
+    setError(null); // Clear any previous errors when changing models
   }, [config, id, setSelectedModel, configManager, chatHistoryDB.sessions]);
 
   const handleSendMessage = React.useCallback(async () => {
+    // Clear any previous errors
+    setError(null);
+    
+    // Check if trying to use Ollama when it's not available or not configured
+    if (selectedModelProvider === PROVIDERS.ollama && config) {
+      if (!config.ollama_base_url || config.ollama_base_url.trim() === '') {
+        setError(`Ollama base URL is not configured. Please set a valid URL in the settings.`);
+        return;
+      }
+      
+      if (!config.ollama_available) {
+        setError(`Ollama server is not available. Please check your connection to ${config.ollama_base_url}`);
+        return;
+      }
+    }
+    
     let chatId = id;
     let isNewChat = false;
     if (id === "new") {
       chatId = crypto.randomUUID();
-      new DexieChatMemory(chatId);
       isNewChat = true;
       navigate(`/chat/${chatId}`, { replace: true });
     }
-    await generateMessage(chatId, input, attachments, isGenerating, setIsGenerating, setStreamingHumanMessage, setStreamingAIMessageChunks, chatManager, setInput, setAttachments);
-
-    if (isNewChat && chatId) {
-      const chatName = await chatManager.chatChain(
-        `Based on this user message, generate a very concise (max 40 chars) but descriptive name for this chat: "${input}"`,
-        "You are a helpful assistant that generates concise chat names. Respond only with the name, no quotes or explanation."
+    
+    // Reset controller before starting a new chat
+    chatManager.resetController();
+    
+    try {
+      await generateMessage(
+        chatId, 
+        input, 
+        attachments, 
+        isGenerating, 
+        setIsGenerating, 
+        setStreamingHumanMessage, 
+        setStreamingAIMessageChunks, 
+        chatManager, 
+        setInput, 
+        setAttachments
       );
-      await chatHistoryDB.sessions.update(chatId, {
-        name: String(chatName.content)
-      });
+
+      if (isNewChat && chatId) {
+        const chatName = await chatManager.chatChain(
+          `Based on this user message, generate a very concise (max 40 chars) but descriptive name for this chat: "${input}"`,
+          "You are a helpful assistant that generates concise chat names. Respond only with the name, no quotes or explanation."
+        );
+        await chatHistoryDB.sessions.update(chatId, {
+          name: String(chatName.content)
+        });
+      }
+    } catch (error) {
+      console.error("Error sending message:", error);
+      if (error instanceof Error) {
+        setError(error.message);
+      } else {
+        setError("An unknown error occurred while sending your message");
+      }
     }
-  }, [id, input, attachments, isGenerating, chatManager, navigate, chatHistoryDB.sessions]);
+  }, [id, input, attachments, isGenerating, chatManager, navigate, chatHistoryDB.sessions, selectedModelProvider, config]);
   
   const handleAttachmentFileUpload = React.useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
@@ -128,59 +186,144 @@ export function ChatPage() {
   const handleSaveEdit = React.useCallback(async (content: string) => {
     if (!id || editingMessageIndex === null || !chatSession || isGenerating) return;
 
-    // Update the message directly in the database
-    const updatedMessages = [...chatSession.messages];
-    updatedMessages[editingMessageIndex] = {
-      ...updatedMessages[editingMessageIndex],
-      data: {
-        ...updatedMessages[editingMessageIndex].data,
-        content
-      }
-    };
-    // Remove messages after the edited message
-    const newMessages = updatedMessages.slice(0, editingMessageIndex);
-    
-    await chatHistoryDB.sessions.update(id, {
-      ...chatSession,
-      messages: newMessages,
-      updatedAt: Date.now()
-    });
+    // Clear any previous errors
+    setError(null);
     
-    setInput(content);
-    setEditingMessageIndex(null);
-    setAttachments([]);
+    // Check if trying to use Ollama when it's not available or not configured
+    if (selectedModelProvider === PROVIDERS.ollama && config) {
+      if (!config.ollama_base_url || config.ollama_base_url.trim() === '') {
+        setError(`Ollama base URL is not configured. Please set a valid URL in the settings.`);
+        return;
+      }
+      
+      if (!config.ollama_available) {
+        setError(`Ollama server is not available. Please check your connection to ${config.ollama_base_url}`);
+        return;
+      }
+    }
 
-    generateMessage(id, content, [], isGenerating, setIsGenerating, setStreamingHumanMessage, setStreamingAIMessageChunks, chatManager, setInput, setAttachments);
-  }, [id, editingMessageIndex, chatSession, isGenerating, chatHistoryDB.sessions, chatManager]);
+    try {
+      // Update the message directly in the database
+      const updatedMessages = [...chatSession.messages];
+      updatedMessages[editingMessageIndex] = {
+        ...updatedMessages[editingMessageIndex],
+        data: {
+          ...updatedMessages[editingMessageIndex].data,
+          content
+        }
+      };
+      // Remove messages after the edited message
+      const newMessages = updatedMessages.slice(0, editingMessageIndex + 1);
+      
+      await chatHistoryDB.sessions.update(id, {
+        ...chatSession,
+        messages: newMessages,
+        updatedAt: Date.now()
+      });
+      
+      setInput(content);
+      setEditingMessageIndex(null);
+      setAttachments([]);
+
+      // Reset controller before regenerating
+      chatManager.resetController();
+      
+      await generateMessage(
+        id, 
+        content, 
+        [], 
+        isGenerating, 
+        setIsGenerating, 
+        setStreamingHumanMessage, 
+        setStreamingAIMessageChunks, 
+        chatManager, 
+        setInput, 
+        setAttachments
+      );
+    } catch (error) {
+      console.error("Error editing message:", error);
+      if (error instanceof Error) {
+        setError(error.message);
+      } else {
+        setError("An unknown error occurred while editing your message");
+      }
+    }
+  }, [id, editingMessageIndex, chatSession, isGenerating, chatHistoryDB.sessions, chatManager, selectedModelProvider, config]);
 
   const handleRegenerateMessage = React.useCallback(async (index: number) => {
     if (!id || !chatSession || isGenerating) return;
 
-    const messages = chatSession.messages;
-    if (messages.length <= index) return;
+    // Clear any previous errors
+    setError(null);
     
-    const message = messages[index];
-    const content = message.data.content;
+    // Check if trying to use Ollama when it's not available or not configured
+    if (selectedModelProvider === PROVIDERS.ollama && config) {
+      if (!config.ollama_base_url || config.ollama_base_url.trim() === '') {
+        setError(`Ollama base URL is not configured. Please set a valid URL in the settings.`);
+        return;
+      }
+      
+      if (!config.ollama_available) {
+        setError(`Ollama server is not available. Please check your connection to ${config.ollama_base_url}`);
+        return;
+      }
+    }
 
-    // Remove messages after the current message
-    const newMessages = messages.slice(0, index);
-    
-    await chatHistoryDB.sessions.update(id, {
-      ...chatSession,
-      messages: newMessages,
-      updatedAt: Date.now()
-    });
-    
-    generateMessage(id, content, [], isGenerating, setIsGenerating, setStreamingHumanMessage, setStreamingAIMessageChunks, chatManager, setInput, setAttachments);
-  }, [id, chatSession, isGenerating, chatHistoryDB.sessions, chatManager]);
+    try {
+      const messages = chatSession.messages;
+      if (messages.length <= index) return;
+      
+      const message = messages[index];
+      const content = message.data.content;
+
+      // Remove messages after the current message
+      const newMessages = messages.slice(0, index + 1);
+      
+      await chatHistoryDB.sessions.update(id, {
+        ...chatSession,
+        messages: newMessages,
+        updatedAt: Date.now()
+      });
+      
+      // Reset controller before regenerating
+      chatManager.resetController();
+      
+      await generateMessage(
+        id, 
+        content, 
+        [], 
+        isGenerating, 
+        setIsGenerating, 
+        setStreamingHumanMessage, 
+        setStreamingAIMessageChunks, 
+        chatManager, 
+        setInput, 
+        setAttachments
+      );
+    } catch (error) {
+      console.error("Error regenerating message:", error);
+      if (error instanceof Error) {
+        setError(error.message);
+      } else {
+        setError("An unknown error occurred while regenerating the message");
+      }
+    }
+  }, [id, chatSession, isGenerating, chatHistoryDB.sessions, chatManager, selectedModelProvider, config]);
 
   const stopGenerating = React.useCallback(() => {
     chatManager.controller.abort();
     setIsGenerating(false);
-  }, [chatManager, setIsGenerating]);
+  }, [chatManager]);
 
   return (
     <div className="flex flex-col h-screen p-2">
+      {error && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
       <Messages
         messages={chatSession?.messages.map(mapStoredMessageToChatMessage)}
         streamingHumanMessage={streamingHumanMessage}

src/pages/home/components/ChatModels.tsx

@@ -0,0 +1,19 @@
+import { CHAT_MODELS } from "@/lib/config/types";
+import { ModelList } from "./ModelList";
+import { ChatModelsProps } from "../types";
+
+export const ChatModels = ({ config }: ChatModelsProps) => {
+  if (!config) return null;
+  
+  return (
+    <ModelList
+      type="chat"
+      models={CHAT_MODELS}
+      config={config}
+      enabledModels={config.enabled_chat_models || []}
+      defaultModel={config.default_chat_model}
+      title="Chat Models"
+      description="Enable or disable available chat models"
+    />
+  );
+} 

src/pages/home/components/EmbeddingModels.tsx

@@ -0,0 +1,19 @@
+import { EMBEDDING_MODELS } from "@/lib/config/types";
+import { ModelList } from "./ModelList";
+import { EmbeddingModelsProps } from "../types";
+
+export const EmbeddingModels = ({ config }: EmbeddingModelsProps) => {
+  if (!config) return null;
+
+  return (
+    <ModelList
+      type="embedding"
+      models={EMBEDDING_MODELS}
+      config={config}
+      enabledModels={config.enabled_embedding_models || []}
+      defaultModel={config.default_embedding_model}
+      title="Embedding Models"
+      description="Enable or disable available embedding models"
+    />
+  );
+} 

src/pages/home/components/ModelList.tsx

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import { PROVIDERS, PROVIDERS_CONN_ARGS_MAP, ChatModel, BaseModel } from "@/lib/config/types";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useUpdateConfig, useUpdateEnabledModels } from "../hooks";
+import { ModelListProps } from "../types";
+
+export const ModelList = ({ type, models, config, enabledModels, defaultModel, title, description }: ModelListProps) => {
+  const updateEnabledModels = useUpdateEnabledModels(type);
+  const updateConfig = useUpdateConfig();
+  const [selectedDefault, setSelectedDefault] = useState(defaultModel);
+
+  const handleModelToggle = async (model: BaseModel, enabled: boolean) => {
+    await updateEnabledModels.mutateAsync({
+      modelId: model.model,
+      enabled,
+    });
+  };
+
+  const handleDefaultModelChange = async (modelId: string) => {
+    setSelectedDefault(modelId);
+    await updateConfig.mutateAsync({
+      [type === 'chat' ? 'default_chat_model' : 'default_embedding_model']: modelId,
+    });
+  };
+
+  if (!config) return null;
+
+  const isProviderConfigured = (provider: PROVIDERS) => {
+    // Special case for OpenAI - only require API key
+    if (provider === PROVIDERS.openai) {
+      return config.openai_api_key && config.openai_api_key.trim().length > 0;
+    }
+    
+    // For other providers, check all required fields
+    return PROVIDERS_CONN_ARGS_MAP[provider].every(
+      (arg) => {
+        const value = config[arg as keyof typeof config];
+        return typeof value === 'string' && value.trim().length > 0;
+      }
+    );
+  };
+
+  const handleSelectAll = async () => {
+    for (const model of models) {
+      if (isProviderConfigured(model.provider) && !enabledModels.includes(model.model)) {
+        await updateEnabledModels.mutateAsync({ modelId: model.model, enabled: true });
+      }
+    }
+  };
+
+  const handleUnselectAll = async () => {
+    for (const model of models) {
+      if (enabledModels.includes(model.model)) {
+        await updateEnabledModels.mutateAsync({ modelId: model.model, enabled: false });
+      }
+    }
+    // Then clear the default model
+    updateConfig.mutate({ [`default_${type}_model`]: '' });
+  };
+
+  return (
+    <Card className="h-[calc(100vh-12rem)]">
+      <CardHeader className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>{title}</CardTitle>
+            <CardDescription>{description}</CardDescription>
+          </div>
+          <div className="flex gap-2">
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={handleSelectAll}
+              disabled={models.length === 0 || updateConfig.isPending}
+            >
+              Select All
+            </Button>
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={handleUnselectAll}
+              disabled={enabledModels.length === 0 || updateConfig.isPending}
+            >
+              Unselect All
+            </Button>
+          </div>
+        </div>
+        <div>
+          <Select value={selectedDefault} onValueChange={handleDefaultModelChange}>
+            <SelectTrigger className="w-[200px]">
+              <SelectValue placeholder="Select default model" />
+            </SelectTrigger>
+            <SelectContent>
+              {models.filter(model => enabledModels.includes(model.model)).map(model => (
+                <SelectItem key={model.model} value={model.model}>
+                  {model.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {enabledModels.length === 0 && (
+            <p className="text-sm text-muted-foreground mt-2">
+              Enable at least one model to set as default
+            </p>
+          )}
+        </div>
+      </CardHeader>
+      <ScrollArea className="h-[calc(100%-13rem)] px-6">
+        <div className="space-y-4 pb-6">
+          {models.map((model) => {
+            const providerConfigured = isProviderConfigured(model.provider);
+            const isChatModel = (m: BaseModel): m is ChatModel => 'modalities' in m;
+            
+            return (
+              <div key={model.model} className={`p-4 rounded-lg border ${providerConfigured ? '' : 'opacity-50'}`}>
+                <div className="flex items-start justify-between">
+                  <div className="space-y-1">
+                    <h3 className="font-medium">{model.name}</h3>
+                    <p className="text-sm text-muted-foreground">{model.description}</p>
+                    {!providerConfigured && (
+                      <p className="text-sm text-muted-foreground">
+                        Configure {model.provider} provider first
+                      </p>
+                    )}
+                    {isChatModel(model) && model.modalities && model.modalities.length > 0 && (
+                      <div className="flex gap-2 flex-wrap pt-2">
+                        {model.modalities.map((modality) => (
+                          <Badge key={modality} variant="outline" className="capitalize">
+                            {modality.toLowerCase()}
+                          </Badge>
+                        ))}
+                      </div>
+                    )}
+                    {isChatModel(model) && model.isReasoning && (
+                      <div className="flex gap-2 flex-wrap pt-2">
+                        <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800">
+                          Thinking
+                        </Badge>
+                      </div>
+                    )}
+                  </div>
+                  <Switch 
+                    checked={enabledModels.includes(model.model)}
+                    onCheckedChange={(checked) => {
+                      handleModelToggle(model, checked);
+                      if (!checked && selectedDefault === model.model) {
+                        handleDefaultModelChange('');
+                      }
+                    }}
+                    disabled={!providerConfigured || updateEnabledModels.isPending}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </ScrollArea>
+    </Card>
+  );
+} 

src/pages/home/components/Others.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { OthersProps } from "../types";
+
+export const Others = ({ config }: OthersProps) => {
+  if (!config) return null;
+
+  return (
+    <Card className="h-[calc(100vh-12rem)]">
+      <CardHeader>
+        <CardTitle>Other Settings</CardTitle>
+        <CardDescription>Additional configuration options</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-8 px-6">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-semibold">Integrations</h3>
+              <p className="text-sm text-muted-foreground">Connect to external services like Hugging Face to use their inference endpoints</p>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+} 

src/pages/home/components/Providers.tsx

@@ -0,0 +1,262 @@
+import { useState } from "react";
+import { PROVIDERS, PROVIDERS_CONN_ARGS_MAP } from "@/lib/config/types";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle, CheckCircle2, ChevronDown } from "lucide-react";
+import { useUpdateConfig, useDebounceCallback } from "../hooks";
+import { ProvidersProps } from "../types";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+export const Providers = ({ config }: ProvidersProps) => {
+  const updateConfig = useUpdateConfig();
+  const [localValues, setLocalValues] = useState<Record<string, string>>({});
+  const [openCollapsible, setOpenCollapsible] = useState(false);
+  const debouncedUpdateConfig = useDebounceCallback((updates: Record<string, string>) => {
+    updateConfig.mutate(updates);
+  }, 500);
+
+  if (!config) return null;
+
+  const handleHuggingFaceOAuth = () => {
+    const clientId = import.meta.env.VITE_HF_CLIENT_ID;
+    const redirectUri = import.meta.env.VITE_HF_REDIRECT_URI;
+    
+    if (!clientId || !redirectUri) {
+      toast.error("HuggingFace OAuth configuration is missing");
+      return;
+    }
+    
+    const state = Math.random().toString(36).substring(2);
+    const authUrl = `https://huggingface.co/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=openid%20inference-api&prompt=consent&state=${state}`;
+    
+    window.location.href = authUrl;
+  };
+
+  return (
+    <Card className="h-[calc(100vh-12rem)]">
+      <CardHeader>
+        <CardTitle>Providers</CardTitle>
+        <CardDescription>Configure your AI provider credentials</CardDescription>
+      </CardHeader>
+      <ScrollArea className="h-[calc(100%-8rem)]">
+        <CardContent className="space-y-8 px-6">
+          {Object.values(PROVIDERS).map((provider) => (
+            <div key={provider} className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-semibold capitalize">{provider}</h3>
+                {provider === PROVIDERS.ollama && (
+                  <div className="flex items-center gap-2">
+                    {!config.ollama_base_url || config.ollama_base_url.trim() === '' ? (
+                      <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800">
+                        <AlertCircle className="h-3.5 w-3.5 mr-1" />
+                        Not Configured
+                      </Badge>
+                    ) : config.ollama_available ? (
+                      <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800">
+                        <CheckCircle2 className="h-3.5 w-3.5 mr-1" />
+                        Connected
+                      </Badge>
+                    ) : (
+                      <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800">
+                        <AlertCircle className="h-3.5 w-3.5 mr-1" />
+                        Not Connected
+                      </Badge>
+                    )}
+                  </div>
+                )}
+                {provider === PROVIDERS.huggingface && config?.hf_token && (
+                  <Badge>Connected</Badge>
+                )}
+              </div>
+              <div className="grid gap-4">
+                {provider === PROVIDERS.openai ? (
+                  <>
+                    {/* Required OpenAI fields */}
+                    {PROVIDERS_CONN_ARGS_MAP[provider]
+                      .filter(arg => arg === 'openai_api_key')
+                      .map((arg) => {
+                        const value = localValues[arg] ?? config[arg as keyof typeof config] ?? '';
+                        
+                        return (
+                          <div key={arg} className="space-y-2">
+                            <label htmlFor={arg} className="text-sm font-medium flex items-center">
+                              {arg.replace(/_/g, ' ').replace(/url/i, 'URL')}
+                            </label>
+                            <Input 
+                              id={arg} 
+                              type="text" 
+                              value={value} 
+                              onChange={(e) => {
+                                const newValue = e.target.value;
+                                setLocalValues(prev => ({ ...prev, [arg]: newValue }));
+                                debouncedUpdateConfig({ [arg]: newValue });
+                              }}
+                              disabled={updateConfig.isPending}
+                              className="font-mono"
+                            />
+                          </div>
+                        );
+                      })}
+                    
+                    {/* Optional OpenAI fields in Collapsible */}
+                    <Collapsible
+                      open={openCollapsible}
+                      onOpenChange={setOpenCollapsible}
+                      className="mt-2 space-y-2 border rounded-md p-2"
+                    >
+                      <div className="flex items-center justify-between">
+                        <h4 className="text-sm font-medium text-muted-foreground">Advanced Options</h4>
+                        <CollapsibleTrigger asChild>
+                          <Button variant="ghost" size="sm" className="p-0 h-8 w-8">
+                            <ChevronDown className={`h-4 w-4 transition-transform ${openCollapsible ? "transform rotate-180" : ""}`} />
+                            <span className="sr-only">Toggle advanced options</span>
+                          </Button>
+                        </CollapsibleTrigger>
+                      </div>
+                      <CollapsibleContent className="space-y-4 pt-2">
+                        {PROVIDERS_CONN_ARGS_MAP[provider]
+                          .filter(arg => arg === 'openai_base_url' || arg === 'openai_model')
+                          .map((arg) => {
+                            const value = localValues[arg] ?? config[arg as keyof typeof config] ?? '';
+                            
+                            return (
+                              <div key={arg} className="space-y-2">
+                                <label htmlFor={arg} className="text-sm font-medium flex items-center">
+                                  {arg.replace(/_/g, ' ').replace(/url/i, 'URL')}
+                                  <Badge variant="outline" className="ml-2 text-xs font-normal bg-gray-50 text-gray-500 border-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700">
+                                    Optional
+                                  </Badge>
+                                </label>
+                                <Input 
+                                  id={arg} 
+                                  type="text" 
+                                  value={value} 
+                                  onChange={(e) => {
+                                    const newValue = e.target.value;
+                                    setLocalValues(prev => ({ ...prev, [arg]: newValue }));
+                                    debouncedUpdateConfig({ [arg]: newValue });
+                                  }}
+                                  disabled={updateConfig.isPending}
+                                  className="font-mono"
+                                />
+                                {arg === 'openai_model' && (
+                                  <p className="text-xs text-muted-foreground mt-1">
+                                    Enter comma-separated model names to add multiple custom models (e.g. "gpt-4-turbo,gpt-4-vision")
+                                  </p>
+                                )}
+                              </div>
+                            );
+                          })}
+                      </CollapsibleContent>
+                    </Collapsible>
+                  </>
+                ) : provider === PROVIDERS.huggingface ? (
+                  <>
+                    <div className="space-y-2">
+                      <label htmlFor="hf_token" className="text-sm font-medium flex items-center">
+                        API Token
+                      </label>
+                      <div className="flex gap-2">
+                        <Input 
+                          id="hf_token" 
+                          type="password" 
+                          placeholder="Enter your Hugging Face API token"
+                          value={localValues.hf_token ?? config?.hf_token ?? ''} 
+                          onChange={(e) => {
+                            const newValue = e.target.value;
+                            setLocalValues(prev => ({ ...prev, hf_token: newValue }));
+                            debouncedUpdateConfig({ hf_token: newValue });
+                          }}
+                          disabled={updateConfig.isPending}
+                          className="font-mono"
+                        />
+                        <Button 
+                          variant="outline" 
+                          onClick={handleHuggingFaceOAuth}
+                          disabled={updateConfig.isPending}
+                        >
+                          Connect
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="hf_custom_models" className="text-sm font-medium flex items-center">
+                        Custom Models (comma-separated)
+                      </label>
+                      <Input 
+                        id="hf_custom_models" 
+                        placeholder="e.g. Qwen/Qwen2-VL-7B-Instruct,mistralai/Mixtral-8x7B-Instruct-v0.1"
+                        value={localValues.hf_custom_models ?? config?.hf_custom_models ?? ''} 
+                        onChange={(e) => {
+                          const newValue = e.target.value;
+                          setLocalValues(prev => ({ ...prev, hf_custom_models: newValue }));
+                          debouncedUpdateConfig({ hf_custom_models: newValue });
+                        }}
+                        disabled={updateConfig.isPending}
+                        className="font-mono"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Add custom models in the format: owner/model-name
+                      </p>
+                    </div>
+                  </>
+                ) : (
+                  // Non-OpenAI providers
+                  PROVIDERS_CONN_ARGS_MAP[provider].map((arg) => {
+                    const value = localValues[arg] ?? config[arg as keyof typeof config] ?? '';
+                    
+                    return (
+                      <div key={arg} className="space-y-2">
+                        <label htmlFor={arg} className="text-sm font-medium flex items-center">
+                          {arg.replace(/_/g, ' ').replace(/url/i, 'URL')}
+                        </label>
+                        <Input 
+                          id={arg} 
+                          type="text" 
+                          value={value} 
+                          onChange={(e) => {
+                            const newValue = e.target.value;
+                            setLocalValues(prev => ({ ...prev, [arg]: newValue }));
+                            debouncedUpdateConfig({ [arg]: newValue });
+                          }}
+                          disabled={updateConfig.isPending}
+                          className="font-mono"
+                        />
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+              {provider === PROVIDERS.ollama && (
+                <>
+                  {!config.ollama_base_url || config.ollama_base_url.trim() === '' ? (
+                    <Alert className="mt-4 border-yellow-200 text-yellow-800 dark:border-yellow-800 dark:text-yellow-300">
+                      <AlertCircle className="h-4 w-4" />
+                      <AlertTitle>Ollama Not Configured</AlertTitle>
+                      <AlertDescription>
+                        Please enter a valid Ollama server URL to enable Ollama models.
+                      </AlertDescription>
+                    </Alert>
+                  ) : !config.ollama_available && (
+                    <Alert variant="destructive" className="mt-4">
+                      <AlertCircle className="h-4 w-4" />
+                      <AlertTitle>Connection Error</AlertTitle>
+                      <AlertDescription>
+                        Could not connect to Ollama server at {config.ollama_base_url}. Please check that Ollama is running and the URL is correct.
+                      </AlertDescription>
+                    </Alert>
+                  )}
+                </>
+              )}
+            </div>
+          ))}
+        </CardContent>
+      </ScrollArea>
+    </Card>
+  );
+} 

src/pages/home/hooks.ts

@@ -0,0 +1,5 @@
+import { useConfig, useUpdateConfig, useUpdateEnabledModels } from "@/hooks/use-config";
+import { useDebounceCallback } from "@/hooks/use-debounce";
+
+// Re-export the hooks
+export { useConfig, useUpdateConfig, useUpdateEnabledModels, useDebounceCallback }; 

src/pages/home/page.tsx

@@ -1,271 +1,28 @@
-import { PROVIDERS, CHAT_MODELS, EMBEDDING_MODELS, IConfig, PROVIDERS_CONN_ARGS_MAP, ChatModel, BaseModel } from "@/lib/config/types";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
+import { useEffect } from "react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Badge } from "@/components/ui/badge";
-import { Switch } from "@/components/ui/switch";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { useConfig, useUpdateConfig, useUpdateEnabledModels } from "@/hooks/use-config";
-import { useDebounceCallback } from "@/hooks/use-debounce";
-import { useState } from "react";
-
-const Providers = ({ config }: { config: IConfig | undefined }) => {
-  const updateConfig = useUpdateConfig();
-  const [localValues, setLocalValues] = useState<Record<string, string>>({});
-  const debouncedUpdateConfig = useDebounceCallback((updates: Record<string, string>) => {
-    updateConfig.mutate(updates);
-  }, 500);
-
-  if (!config) return null;
-
-  return (
-    <Card className="h-[calc(100vh-12rem)]">
-      <CardHeader>
-        <CardTitle>Providers</CardTitle>
-        <CardDescription>Configure your AI provider credentials</CardDescription>
-      </CardHeader>
-      <ScrollArea className="h-[calc(100%-8rem)]">
-        <CardContent className="space-y-8 px-6">
-          {Object.values(PROVIDERS).map((provider) => (
-            <div key={provider} className="space-y-4">
-              <h3 className="text-lg font-semibold capitalize">{provider}</h3>
-              <div className="grid gap-4">
-                {PROVIDERS_CONN_ARGS_MAP[provider].map((arg) => {
-                  const value = localValues[arg] ?? config[arg as keyof IConfig] ?? '';
-                  return (
-                    <div key={arg} className="space-y-2">
-                      <label htmlFor={arg} className="text-sm font-medium">{arg.replace(/_/g, ' ').replace(/url/i, 'URL')}</label>
-                      <Input 
-                        id={arg} 
-                        type="text" 
-                        value={value} 
-                        onChange={(e) => {
-                          const newValue = e.target.value;
-                          setLocalValues(prev => ({ ...prev, [arg]: newValue }));
-                          debouncedUpdateConfig({ [arg]: newValue });
-                        }}
-                        disabled={updateConfig.isPending}
-                        className="font-mono"
-                      />
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
-        </CardContent>
-      </ScrollArea>
-    </Card>
-  );
-}
-
-interface ModelListProps {
-  type: 'chat' | 'embedding';
-  models: BaseModel[];
-  config: IConfig | undefined;
-  enabledModels: string[];
-  defaultModel: string;
-  title: string;
-  description: string;
-}
-
-const ModelList = ({ type, models, config, enabledModels, defaultModel, title, description }: ModelListProps) => {
-  const updateEnabledModels = useUpdateEnabledModels(type);
-  const updateConfig = useUpdateConfig();
-  const [selectedDefault, setSelectedDefault] = useState(defaultModel);
-
-  const handleModelToggle = async (model: BaseModel, enabled: boolean) => {
-    await updateEnabledModels.mutateAsync({
-      modelId: model.model,
-      enabled,
-    });
-  };
-
-  const handleDefaultModelChange = async (modelId: string) => {
-    setSelectedDefault(modelId);
-    await updateConfig.mutateAsync({
-      [type === 'chat' ? 'default_chat_model' : 'default_embedding_model']: modelId,
-    });
-  };
-
-  if (!config) return null;
-
-  const isProviderConfigured = (provider: PROVIDERS) => {
-    return PROVIDERS_CONN_ARGS_MAP[provider].every(
-      (arg) => {
-        const value = config[arg as keyof IConfig];
-        return typeof value === 'string' && value.trim().length > 0;
-      }
-    );
-  };
-
-  const handleSelectAll = async () => {
-    for (const model of models) {
-      if (isProviderConfigured(model.provider) && !enabledModels.includes(model.model)) {
-        await updateEnabledModels.mutateAsync({ modelId: model.model, enabled: true });
-      }
-    }
-  };
-
-  const handleUnselectAll = async () => {
-    for (const model of models) {
-      if (enabledModels.includes(model.model)) {
-        await updateEnabledModels.mutateAsync({ modelId: model.model, enabled: false });
-      }
-    }
-    // Then clear the default model
-    updateConfig.mutate({ [`default_${type}_model`]: '' });
-  };
-
-  return (
-    <Card className="h-[calc(100vh-12rem)]">
-      <CardHeader className="space-y-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle>{title}</CardTitle>
-            <CardDescription>{description}</CardDescription>
-          </div>
-          <div className="flex gap-2">
-            <Button 
-              variant="outline" 
-              size="sm"
-              onClick={handleSelectAll}
-              disabled={models.length === 0 || updateConfig.isPending}
-            >
-              Select All
-            </Button>
-            <Button 
-              variant="outline" 
-              size="sm"
-              onClick={handleUnselectAll}
-              disabled={enabledModels.length === 0 || updateConfig.isPending}
-            >
-              Unselect All
-            </Button>
-          </div>
-        </div>
-        <div>
-          <Select value={selectedDefault} onValueChange={handleDefaultModelChange}>
-            <SelectTrigger className="w-[200px]">
-              <SelectValue placeholder="Select default model" />
-            </SelectTrigger>
-            <SelectContent>
-              {models.filter(model => enabledModels.includes(model.model)).map(model => (
-                <SelectItem key={model.model} value={model.model}>
-                  {model.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {enabledModels.length === 0 && (
-            <p className="text-sm text-muted-foreground mt-2">
-              Enable at least one model to set as default
-            </p>
-          )}
-        </div>
-      </CardHeader>
-      <ScrollArea className="h-[calc(100%-13rem)] px-6">
-        <div className="space-y-4 pb-6">
-          {models.map((model) => {
-            const providerConfigured = isProviderConfigured(model.provider);
-            const isChatModel = (m: BaseModel): m is ChatModel => 'modalities' in m;
-            
-            return (
-              <div key={model.model} className={`p-4 rounded-lg border ${providerConfigured ? '' : 'opacity-50'}`}>
-                <div className="flex items-start justify-between">
-                  <div className="space-y-1">
-                    <h3 className="font-medium">{model.name}</h3>
-                    <p className="text-sm text-muted-foreground">{model.description}</p>
-                    {!providerConfigured && (
-                      <p className="text-sm text-muted-foreground">
-                        Configure {model.provider} provider first
-                      </p>
-                    )}
-                    {isChatModel(model) && model.modalities && model.modalities.length > 0 && (
-                      <div className="flex gap-2 flex-wrap pt-2">
-                        {model.modalities.map((modality) => (
-                          <Badge key={modality} variant="outline" className="capitalize">
-                            {modality.toLowerCase()}
-                          </Badge>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                  <Switch 
-                    checked={enabledModels.includes(model.model)}
-                    onCheckedChange={(checked) => {
-                      handleModelToggle(model, checked);
-                      if (!checked && selectedDefault === model.model) {
-                        handleDefaultModelChange('');
-                      }
-                    }}
-                    disabled={!providerConfigured || updateEnabledModels.isPending}
-                  />
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </ScrollArea>
-    </Card>
-  );
-}
-
-const ChatModels = ({ config }: { config: IConfig | undefined }) => {
-  if (!config) return null;
-  
-  return (
-    <ModelList
-      type="chat"
-      models={CHAT_MODELS}
-      config={config}
-      enabledModels={config.enabled_chat_models || []}
-      defaultModel={config.default_chat_model}
-      title="Chat Models"
-      description="Enable or disable available chat models"
-    />
-  );
-}
-
-const EmbeddingModels = ({ config }: { config: IConfig | undefined }) => {
-  if (!config) return null;
-
-  return (
-    <ModelList
-      type="embedding"
-      models={EMBEDDING_MODELS}
-      config={config}
-      enabledModels={config.enabled_embedding_models || []}
-      defaultModel={config.default_embedding_model}
-      title="Embedding Models"
-      description="Enable or disable available embedding models"
-    />
-  );
-}
-
-const Others = () => {
-  return (
-    <div>
-      <h1>Others</h1>
-    </div>
-  );
-}
+import { useConfig } from "./hooks";
+import { useLoading } from "@/contexts/loading-context";
+import { Providers } from "./components/Providers";
+import { ChatModels } from "./components/ChatModels";
+import { EmbeddingModels } from "./components/EmbeddingModels";
+import { Others } from "./components/Others";
 
 export function HomePage() {
   const { data: config, isLoading, error } = useConfig();
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="text-center space-y-4">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto" />
-          <p className="text-muted-foreground">Loading configuration...</p>
-        </div>
-      </div>
-    );
-  }
+  const { startLoading, stopLoading } = useLoading();
+
+  // Show loading screen during initial config load
+  useEffect(() => {
+    if (isLoading) {
+      startLoading("Loading configuration...");
+    } else {
+      stopLoading();
+    }
+    
+    return () => {
+      stopLoading();
+    };
+  }, [isLoading, startLoading, stopLoading]);
 
   if (error) {
     return (
@@ -297,7 +54,7 @@ export function HomePage() {
           <EmbeddingModels config={config} />
         </TabsContent>
         <TabsContent value="others">
-          <Others />
+          <Others config={config} />
         </TabsContent>
       </Tabs>
     </div>

src/pages/home/types.ts

@@ -0,0 +1,27 @@
+import { IConfig, BaseModel } from "@/lib/config/types";
+
+export interface ProvidersProps {
+  config: IConfig | undefined;
+}
+
+export interface ModelListProps {
+  type: 'chat' | 'embedding';
+  models: BaseModel[];
+  config: IConfig | undefined;
+  enabledModels: string[];
+  defaultModel: string;
+  title: string;
+  description: string;
+}
+
+export interface ChatModelsProps {
+  config: IConfig | undefined;
+}
+
+export interface EmbeddingModelsProps {
+  config: IConfig | undefined;
+}
+
+export interface OthersProps {
+  config: IConfig | undefined;
+} 

src/pages/integrations/huggingface-callback.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ConfigManager } from "@/lib/config/manager";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+
+export function HuggingFaceCallback() {
+  const navigate = useNavigate();
+  const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function handleCallback() {
+      try {
+        // Get the authorization code from the URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get("code");
+        
+        if (!code) {
+          setStatus("error");
+          setError("Authorization code not found in URL");
+          return;
+        }
+
+        // Exchange the code for an access token
+        const response = await fetch("https://huggingface.co/oauth/token", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            grant_type: "authorization_code",
+            client_id: import.meta.env.VITE_HF_CLIENT_ID,
+            client_secret: import.meta.env.VITE_HF_CLIENT_SECRET,
+            redirect_uri: import.meta.env.VITE_HF_REDIRECT_URI,
+            code,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error_description || "Failed to exchange code for token");
+        }
+
+        const data = await response.json();
+        const accessToken = data.access_token;
+
+        // Store the access token in the config
+        const configManager = ConfigManager.getInstance();
+        await configManager.updateConfig({ hf_token: accessToken });
+
+        setStatus("success");
+      } catch (err) {
+        console.error("Error during OAuth callback:", err);
+        setStatus("error");
+        setError(err instanceof Error ? err.message : "Unknown error occurred");
+      }
+    }
+
+    handleCallback();
+  }, [navigate]);
+
+  const handleNavigateHome = () => {
+    navigate("/");
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <Card className="w-[400px]">
+        <CardHeader>
+          <CardTitle>Hugging Face Integration</CardTitle>
+          <CardDescription>
+            {status === "loading" && "Setting up your Hugging Face integration..."}
+            {status === "success" && "Successfully connected to Hugging Face!"}
+            {status === "error" && "Failed to connect to Hugging Face"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center gap-4">
+          {status === "loading" && <Loader2 className="h-8 w-8 animate-spin" />}
+          
+          {status === "success" && (
+            <>
+              <div className="text-center text-sm text-muted-foreground">
+                Your Hugging Face API token has been saved. You can now use Hugging Face models.
+              </div>
+              <Button onClick={handleNavigateHome}>Continue to Home</Button>
+            </>
+          )}
+          
+          {status === "error" && (
+            <>
+              <div className="text-center text-sm text-destructive">
+                {error || "An error occurred while connecting to Hugging Face."}
+              </div>
+              <Button variant="outline" onClick={handleNavigateHome}>Back to Home</Button>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 

src/polyfills.ts

@@ -2,7 +2,7 @@ import { Buffer } from 'buffer';
 
 // Make Buffer available globally
 if (typeof window !== 'undefined') {
-  (window as any).Buffer = Buffer;
+  (window as unknown as { Buffer: typeof Buffer }).Buffer = Buffer;
 }
 
 export {}; 

src/routes.tsx

@@ -7,5 +7,5 @@ export const routes = [
     label: "Home",
     icon: <HomeIcon />,
     component: <HomePage />,
-  },
-];
+  }
+];

test/Dockerfile

@@ -0,0 +1,137 @@
+FROM i386/debian:buster-slim
+
+# Set environment variables
+ENV DEBIAN_FRONTEND=noninteractive
+ENV PYTHONUNBUFFERED=1
+ENV PATH="/root/.local/bin:$PATH"
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    ca-certificates \
+    curl \
+    git \
+    libzmq3-dev \
+    pkg-config \
+    python3 \
+    python3-dev \
+    python3-pip \
+    python3-setuptools \
+    python3-wheel \
+    wget \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Upgrade pip
+RUN python3 -m pip install --no-cache-dir --upgrade pip
+
+# Install core Jupyter components
+RUN python3 -m pip install --no-cache-dir \
+    jupyter \
+    jupyterlab \
+    notebook \
+    voila
+
+# Install data science libraries
+RUN python3 -m pip install --no-cache-dir \
+    numpy \
+    pandas \
+    matplotlib \
+    scipy \
+    scikit-learn \
+    seaborn \
+    statsmodels
+
+# Install file processing libraries
+RUN python3 -m pip install --no-cache-dir \
+    openpyxl \
+    xlrd \
+    xlwt \
+    pyarrow \
+    fastparquet \
+    python-docx \
+    pdfminer.six \
+    beautifulsoup4 \
+    lxml \
+    pillow
+
+# Install WASM-friendly packages
+RUN python3 -m pip install --no-cache-dir \
+    pyodide-pack
+
+# Set up workspace directory
+WORKDIR /workspace
+RUN mkdir -p /workspace/data
+
+# Configure Jupyter
+RUN mkdir -p /root/.jupyter && \
+    echo "c.NotebookApp.ip = '0.0.0.0'" >> /root/.jupyter/jupyter_notebook_config.py && \
+    echo "c.NotebookApp.port = 8888" >> /root/.jupyter/jupyter_notebook_config.py && \
+    echo "c.NotebookApp.open_browser = False" >> /root/.jupyter/jupyter_notebook_config.py && \
+    echo "c.NotebookApp.allow_root = True" >> /root/.jupyter/jupyter_notebook_config.py && \
+    echo "c.NotebookApp.token = ''" >> /root/.jupyter/jupyter_notebook_config.py && \
+    echo "c.NotebookApp.password = ''" >> /root/.jupyter/jupyter_notebook_config.py
+
+# Entry point script for WASM compatibility
+COPY <<EOT /workspace/prepare_for_wasm.py
+import os
+import sys
+import json
+import subprocess
+
+def collect_dependencies():
+    """Collect all Python dependencies for WASM conversion"""
+    result = subprocess.run(
+        [sys.executable, "-m", "pip", "freeze"],
+        capture_output=True,
+        text=True
+    )
+    return result.stdout.strip().split('\n')
+
+def create_manifest():
+    """Create a manifest file for WASM conversion"""
+    deps = collect_dependencies()
+    manifest = {
+        "name": "jupyter-datascience-wasm",
+        "version": "1.0.0",
+        "description": "Jupyter notebook with data science libraries for WASM",
+        "dependencies": deps,
+        "main": "server.py",
+        "files": [
+            "server.py",
+            "/root/.jupyter/jupyter_notebook_config.py"
+        ]
+    }
+    
+    with open("/workspace/wasm_manifest.json", "w") as f:
+        json.dump(manifest, f, indent=2)
+    
+    print("Created WASM manifest file at /workspace/wasm_manifest.json")
+
+if __name__ == "__main__":
+    create_manifest()
+    print("Prepared environment for WASM conversion")
+EOT
+
+# Create a simple server script for the WASM environment
+COPY <<EOT /workspace/server.py
+#!/usr/bin/env python3
+import os
+import sys
+from notebook.notebookapp import main
+
+if __name__ == "__main__":
+    sys.exit(main())
+EOT
+
+# Make the server script executable
+RUN chmod +x /workspace/server.py
+
+# Prepare for WASM conversion
+RUN python3 /workspace/prepare_for_wasm.py
+
+# Expose the Jupyter port
+EXPOSE 8888
+
+# Set the default command to start the Jupyter server
+CMD ["python3", "/workspace/server.py"]

test/jupyter-wasm-launcher.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jupyter WASM Instance</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        button {
+            padding: 10px 15px;
+            font-size: 16px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        #status {
+            margin-top: 20px;
+            padding: 15px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+        }
+        #jupyter-frame {
+            width: 100%;
+            height: 600px;
+            border: 1px solid #ddd;
+            margin-top: 20px;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <h1>Jupyter WASM Instance</h1>
+    <p>This page runs a Jupyter notebook server directly in your browser using WebAssembly.</p>
+    
+    <button id="start-button">Start Jupyter Server</button>
+    <div id="status">Status: Ready to launch</div>
+    <iframe id="jupyter-frame" sandbox="allow-scripts allow-same-origin"></iframe>
+
+    <script>
+        document.getElementById('start-button').addEventListener('click', async () => {
+            const statusEl = document.getElementById('status');
+            const frameEl = document.getElementById('jupyter-frame');
+            
+            statusEl.textContent = 'Status: Loading WASM module...';
+            
+            try {
+                // Import the WASM module
+                const wasmModule = await WebAssembly.instantiateStreaming(
+                    fetch('jupyter-datascience.wasm'),
+                    {}
+                );
+                
+                statusEl.textContent = 'Status: Starting Jupyter server...';
+                
+                // Initialize the WASM instance
+                const instance = wasmModule.instance;
+                await instance.exports._start();
+                
+                // Connect to the virtual server
+                const port = 8888; // The port defined in the Docker image
+                const url = `http://localhost:${port}`;
+                
+                statusEl.textContent = 'Status: Jupyter server running at ' + url;
+                
+                // Display in iframe
+                frameEl.style.display = 'block';
+                frameEl.src = url;
+            } catch (error) {
+                statusEl.textContent = 'Status: Error - ' + error.message;
+                console.error(error);
+            }
+        });
+    </script>
+</body>
+</html>

test/start.sh

@@ -0,0 +1,115 @@
+#!/bin/bash
+# Script to build and convert the Docker image to WASM
+
+# Step 1: Build the Docker image
+echo "Building the 32-bit Jupyter Docker image..."
+docker build -t jupyter-datascience-32bit -f Dockerfile .
+
+# Step 2: Install Docker-WASM tools
+echo "Installing Docker-WASM conversion tools..."
+npm install -g @wasmer/wasm-transformer
+npm install -g docker-wasm-cli
+
+# Step 3: Export the Docker image
+echo "Exporting Docker image to a tarball..."
+docker save jupyter-datascience-32bit -o jupyter-datascience-32bit.tar
+
+# Step 4: Convert the Docker image to WASM
+echo "Converting Docker image to WASM format..."
+docker-wasm convert jupyter-datascience-32bit.tar --output jupyter-datascience.wasm
+
+# Step 5: Create a simple HTML launcher
+echo "Creating HTML launcher for the WASM module..."
+cat > jupyter-wasm-launcher.html << 'EOL'
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jupyter WASM Instance</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        button {
+            padding: 10px 15px;
+            font-size: 16px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        #status {
+            margin-top: 20px;
+            padding: 15px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+        }
+        #jupyter-frame {
+            width: 100%;
+            height: 600px;
+            border: 1px solid #ddd;
+            margin-top: 20px;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <h1>Jupyter WASM Instance</h1>
+    <p>This page runs a Jupyter notebook server directly in your browser using WebAssembly.</p>
+    
+    <button id="start-button">Start Jupyter Server</button>
+    <div id="status">Status: Ready to launch</div>
+    <iframe id="jupyter-frame" sandbox="allow-scripts allow-same-origin"></iframe>
+
+    <script>
+        document.getElementById('start-button').addEventListener('click', async () => {
+            const statusEl = document.getElementById('status');
+            const frameEl = document.getElementById('jupyter-frame');
+            
+            statusEl.textContent = 'Status: Loading WASM module...';
+            
+            try {
+                // Import the WASM module
+                const wasmModule = await WebAssembly.instantiateStreaming(
+                    fetch('jupyter-datascience.wasm'),
+                    {}
+                );
+                
+                statusEl.textContent = 'Status: Starting Jupyter server...';
+                
+                // Initialize the WASM instance
+                const instance = wasmModule.instance;
+                await instance.exports._start();
+                
+                // Connect to the virtual server
+                const port = 8888; // The port defined in the Docker image
+                const url = `http://localhost:${port}`;
+                
+                statusEl.textContent = 'Status: Jupyter server running at ' + url;
+                
+                // Display in iframe
+                frameEl.style.display = 'block';
+                frameEl.src = url;
+            } catch (error) {
+                statusEl.textContent = 'Status: Error - ' + error.message;
+                console.error(error);
+            }
+        });
+    </script>
+</body>
+</html>
+EOL
+
+echo "Done! You now have:"
+echo "1. jupyter-datascience.wasm - The WASM module"
+echo "2. jupyter-wasm-launcher.html - A HTML launcher for the WASM module"
+echo ""
+echo "To use, serve these files with a web server that supports WebAssembly and WASM-compatible headers."