{"id":28889970,"url":"https://github.com/corbaz/web-chat","last_synced_at":"2025-10-15T04:55:56.739Z","repository":{"id":290351670,"uuid":"943824828","full_name":"corbaz/web-chat","owner":"corbaz","description":"PROMPTING","archived":false,"fork":false,"pushed_at":"2025-05-16T08:45:45.000Z","size":3894,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-21T00:48:37.707Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://corbaz.github.io/web-chat/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/corbaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-06T10:25:00.000Z","updated_at":"2025-05-16T08:45:49.000Z","dependencies_parsed_at":"2025-04-28T11:32:20.813Z","dependency_job_id":"1a16c880-02a1-4676-a842-af82ff67f999","html_url":"https://github.com/corbaz/web-chat","commit_stats":null,"previous_names":["corbaz/web-chat"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/corbaz/web-chat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2Fweb-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2Fweb-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2Fweb-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2Fweb-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corbaz","download_url":"https://codeload.github.com/corbaz/web-chat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbaz%2Fweb-chat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279050871,"owners_count":26093599,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-21T00:33:06.275Z","updated_at":"2025-10-15T04:55:56.734Z","avatar_url":"https://github.com/corbaz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + TypeScript + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n## Expanding the ESLint configuration\n\nIf you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:\n\n```js\nexport default tseslint.config({\n  extends: [\n    // Remove ...tseslint.configs.recommended and replace with this\n    ...tseslint.configs.recommendedTypeChecked,\n    // Alternatively, use this for stricter rules\n    ...tseslint.configs.strictTypeChecked,\n    // Optionally, add this for stylistic rules\n    ...tseslint.configs.stylisticTypeChecked,\n  ],\n  languageOptions: {\n    // other options...\n    parserOptions: {\n      project: ['./tsconfig.node.json', './tsconfig.app.json'],\n      tsconfigRootDir: import.meta.dirname,\n    },\n  },\n})\n```\n\nYou can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:\n\n```js\n// eslint.config.js\nimport reactX from 'eslint-plugin-react-x'\nimport reactDom from 'eslint-plugin-react-dom'\n\nexport default tseslint.config({\n  plugins: {\n    // Add the react-x and react-dom plugins\n    'react-x': reactX,\n    'react-dom': reactDom,\n  },\n  rules: {\n    // other rules...\n    // Enable its recommended typescript rules\n    ...reactX.configs['recommended-typescript'].rules,\n    ...reactDom.configs.recommended.rules,\n  },\n})\n```\n# Web-Chat con Vite, React y Tailwind\n\n```cmd\nbun create vite@latest web-chat\n```\n\n## Configuración\n\n```json\n# package.json\n{\n    \"name\": \"web-chat\",\n    \"private\": true,\n    \"version\": \"v.2.7\",\n    \"type\": \"module\",\n    \"scripts\": {\n        \"bun-install\": \"bun install\",\n        \"bun-upgrade\": \"bun upgrade \u0026\u0026 bunx -y npm-check-updates\",\n        \"ncu\": \"npx -y npm-check-updates -u \u0026\u0026 bun update\",\n        \"dev\": \"vite --host\",\n        \"build\": \"tsc -b \u0026\u0026 vite build --outDir ./docs\",\n        \"lint\": \"eslint .\",\n        \"preview\": \"vite preview --host\",\n        \"deploy\": \"surge docs --domain deepchat.surge.sh\"\n    },\n    \"dependencies\": {\n        \"@tailwindcss/vite\": \"^4.1.6\",\n        \"axios\": \"^1.9.0\",\n        \"react\": \"^19.1.0\",\n        \"react-dom\": \"^19.1.0\",\n        \"react-select\": \"^5.10.1\",\n        \"sweetalert2\": \"^11.21.0\",\n        \"tailwindcss\": \"^4.1.6\"\n    },\n    \"devDependencies\": {\n        \"@eslint/js\": \"^9.26.0\",\n        \"@types/react\": \"^19.1.4\",\n        \"@types/react-dom\": \"^19.1.4\",\n        \"@vitejs/plugin-react\": \"^4.4.1\",\n        \"eslint\": \"^9.26.0\",\n        \"eslint-plugin-react-hooks\": \"^5.2.0\",\n        \"eslint-plugin-react-refresh\": \"^0.4.20\",\n        \"globals\": \"^16.1.0\",\n        \"typescript\": \"~5.8.3\",\n        \"typescript-eslint\": \"^8.32.1\",\n        \"vite\": \"^6.3.5\"\n    }\n}\n```\n\n```bash\nbun install tailwindcss @tailwindcss/vite\n```\n\n## Instalar Tailwind CSS\n\nComo complemento de Vite es la forma más sencilla de integrarlo con marcos como Laravel, SvelteKit, React Router, Nuxt y SolidJS.\n\n* 01 - Instalar Tailwind CSS\n\n  ```bash\n  bun install tailwindcss @tailwindcss/vite\n  ```\n\n* 02 - Configurar el complemento Vite\n\n  Añade el @tailwindcss/vite plugin a tu configuración de Vite.\n\n  ```typescript\n  # vite.config.ts\n  import { defineConfig } from 'vite'\n  import tailwindcss from '@tailwindcss/vite'\n  export default defineConfig({\n    plugins: [\n      tailwindcss(),\n    ],\n  })\n  ```\n\n* 03 - Importar CSS de Tailwind\n\n  Agregue un @import a su archivo CSS que importe Tailwind CSS.\n\n  ```css\n  # src/styles.css\n  @import \"tailwindcss\";\n  ```\n\n* 04 - Comience su proceso de construcción\n\n  Ejecute su proceso de compilación con bun run dev o cualquier comando que esté configurado en su archivo package.json.\n\n  ```bash\n  bun run dev\n  ```\n\n* 05 - Comience a utilizar Tailwind en su HTML\n\n  Asegúrese de que su CSS compilado esté incluido en el elemento head (su marco podría encargarse de esto por ti), luego comience a usar las clases de utilidad de Tailwind para darle estilo a su contenido.\n\n  ```html\n  \u003c!doctype html\u003e\n  \u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003clink href=\"/src/styles.css\" rel=\"stylesheet\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1 class=\"text-3xl font-bold underline\"\u003e\n      Hello world!\n    \u003c/h1\u003e\n    {/* Botón de limpieza en la barra de herramientas */}\n    \u003cbutton\n        onClick={handleClearText}\n        className={`p-1 rounded-full flex items-center justify-center transition-opacity duration-200 ${\n            message.length \u003e 0\n                ? \"opacity-100\"\n                : \"opacity-50 cursor-not-allowed\"\n        }`}\n        style={{\n            backgroundColor:\n                message.length \u003e 0\n                    ? theme.button.background\n                    : isDarkTheme\n                    ? \"rgba(255, 255, 255, 0.1)\"\n                    : \"rgba(0, 0, 0, 0.08)\",\n            color: theme.button.text,\n        }}\n        disabled={message.length === 0}\n        title=\"Borrar mensaje\"\n    \u003e\n        \u003csvg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            className=\"w-5 h-5\"\n        \u003e\n            \u003cpath\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth=\"2\"\n                d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n            /\u003e\n        \u003c/svg\u003e\n    \u003c/button\u003e\n    {/* Botón de enviar mensaje */}\n    \u003cbutton\n          onClick={handleSendMessage}\n          title=\"Enviar Pregunta\"\n          className={`absolute p-2 rounded-full flex items-center justify-center ${\n              message.trim() \u0026\u0026 !isLoading\n                  ? \"opacity-100\"\n                  : \"opacity-50 cursor-not-allowed\"\n          }`}\n          style={{\n              backgroundColor: theme.button.background,\n              color: theme.button.text,\n              right: \"8px\", // Ajuste horizontal\n              top: \"50%\", // Posicionar en el centro vertical\n              transform: \"translateY(-50%)\", // Centrar perfectamente\n          }}\n          disabled={!message.trim() || isLoading}\n      \u003e\n          \u003csvg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"1.5\"\n              stroke=\"currentColor\"\n              className=\"w-5 h-5\"\n          \u003e\n              \u003cpath\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  d=\"M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5\"\n              \u003e\u003c/path\u003e\n          \u003c/svg\u003e\n    \u003c/button\u003e\n  \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n\n```cmd\ncurl -X GET \"https://api.groq.com/openai/v1/models\" \\\n     -H \"Authorization: Bearer API_KEY\" \\\n     -H \"Content-Type: application/json\"\n```\n\n### Console API Groq\n\nAPI Key: https://console.groq.com/keys [![Groq](https://img.shields.io/badge/Groq-API-blue?style=flat\u0026logo=groq)](https://console.groq.com/keys)\n\n---\n\n### Repositorio en GitHub\nRepositorio: https://github.com/corbaz/web-chat [![GitHub](https://img.shields.io/badge/GitHub-Repo-blue?style=flat\u0026logo=github)](https://github.com/corbaz/web-chat)\n\n---\n\n### Deploy\nDeploy en surge: https://deepchat.surge.sh/ [![Surge](https://img.shields.io/badge/Surge-Deploy-blue?style=flat\u0026logo=surge)](https://deepchat.surge.sh/)\n\nDeploy en github pages: https://corbaz.github.io/web-chat/ [![GitHub Pages](https://img.shields.io/badge/GitHub%20Pages-Deploy-blue?style=flat\u0026logo=github)](https://corbaz.github.io/web-chat/)\n  \n---","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorbaz%2Fweb-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorbaz%2Fweb-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorbaz%2Fweb-chat/lists"}