horizon-ui/horizon-ai-template-pro

Issues & Updates of Horizon UI AI Template PRO

horizon-ai-template-pro's Issues

Prop style did not match.

Hi,

I have an error with this template. It seems something wrong with Scrollbar component.

Warning: Prop `style` did not match. Server: "position:absolute;top:0;left:0;right:0;bottom:0;overflow:scroll;-webkit-overflow-scrolling:touch;margin-right:0;margin-bottom:-22px" Client: "position:absolute;top:0;left:0;right:0;bottom:0;overflow:scroll;-webkit-overflow-scrolling:touch;margin-right:-15px;margin-bottom:-22px"
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-5PL47M24.mjs:51:102)
    at div
    at Scrollbars (webpack-internal:///(app-client)/./node_modules/react-custom-scrollbars-2/lib/Scrollbars/index.js:65:9)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-5PL47M24.mjs:51:102)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-5PL47M24.mjs:51:102)
    at Sidebar (webpack-internal:///(app-client)/./src/components/sidebar/Sidebar.tsx:35:13)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-5PL47M24.mjs:51:102)
    at EnvironmentProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/react-env/dist/chunk-VMD3UMGK.mjs:34:11)
    at ColorModeProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/color-mode/dist/chunk-AMBGAKG2.mjs:29:5)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:123:50)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-MFVQSVQB.mjs:30:11)
    at ChakraProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/provider/dist/chunk-3DDHO3UN.mjs:21:5)
    at ChakraProvider2 (webpack-internal:///(app-client)/./node_modules/@chakra-ui/react/dist/chunk-QAITB7GG.mjs:19:5)
    at AppWrappers (webpack-internal:///(app-client)/./app/AppWrappers.tsx:37:11)
    at body
    at html
    at RootLayout (webpack-internal:///(app-client)/./app/layout.tsx:40:11)
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:61:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:20:11)
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:48:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:59:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:24:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:147:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:164:11)

Template error on Bootstrap to Tailwind Converter

When trying to access Bootstrap to Tailwind Converter, I am getting an error.

This is on JS version.

Wrong header being set in Domain Name Generator Template

You're setting a "Content-Keywords" header, which is not a

      headers: {
        'Content-Keywords': 'application/json',
      },

I believe, like in all the other templates, this would need to be

      headers: {
        'Content-Type': 'application/json',
      },

instead.

Accessing Pet Name Generator throws error

When trying to access Pet Name Generator, an error is thrown

I am using the JS version.

Console React errors

When calling /all-templates the console throws react errors, although React labels them as Warning

These Warnings also show up in the terminal when calling npm run dev.

Is there a way to suppress them? So they don't show up in the console?

Use of NEXT_PUBLIC_ for API key

Use of NEXT_PUBLIC_OPENAI_API_KEY throughout, which exposes one's private API Key.

As per NextJs documentation, NEXT_PUBLIC_ is used to bundle environment variables for use through the browser.

So all request send through the api key like:
{"inputCode":"Explain square root","model":"gpt-4","apiKey":"-exposing environment api key-"}
This may be fine when the user provides their own API key, but as you are recommending the use of API key in .env.local,
"If you use .env.local variable for your API key, method which we recommend, use the apiKey variable commented below"
you're providing the following code snippet:
const apiKeyENV = process.env.NEXT_PUBLIC_OPENAI_API_KEY
which is then transmitted in the request to the server.

I would suggest you pick up the api key later, right before sending request to OpenAI API, when setting the Bearer Authorisation header, using
process.env.OPENAI_API_KEY
instead.

Error thrown when running npm run build

While npm run dev runs fine, npm run build throws an error:

./src/components/menu/ItemContent.jsx
6:33  Error: Parsing error: Unexpected token, expected "," (6:33)

As per Copilot "Type annotations can only be used in TypeScript files"

I am using the JS version.
Looks like a TS to JS conversion issue.

npm run build is also run when trying to deploy it in the cloud, and is where I noticed it first.

I changed this to
export function ItemContent(props) {
which seems to work fine.

But the npm run build still fails on both

> Build error occurred
Error: Export encountered errors on following paths:
        /bootstrap-to-tailwind-converter
        /pet-name-generator

as per the other two tickets. So they probably also contain TS to JS conversion issues

Display issue on 404 in Light mode

When calling a page that doesn't exist, for example http://localhost:3000/all-templates/blabla
the 404 page is displayed as expected, but in Light mode it's not quite right. In Dark mode it is fine.

Light mode = not OK

Dark mode = OK

This is on the JS version