diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000000000000000000000000000000000..85e6143924986743fb2b608eac6f0305a7c1810b
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+ "extends": "next/core-web-vitals",
+ "rules": {
+ "react/no-unescaped-entities": ["error", { "forbid": [">", "}"] }]
+ }
+}
diff --git a/.gitattributes b/.gitattributes
index a6344aac8c09253b3b630fb776ae94478aa0275b..dfe0770424b2a19faf507a501ebfc23be8f54e7b 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,35 +1,2 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ae3bd6fd194f0c35cd6a1ad64165ba12c2e6e11d
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,48 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+ push:
+ branches: [feature/live-preview]
+ pull_request:
+ branches: [feature/live-preview]
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [14.x]
+
+ steps:
+ - name: Set Actions Allow Unsecure Commands
+ run: |
+ echo "ACTIONS_ALLOW_UNSECURE_COMMANDS=true" >> $GITHUB_ENV
+
+ - uses: actions/checkout@v2
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v1
+ with:
+ node-version: ${{ matrix.node-version }}
+
+ - name: Installing my packages
+ run: yarn install
+
+ - name: Build my App
+ run: yarn build
+ env:
+ NEXT_PUBLIC_BASE_PATH: /chakra-nextjs-pro
+ - run: yarn export
+ env:
+ NEXT_PUBLIC_BASE_PATH: /chakra-nextjs-pro
+ - run: touch ./out/.nojekyll
+
+ - name: Deploy 🚀
+ uses: JamesIves/github-pages-deploy-action@3.5.9
+ with:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ BRANCH: gh-pages
+ FOLDER: out
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..55b60445c4603da02f52186c54651273890871e8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/node_modules
+package-lock.json
+yarn.lock
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.pem
+.pnpm-debug.log*
+
+# nextjs
+/.next/
+/out/
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.idea
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..5c6c95870c24158ba1c30aa1214d98d5a11663db
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,3 @@
+legacy-peer-deps=true
+auto-install-peers=true
+strict-peer-dependencies=false
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..491758bba1c82b85e87cde4718b9e9d07c663f77
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+ "prettier.singleQuote": true,
+ "prettier.semi": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "typescript.enablePromptUseWorkspaceTsdk": true
+}
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000000000000000000000000000000000000..d2a5ebd8982a8299af6742e149a0b1b52147ab1b
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,7 @@
+# Changelog
+
+## [1.0.0] 2023-06-20
+
+### Official Release
+
+Added TypeScript & NextJS
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..131359ab51e343575c826eae71eeb54d328ce010
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Horizon UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index c0fd70e3aa74f2bfb06dfc3ad9dbf693279a643e..234fea13c0fad72f00f792a9a2a3271c5a634458 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,104 @@
+# [Horizon ChatGPT AI Template](https://horizon-ui.com/chatgpt-ai-template) [](https://twitter.com/intent/tweet?text=Check%20Horizon%20ChatGPT%20AI%20Template,%20the%20trendiest%20open%20source%20ChatGPT%20AI%20admin%20template%20for%20%23nextjs%20and%20%23react!%0A%0Ahttps%3A//horizon-ui.com/chatgpt-ai-template/%20%20)
+
+
+[](https://github.com/horizon-ui/chatgpt-ai-template/issues?q=is%3Aopen+is%3Aissue)
+
+
+
+[](https://horizon-ui.com/ai-template)
+
+
+
+Get started and build your dream AI web app with Horizon AI Template, the trendiest & innovative Open-Source Free ChatGPT AI Admin Template for NextJS & React!
+
---
-title: Hlsitechbot
-emoji: 💬
-colorFrom: yellow
-colorTo: purple
-sdk: gradio
-app_file: app.py
-pinned: false
-license: apache-2.0
+
+### Introduction
+
+Horizon ChatGPT AI Template is the world's best open source OpenAI ChatGPT AI Template made with React, NextJS and Chakra UI! Start creating outstanding Chat AI SaaS Apps faster.
+
+It comes with over 30+ dark/light frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.
+
+### Documentation
+
+Each element is well presented in a very complex documentation. You can read more about the documentation here.
+
+### Quick Start
+
+Install Horizon ChatGPT AI Template by running either of the following:
+
+- Install NodeJS LTS from [NodeJs Official Page](https://nodejs.org/en/?ref=horizon-documentation) (NOTE: Product only works with LTS version)
+
+Clone the repository with the following command:
+
+```bash
+git clone https://github.com/horizon-ui/chatgpt-ai-template.git
+```
+
+Run in the terminal this command:
+
+```bash
+npm install
+```
+
+Then run this command to start your local server
+
+```bash
+npm run dev
+```
+
+### Your API Key is not working?
+
+- Make sure you have an [OpenAI account](https://platform.openai.com/account) and a valid API key to use ChatGPT. We don't sell API keys.
+- Make sure you have your billing info added in [OpenAI Billing page](https://platform.openai.com/account/billing/overview). Without billing info, your API key will not work.
+- The app will connect to the OpenAI API server to check if your API Key is working properly.
+
+### ATTENTION: The model: `GPT-4` does not work yet.
+If you are trying to use GPT-4, model it will not work if you don't have access from OpenAI.
+Note that even if you have ChatGPT Plus, you still need to request access to the GPT-4 API in order to use it with your API Key.
+This is OpenAI's restriction and we can't do anything about it. You can join the waitlist [here](https://openai.com/waitlist/gpt-4-api) .
+
+
+### Example Page
+
+If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example page. You will be able to quickly set up the basic structure for your web project.
+
+View example pages here.
+
+### Versions
+
+| Free Version | PRO Version |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [](https://github.com/horizon-ui/chatgpt-ai-template) | [](https://www.horizon-ui.com/ai-template?ref=readme-horizon-ai-template-free) |
+
+### Figma Version
+
+Horizon AI Template is available in Figma format as well! Check Figma
+files in your .zip files! 🎨
+
+### Reporting Issues
+
+We use GitHub Issues as the official bug tracker for the Horizon UI. Here are
+some advices for our users that want to report an issue:
+
+1. Make sure that you are using the latest version of the Horizon AI Template.
+ Check the CHANGELOG from your dashboard on our
+ [CHANGE LOG File](https://github.com/horizon-ui/chatgpt-ai-template/blob/main/CHANGELOG.md?ref=readme-horizon-ai-template-free).
+2. Providing us reproducible steps for the issue will shorten the time it takes
+ for it to be fixed.
+3. Some issues may be browser specific, so specifying in what browser you
+ encountered the issue might help.
+
---
-An example chatbot using [Gradio](https://gradio.app), [`huggingface_hub`](https://huggingface.co/docs/huggingface_hub/v0.22.2/en/index), and the [Hugging Face Inference API](https://huggingface.co/docs/api-inference/index).
\ No newline at end of file
+### Community
+
+Connect with the community! Feel free to ask questions, report issues, and meet new people that already use Horizon AI Template!
+
+💬 [Join the #HorizonUI Discord Community!](https://discord.gg/f6tEKFBd4m)
+
+### Copyright and license
+
+⭐️ [Copyright 2023 Horizon UI ](https://www.horizon-ui.com/?ref=readme-horizon-ai-template-free)
+
+📄 [Horizon UI License](https://horizon-ui.notion.site/End-User-License-Agreement-8fb09441ea8c4c08b60c37996195a6d5)
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..2543a77d60dd84ce94a76d7c94f1fb25dca79e04
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,19 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+ reactStrictMode: false,
+ swcMinify: true,
+ basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+ assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
+ images: {
+ domains: [
+ 'images.unsplash.com',
+ 'i.ibb.co',
+ 'scontent.fotp8-1.fna.fbcdn.net',
+ ],
+ // Make ENV
+ unoptimized: true,
+ },
+};
+
+module.exports = nextConfig;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..90a129b45dcca6b4918629a05f8e5a729e593d63
--- /dev/null
+++ b/package.json
@@ -0,0 +1,60 @@
+{
+ "name": "horizon-ai-template-pro",
+ "version": "1.0.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "next lint"
+ },
+ "dependencies": {
+ "@chakra-ui/icons": "^1.1.5",
+ "@chakra-ui/react": "1.8.9",
+ "@chakra-ui/system": "^1.12.1",
+ "@chakra-ui/theme-tools": "^1.3.6",
+ "@codemirror/legacy-modes": "^6.3.2",
+ "@emotion/react": "^11.4.1",
+ "@emotion/styled": "^11.3.0",
+ "@heroicons/react": "^2.0.17",
+ "@material-tailwind/react": "^1.4.2",
+ "@tanstack/react-table": "^8.5.15",
+ "@testing-library/jest-dom": "^5.14.1",
+ "@testing-library/react": "^11.2.7",
+ "@testing-library/user-event": "^12.8.3",
+ "@uiw/codemirror-theme-tokyo-night": "^4.19.11",
+ "@uiw/react-codemirror": "^4.19.11",
+ "babel-cli": "^6.26.0",
+ "babel-preset-es2015": "^6.24.1",
+ "babel-preset-react": "^6.24.1",
+ "babel-register": "^6.26.0",
+ "endent": "^2.1.0",
+ "eventsource-parser": "^1.0.0",
+ "framer-motion": "^4.1.17",
+ "next": "13.2.4",
+ "react": "18.2.0",
+ "react-build-sitemap": "^0.2.2",
+ "react-custom-scrollbars-2": "^4.2.1",
+ "react-dom": "18.2.0",
+ "react-icons": "^4.9.0",
+ "react-is": "^18.0.0",
+ "react-markdown": "^8.0.6",
+ "react-router-dom": "^5.3.0",
+ "react-scripts": "5.0.0",
+ "remark-gfm": "^3.0.1",
+ "typescript": "4.9.5",
+ "web-vitals": "^1.1.2"
+ },
+ "devDependencies": {
+ "@types/node": "18.15.11",
+ "@types/react": "18.0.31",
+ "@types/react-dom": "18.0.11",
+ "autoprefixer": "^10.4.14",
+ "eslint": "8.37.0",
+ "eslint-config-next": "13.2.4",
+ "eventsource": "^2.0.2",
+ "postcss": "^8.4.21",
+ "prettier-plugin-tailwindcss": "^0.2.6",
+ "tailwindcss": "^3.3.1"
+ }
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8539071faff3d064ae6dc7a7efc9584f6d562d22
--- /dev/null
+++ b/pages/_app.tsx
@@ -0,0 +1,76 @@
+'use client';
+import type { AppProps } from 'next/app';
+import { ChakraProvider, Box, Portal, useDisclosure } from '@chakra-ui/react';
+import theme from '@/theme/theme';
+import routes from '@/routes';
+import Sidebar from '@/components/sidebar/Sidebar';
+import Footer from '@/components/footer/FooterAdmin';
+import Navbar from '@/components/navbar/NavbarAdmin';
+import { getActiveRoute, getActiveNavbar } from '@/utils/navigation';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import '@/styles/App.css';
+import '@/styles/Contact.css';
+import '@/styles/Plugins.css';
+import '@/styles/MiniCalendar.css';
+
+function App({ Component, pageProps }: AppProps<{}>) {
+ const pathname = usePathname();
+ const [apiKey, setApiKey] = useState('');
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ useEffect(() => {
+ const initialKey = localStorage.getItem('apiKey');
+ if (initialKey?.includes('sk-') && apiKey !== initialKey) {
+ setApiKey(initialKey);
+ }
+ }, [apiKey]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/pages/_document.tsx b/pages/_document.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..191fde381f8b916e55650c2e35fa29618d5380aa
--- /dev/null
+++ b/pages/_document.tsx
@@ -0,0 +1,16 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+import Script from 'next/script';
+
+export default function Document() {
+ return (
+
+
+ Horizon AI Template Free
+
+
+
+
+
+
+ );
+}
diff --git a/pages/api/chatAPI.ts b/pages/api/chatAPI.ts
new file mode 100644
index 0000000000000000000000000000000000000000..13bcf822e2da9790010a7366df939c574aad7332
--- /dev/null
+++ b/pages/api/chatAPI.ts
@@ -0,0 +1,32 @@
+import { ChatBody } from '@/types/types';
+import { OpenAIStream } from '@/utils/chatStream';
+
+export const config = {
+ runtime: 'edge',
+};
+
+const handler = async (req: Request): Promise => {
+ try {
+ const { inputCode, model, apiKey } = (await req.json()) as ChatBody;
+ let apiKeyFinal;
+
+ if (apiKey) {
+ apiKeyFinal = apiKey;
+ } else {
+ apiKeyFinal = process.env.NEXT_PUBLIC_OPENAI_API_KEY;
+ }
+
+ if (!apiKey) {
+ return new Response('API key not found', { status: 500 });
+ }
+
+ const stream = await OpenAIStream(inputCode, model, apiKeyFinal);
+
+ return new Response(stream);
+ } catch (error) {
+ console.error(error);
+ return new Response('Error', { status: 500 });
+ }
+};
+
+export default handler;
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..18a6660603360ca2bf4af8ef03b0807149e00699
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,432 @@
+'use client';
+/*eslint-disable*/
+
+import Link from '@/components/link/Link';
+import MessageBoxChat from '@/components/MessageBox';
+import { ChatBody, OpenAIModel } from '@/types/types';
+import {
+ Accordion,
+ AccordionButton,
+ AccordionIcon,
+ AccordionItem,
+ AccordionPanel,
+ Box,
+ Button,
+ Flex,
+ Icon,
+ Image,
+ Img,
+ Input,
+ Text,
+ useColorModeValue,
+} from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { MdAutoAwesome, MdBolt, MdEdit, MdPerson } from 'react-icons/md';
+import Bg from '../public/img/chat/bg-image.png';
+
+export default function Chat(props: { apiKeyApp: string }) {
+ // *** If you use .env.local variable for your API key, method which we recommend, use the apiKey variable commented below
+ const { apiKeyApp } = props;
+ // Input States
+ const [inputOnSubmit, setInputOnSubmit] = useState('');
+ const [inputCode, setInputCode] = useState('');
+ // Response message
+ const [outputCode, setOutputCode] = useState('');
+ // ChatGPT model
+ const [model, setModel] = useState('gpt-3.5-turbo');
+ // Loading state
+ const [loading, setLoading] = useState(false);
+
+ // API Key
+ // const [apiKey, setApiKey] = useState(apiKeyApp);
+ const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+ const inputColor = useColorModeValue('navy.700', 'white');
+ const iconColor = useColorModeValue('brand.500', 'white');
+ const bgIcon = useColorModeValue(
+ 'linear-gradient(180deg, #FBFBFF 0%, #CACAFF 100%)',
+ 'whiteAlpha.200',
+ );
+ const brandColor = useColorModeValue('brand.500', 'white');
+ const buttonBg = useColorModeValue('white', 'whiteAlpha.100');
+ const gray = useColorModeValue('gray.500', 'white');
+ const buttonShadow = useColorModeValue(
+ '14px 27px 45px rgba(112, 144, 176, 0.2)',
+ 'none',
+ );
+ const textColor = useColorModeValue('navy.700', 'white');
+ const placeholderColor = useColorModeValue(
+ { color: 'gray.500' },
+ { color: 'whiteAlpha.600' },
+ );
+ const handleTranslate = async () => {
+ const apiKey = apiKeyApp;
+ setInputOnSubmit(inputCode);
+
+ // Chat post conditions(maximum number of characters, valid message etc.)
+ const maxCodeLength = model === 'gpt-3.5-turbo' ? 700 : 700;
+
+ if (!apiKeyApp?.includes('sk-') && !apiKey?.includes('sk-')) {
+ alert('Please enter an API key.');
+ return;
+ }
+
+ if (!inputCode) {
+ alert('Please enter your message.');
+ return;
+ }
+
+ if (inputCode.length > maxCodeLength) {
+ alert(
+ `Please enter code less than ${maxCodeLength} characters. You are currently at ${inputCode.length} characters.`,
+ );
+ return;
+ }
+ setOutputCode(' ');
+ setLoading(true);
+ const controller = new AbortController();
+ const body: ChatBody = {
+ inputCode,
+ model,
+ apiKey,
+ };
+
+ // -------------- Fetch --------------
+ const response = await fetch('/api/chatAPI', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ signal: controller.signal,
+ body: JSON.stringify(body),
+ });
+
+ if (!response.ok) {
+ setLoading(false);
+ if (response) {
+ alert(
+ 'Something went wrong went fetching from the API. Make sure to use a valid API key.',
+ );
+ }
+ return;
+ }
+
+ const data = response.body;
+
+ if (!data) {
+ setLoading(false);
+ alert('Something went wrong');
+ return;
+ }
+
+ const reader = data.getReader();
+ const decoder = new TextDecoder();
+ let done = false;
+
+ while (!done) {
+ setLoading(true);
+ const { value, done: doneReading } = await reader.read();
+ done = doneReading;
+ const chunkValue = decoder.decode(value);
+ setOutputCode((prevCode) => prevCode + chunkValue);
+ }
+
+ setLoading(false);
+ };
+ // -------------- Copy Response --------------
+ // const copyToClipboard = (text: string) => {
+ // const el = document.createElement('textarea');
+ // el.value = text;
+ // document.body.appendChild(el);
+ // el.select();
+ // document.execCommand('copy');
+ // document.body.removeChild(el);
+ // };
+
+ // *** Initializing apiKey with .env.local value
+ // useEffect(() => {
+ // ENV file verison
+ // const apiKeyENV = process.env.NEXT_PUBLIC_OPENAI_API_KEY
+ // if (apiKey === undefined || null) {
+ // setApiKey(apiKeyENV)
+ // }
+ // }, [])
+
+ const handleChange = (Event: any) => {
+ setInputCode(Event.target.value);
+ };
+
+ return (
+
+
+
+ {/* Model Change */}
+
+
+ setModel('gpt-3.5-turbo')}
+ >
+
+
+
+ GPT-3.5
+
+ setModel('gpt-4')}
+ >
+
+
+
+ GPT-4
+
+
+
+
+
+
+
+
+ No plugins added
+
+
+
+
+
+
+ This is a cool text example.
+
+
+
+
+
+ {/* Main Box */}
+
+
+
+
+
+
+
+ {inputOnSubmit}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Chat Input */}
+
+
+
+
+
+
+
+ Free Research Preview. ChatGPT may produce inaccurate information
+ about people, places, or facts.
+
+
+
+ ChatGPT May 12 Version
+
+
+
+
+
+ );
+}
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..9166a0443afcedf6b0808a55e1000dded931a62e
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+ trailingComma: 'all',
+ singleQuote: true,
+};
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..da993818cd3c662c9a5671ae7c2b4690509c9085
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/fonts/dm-sans/DMSans-Bold.ttf b/public/fonts/dm-sans/DMSans-Bold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..e70172a067fd15966d7a40fe245db4a9e4940c46
Binary files /dev/null and b/public/fonts/dm-sans/DMSans-Bold.ttf differ
diff --git a/public/fonts/dm-sans/DMSans-BoldItalic.ttf b/public/fonts/dm-sans/DMSans-BoldItalic.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..8b972ca08cafc8d053d69eb4a7fc94383160104d
Binary files /dev/null and b/public/fonts/dm-sans/DMSans-BoldItalic.ttf differ
diff --git a/public/fonts/dm-sans/DMSans-Italic.ttf b/public/fonts/dm-sans/DMSans-Italic.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..b965526a84296cede04b5a9411d6565641222a13
Binary files /dev/null and b/public/fonts/dm-sans/DMSans-Italic.ttf differ
diff --git a/public/fonts/dm-sans/DMSans-Medium.ttf b/public/fonts/dm-sans/DMSans-Medium.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..71b2277252b017b755e0849eb9f898709eb37bfc
Binary files /dev/null and b/public/fonts/dm-sans/DMSans-Medium.ttf differ
diff --git a/public/fonts/dm-sans/DMSans-MediumItalic.ttf b/public/fonts/dm-sans/DMSans-MediumItalic.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..d3293d6641e0b59d8f0d8d19948ab107589f7dde
Binary files /dev/null and b/public/fonts/dm-sans/DMSans-MediumItalic.ttf differ
diff --git a/public/fonts/dm-sans/DMSans-Regular.ttf b/public/fonts/dm-sans/DMSans-Regular.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..cad73f073f3f34ac72a31f79166a5a916e8519b6
Binary files /dev/null and b/public/fonts/dm-sans/DMSans-Regular.ttf differ
diff --git a/public/fonts/dm-sans/OFL.txt b/public/fonts/dm-sans/OFL.txt
new file mode 100644
index 0000000000000000000000000000000000000000..a6fa62b9aff3bf405a65dce4508944328bb8ea59
--- /dev/null
+++ b/public/fonts/dm-sans/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2014-2017 Indian Type Foundry (info@indiantypefoundry.com). Copyright 2019 Google LLC.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/img/avatars/avatar1.png b/public/img/avatars/avatar1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac03d83862e99454a2874729eb84429d409aee3a
Binary files /dev/null and b/public/img/avatars/avatar1.png differ
diff --git a/public/img/avatars/avatar10.png b/public/img/avatars/avatar10.png
new file mode 100644
index 0000000000000000000000000000000000000000..5354688c0804932054d6e59c97f98139bd139443
Binary files /dev/null and b/public/img/avatars/avatar10.png differ
diff --git a/public/img/avatars/avatar2.png b/public/img/avatars/avatar2.png
new file mode 100644
index 0000000000000000000000000000000000000000..bed4822a1d0c9b79a3f64b9f3079a7f77a99cdbb
Binary files /dev/null and b/public/img/avatars/avatar2.png differ
diff --git a/public/img/avatars/avatar3.png b/public/img/avatars/avatar3.png
new file mode 100644
index 0000000000000000000000000000000000000000..0101d3b3de767a9af3e8fa346b16a9e21f6a4aa8
Binary files /dev/null and b/public/img/avatars/avatar3.png differ
diff --git a/public/img/avatars/avatar4.png b/public/img/avatars/avatar4.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4206b860ec2c9d82ac352940bf88a46d441f49b
Binary files /dev/null and b/public/img/avatars/avatar4.png differ
diff --git a/public/img/avatars/avatar5.png b/public/img/avatars/avatar5.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e3140151a7404814bf036cd22cd3445f5f3833d
Binary files /dev/null and b/public/img/avatars/avatar5.png differ
diff --git a/public/img/avatars/avatar6.png b/public/img/avatars/avatar6.png
new file mode 100644
index 0000000000000000000000000000000000000000..66f7bc1eb022fadea92449396792f4d2d600465a
Binary files /dev/null and b/public/img/avatars/avatar6.png differ
diff --git a/public/img/avatars/avatar7.png b/public/img/avatars/avatar7.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a357150f91f2cdefe80b971afd98774d34b7df7
Binary files /dev/null and b/public/img/avatars/avatar7.png differ
diff --git a/public/img/avatars/avatar8.png b/public/img/avatars/avatar8.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3759db8a2427db18f949d08a52ccc0d68ad63a0
Binary files /dev/null and b/public/img/avatars/avatar8.png differ
diff --git a/public/img/avatars/avatar9.png b/public/img/avatars/avatar9.png
new file mode 100644
index 0000000000000000000000000000000000000000..c79ef85bcac7bfc501555419c26379d33254afa0
Binary files /dev/null and b/public/img/avatars/avatar9.png differ
diff --git a/public/img/avatars/avatarSimmmple.png b/public/img/avatars/avatarSimmmple.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed4c5142c75eb0d64b81b1a818b03dd524f0e5ce
Binary files /dev/null and b/public/img/avatars/avatarSimmmple.png differ
diff --git a/public/img/chat/bg-image.png b/public/img/chat/bg-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7fcdd0136552b7d812182d41158be61ae0778c3
Binary files /dev/null and b/public/img/chat/bg-image.png differ
diff --git a/public/img/layout/Navbar.png b/public/img/layout/Navbar.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d64e896361a19c5d71d71e242086da645144ce5
Binary files /dev/null and b/public/img/layout/Navbar.png differ
diff --git a/public/img/layout/logoWhite.png b/public/img/layout/logoWhite.png
new file mode 100644
index 0000000000000000000000000000000000000000..61ac80f2ad2de5613bc0bc4479a19fc6a34d8f70
Binary files /dev/null and b/public/img/layout/logoWhite.png differ
diff --git a/public/img/plan/InvoiceBg.png b/public/img/plan/InvoiceBg.png
new file mode 100644
index 0000000000000000000000000000000000000000..108383f7624eff61a400a346c80677c1d625ac1b
Binary files /dev/null and b/public/img/plan/InvoiceBg.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..1f2f141fafdeb1d31d85b008ec5132840c5e6362
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+ "short_name": "React App",
+ "name": "Create React App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000000000000000000000000000000000000..60e24b49adde12fc5bf46ee59eb612d4d82c5766
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+User-Agent: *
+Disallow:
+Sitemap: https://horizon-ui.com
\ No newline at end of file
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9a34225cf3870abf1c6bb9a461d3ac17842009c9
--- /dev/null
+++ b/src/components/CodeBlock.tsx
@@ -0,0 +1,52 @@
+import { StreamLanguage } from '@codemirror/language';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
+import CodeMirror from '@uiw/react-codemirror';
+import { FC, useEffect, useState } from 'react';
+
+interface Props {
+ code: string;
+ height: string;
+ editable?: boolean;
+ onChange?: (value: string) => void;
+}
+
+export const CodeBlock: FC = ({
+ height,
+ code,
+ editable = false,
+ onChange = () => {},
+}) => {
+ const [copyText, setCopyText] = useState('Copy');
+
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ setCopyText('Copy');
+ }, 2000);
+
+ return () => clearTimeout(timeout);
+ }, [copyText]);
+
+ return (
+