diff --git a/package-lock.json b/package-lock.json index d3498a5c..27cc5b25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.6.0", "@next/env": "^15.0.3", - "@patternfly/react-core": "^5.4.0", + "@patternfly/react-core": "^6.0.0", "@patternfly/react-icons": "^6.0.0", "@patternfly/react-styles": "^6.0.0", "@patternfly/react-table": "^6.0.0", @@ -1206,13 +1206,13 @@ } }, "node_modules/@patternfly/react-core": { - "version": "5.4.8", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.4.8.tgz", - "integrity": "sha512-4KRsQsH39VmTiFPLdN34QqNZg6gKrTamJxKtWEPO1VKA0TpoRMwpFEGk9BDyxipxYST6WzXznAaLCidGkCDlWw==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0.tgz", + "integrity": "sha512-UKFj9+YzBY+FfEDsLONgOM4N0e8SPV/27/UzNRiJ0gpgqbw2POuXwLpjGSRTTIUuCaLaGGM5PeTSj7mMB73ykw==", "dependencies": { - "@patternfly/react-icons": "^5.4.2", - "@patternfly/react-styles": "^5.4.1", - "@patternfly/react-tokens": "^5.4.1", + "@patternfly/react-icons": "^6.0.0", + "@patternfly/react-styles": "^6.0.0", + "@patternfly/react-tokens": "^6.0.0", "focus-trap": "7.6.0", "react-dropzone": "^14.2.3", "tslib": "^2.7.0" @@ -1222,25 +1222,6 @@ "react-dom": "^17 || ^18" } }, - "node_modules/@patternfly/react-core/node_modules/@patternfly/react-icons": { - "version": "5.4.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.4.2.tgz", - "integrity": "sha512-CMQ5oHYzW6TPVTs2jpNJmP2vGCAKR/YeTPwHGO9dLkAUej1IcIxtCCWK2Fdo2UJsnBjuZihasyw2b6ehvbUm9Q==", - "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" - } - }, - "node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.4.1.tgz", - "integrity": "sha512-XA8PXksD8uiA3RTwxdUwJXOCf+V6sVd+2HKapWAdRLvtSV+Sdk7NgCvalb4IAQncsddLopjPQD8gAHA298+N8w==" - }, - "node_modules/@patternfly/react-core/node_modules/@patternfly/react-tokens": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.4.1.tgz", - "integrity": "sha512-eygdHE7Krta1mijAv/E8RHiKIgysD0eeNTo8EXUYC8/M4e5K6sqpr2p6rQBF8QiRMN8FnbXvZT3K2OQ28pYt9Q==" - }, "node_modules/@patternfly/react-icons": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0.tgz", @@ -1272,23 +1253,6 @@ "react-dom": "^17 || ^18" } }, - "node_modules/@patternfly/react-table/node_modules/@patternfly/react-core": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0.tgz", - "integrity": "sha512-UKFj9+YzBY+FfEDsLONgOM4N0e8SPV/27/UzNRiJ0gpgqbw2POuXwLpjGSRTTIUuCaLaGGM5PeTSj7mMB73ykw==", - "dependencies": { - "@patternfly/react-icons": "^6.0.0", - "@patternfly/react-styles": "^6.0.0", - "@patternfly/react-tokens": "^6.0.0", - "focus-trap": "7.6.0", - "react-dropzone": "^14.2.3", - "tslib": "^2.7.0" - }, - "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" - } - }, "node_modules/@patternfly/react-tokens": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0.tgz", diff --git a/package.json b/package.json index 5a71c8c1..f8d76c16 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.6.0", "@next/env": "^15.0.3", - "@patternfly/react-core": "^5.4.0", + "@patternfly/react-core": "^6.0.0", "@patternfly/react-icons": "^6.0.0", "@patternfly/react-styles": "^6.0.0", "@patternfly/react-table": "^6.0.0", diff --git a/src/app/login/githublogin.tsx b/src/app/login/githublogin.tsx index e7d49daa..ed75f3f2 100644 --- a/src/app/login/githublogin.tsx +++ b/src/app/login/githublogin.tsx @@ -1,14 +1,14 @@ import React, { useEffect, useState } from 'react'; import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'; -import { Text } from '@patternfly/react-core/dist/dynamic/components/Text'; -import { TextContent } from '@patternfly/react-core/dist/dynamic/components/Text'; +import { Content } from '@patternfly/react-core/dist/dynamic/components/Content'; + import { Grid } from '@patternfly/react-core/dist/dynamic/layouts/Grid'; import { GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid'; import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon'; import './githublogin.css'; import { signIn } from 'next-auth/react'; import { useRouter, useSearchParams } from 'next/navigation'; -import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/components/Modal'; +import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/deprecated/components/Modal'; const GithubLogin: React.FC = () => { const searchParams = useSearchParams(); @@ -75,14 +75,16 @@ const GithubLogin: React.FC = () => {
- - Sign in to your account - - - + + + Sign in to your account + + + + Join the novel, community based movement to

create truly open source LLMs -
-
+ +
- - + + GitHub {' '} @@ -116,8 +118,8 @@ const GithubLogin: React.FC = () => { > Code Of Conduct - - + + Terms of use {' '} @@ -125,8 +127,8 @@ const GithubLogin: React.FC = () => { Privacy Policy - - + +
diff --git a/src/app/login/locallogin.tsx b/src/app/login/locallogin.tsx index 15331d18..f30e1136 100644 --- a/src/app/login/locallogin.tsx +++ b/src/app/login/locallogin.tsx @@ -1,9 +1,14 @@ // src/app/login/LocalLogin.tsx -// 'use client'; - import React, { useState } from 'react'; import { signIn } from 'next-auth/react'; -import { Grid, GridItem, Text, TextContent, Form, FormGroup, TextInput, Button, HelperText, HelperTextItem } from '@patternfly/react-core'; +import { Grid, GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid'; +import { Content } from '@patternfly/react-core/dist/dynamic/components/Content'; +import { Form } from '@patternfly/react-core/dist/dynamic/components/Form'; +import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form'; +import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput'; +import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'; +import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText'; +import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText'; import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon'; import './githublogin.css'; @@ -42,12 +47,16 @@ const LocalLogin: React.FunctionComponent = () => {
- - Login locally with a username and password or via GitHub OAuth - - - Join the novel, community-based movement to create truly open-source LLMs - + + + Login locally with a username and password or via GitHub OAuth + + + + + Join the novel, community-based movement to create truly open-source LLMs + +
- - + + { > Code Of Conduct - - + + { > Privacy Policy - - + +
diff --git a/src/app/playground/chat/page.tsx b/src/app/playground/chat/page.tsx index 916ce42d..c1e667ac 100644 --- a/src/app/playground/chat/page.tsx +++ b/src/app/playground/chat/page.tsx @@ -6,7 +6,7 @@ import { AppLayout } from '@/components/AppLayout'; import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'; import { Form } from '@patternfly/react-core/dist/dynamic/components/Form'; import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form'; -import { Breadcrumb, BreadcrumbItem, PageBreadcrumb, PageSection, TextContent, TextInput, Title } from '@patternfly/react-core/'; +import { Breadcrumb, BreadcrumbItem, PageBreadcrumb, PageSection, Content, Title } from '@patternfly/react-core/'; import { Select } from '@patternfly/react-core/dist/dynamic/components/Select'; import { SelectOption, SelectList } from '@patternfly/react-core/dist/dynamic/components/Select'; import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle'; @@ -19,6 +19,7 @@ import Image from 'next/image'; import styles from './chat.module.css'; import { Endpoint, Message, Model } from '@/types'; import CopyToClipboardButton from '@/components/CopyToClipboardButton'; +import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput'; const ChatPage: React.FC = () => { const [question, setQuestion] = useState(''); @@ -87,7 +88,7 @@ const ChatPage: React.FC = () => { )); - const handleQuestionChange = (event: React.FormEvent, value: string) => { + const handleQuestionChange = (_event: React.FormEvent, value: string) => { setQuestion(value); }; @@ -255,12 +256,12 @@ const ChatPage: React.FC = () => { Chat with a Model - +
Chat with the served models. Currently it allows you to chat with Merlinite-7b and Granite-7B models hosted on your Cloud. Users can add their own custom endpoint using the "Custom Model Endpoints" feature. Once the custom endpoint is configured, it will be available in the model selector dropdown with the pre hosted models. -
+
@@ -276,9 +277,13 @@ const ChatPage: React.FC = () => { > {dropdownItems} - +
{messages.map((msg, index) => ( @@ -299,7 +304,7 @@ const ChatPage: React.FC = () => {
{ return ( - + Dashboard Custom Model Endpoints - + Custom Model Endpoints - +
Manage your own customer model endpoints. If you have a custom model that is served by an endpoint, you can add it here. This will allow you to use the custom model in the playground chat. -
+
- +
Manage Endpoints diff --git a/src/components/AboutModal/AboutModal.tsx b/src/components/AboutModal/AboutModal.tsx index 519feb21..9276865c 100644 --- a/src/components/AboutModal/AboutModal.tsx +++ b/src/components/AboutModal/AboutModal.tsx @@ -1,5 +1,5 @@ import { useCallback, type Dispatch, type SetStateAction } from 'react'; -import { Text, TextContent, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text'; +import { Content, ContentVariants } from '@patternfly/react-core/dist/dynamic/components/Content'; import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'; import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon'; import InstructLabLogo from '../../../public/updated-logo.png'; @@ -25,15 +25,17 @@ const AboutInstructLab = ({ isOpen, setIsOpen }: AboutModalProps) => { >
- - About InstructLab - - - + + + About InstructLab + + + + InstructLab is an open source AI project that allows
you to shape the future of Large Language Models.
Join the community to start contributing today. -
-
+ +
- - + + © InstructLab | Version 1.0.0 Beta - - + + Terms of use {' '} @@ -59,8 +61,8 @@ const AboutInstructLab = ({ isOpen, setIsOpen }: AboutModalProps) => { Privacy Policy - - + +
); diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 285eab8b..12bdd06d 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -2,20 +2,18 @@ 'use client'; import * as React from 'react'; - import { Page, PageToggleButton } from '@patternfly/react-core/dist/dynamic/components/Page'; -import { Text, TextContent, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text'; +import { Content, ContentVariants } from '@patternfly/react-core/dist/dynamic/components/Content'; import { usePathname, useRouter } from 'next/navigation'; - import { BarsIcon } from '@patternfly/react-icons/dist/dynamic/icons/bars-icon'; import { Brand } from '@patternfly/react-core/dist/dynamic/components/Brand'; import HelpDropdown from './HelpDropdown/HelpDropdown'; import Link from 'next/link'; import { Masthead } from '@patternfly/react-core/dist/dynamic/components/Masthead'; -import { MastheadBrand } from '@patternfly/react-core/dist/dynamic/components/Masthead'; +import { MastheadLogo } from '@patternfly/react-core/dist/dynamic/components/Masthead'; import { MastheadContent } from '@patternfly/react-core/dist/dynamic/components/Masthead'; import { MastheadMain } from '@patternfly/react-core/dist/dynamic/components/Masthead'; -import { MastheadToggle } from '@patternfly/react-core/dist/dynamic/components/Masthead'; +import { MastheadToggle, MastheadBrand } from '@patternfly/react-core/dist/dynamic/components/Masthead'; import { Nav } from '@patternfly/react-core/dist/dynamic/components/Nav'; import { NavExpandable } from '@patternfly/react-core/dist/dynamic/components/Nav'; import { NavItem } from '@patternfly/react-core/dist/dynamic/components/Nav'; @@ -26,7 +24,7 @@ import { SkipToContent } from '@patternfly/react-core/dist/dynamic/components/Sk import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner'; import UserMenu from './UserMenu/UserMenu'; import { useSession } from 'next-auth/react'; -import { useTheme } from '../context/ThemeContext'; +// import { useTheme } from '../context/ThemeContext'; import { useState } from 'react'; interface IAppLayout { @@ -40,7 +38,8 @@ type Route = { }; const AppLayout: React.FunctionComponent = ({ children }) => { - const { theme } = useTheme(); + // TODO: migrate to patternfly tokens + // const { theme } = useTheme(); const { data: session, status } = useSession(); const [isExperimentalEnabled, setExperimental] = useState(false); @@ -112,18 +111,20 @@ const AppLayout: React.FunctionComponent = ({ children }) => { const Header = ( - - - - - - - + + + + + + + + + - - InstructLab - + + InstructLab + @@ -150,7 +151,9 @@ const AppLayout: React.FunctionComponent = ({ children }) => { ); const Navigation = ( -
diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx index f93c22af..737f92fb 100644 --- a/src/components/Contribute/Skill/index.tsx +++ b/src/components/Contribute/Skill/index.tsx @@ -1,6 +1,6 @@ // src/components/Contribute/Skill/index.tsx 'use client'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import './skills.css'; import { Alert, AlertActionCloseButton } from '@patternfly/react-core/dist/dynamic/components/Alert'; import { ActionGroup } from '@patternfly/react-core/dist/dynamic/components/Form'; @@ -17,7 +17,7 @@ import { BreadcrumbItem } from '@patternfly/react-core/dist/dynamic/components/B import { PageBreadcrumb } from '@patternfly/react-core/dist/dynamic/components/Page'; import { PageGroup } from '@patternfly/react-core/dist/dynamic/components/Page'; import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'; -import { TextContent } from '@patternfly/react-core/dist/dynamic/components/Text'; +import { Content } from '@patternfly/react-core/dist/dynamic/components/Content'; import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'; import { checkSkillFormCompletion } from './validation'; import { ValidatedOptions } from '@patternfly/react-core/dist/esm/helpers/constants'; @@ -146,17 +146,18 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo } }, [session?.user]); - useMemo(() => { + useEffect(() => { const fetchUsername = async () => { if (session?.accessToken) { try { - const header = { + const headers = { 'Content-Type': 'application/json', Authorization: `Bearer ${session.accessToken}`, Accept: 'application/vnd.github+json', 'X-GitHub-Api-Version': '2022-11-28' }; - const fetchedUsername = await getGitHubUsername(header); + + const fetchedUsername = await getGitHubUsername(headers); setGithubUsername(fetchedUsername); } catch (error) { console.error('Failed to fetch GitHub username:', error); @@ -351,20 +352,20 @@ export const SkillForm: React.FunctionComponent = ({ skillEditFo return ( - + Dashboard Skill Contribution - + Skill Contribution - + - + {deploymentType === 'dev' && ( - ); + return