FrontEndRebuild #49

iLevyTate · 2025-01-02T22:13:04Z

Rebuilt frontend with tests.

- Created tests for the Chat API to validate request handling, including valid and invalid agent types, and missing fields. - Added tests for the AgentResponse component to ensure correct rendering and interaction. - Implemented tests for the ChatInterfaceClient component, covering rendering, input handling, message submission, and error states. - Developed tests for the LoadingSpinner and MessageActions components to verify rendering and functionality. - Added tests for the useChatScroll and useMediaQuery hooks to ensure correct behavior under various conditions.

- Introduced a new global CSS file for consistent styling across the application. - Updated the ChatInterface component to use the new ChatInterfaceClient for improved performance. - Added a loading state for chat interactions to enhance user experience. - Created a dedicated error handling component for chat errors. - Implemented a new layout for the chat page, including metadata for better SEO. - Added a loading component for the chat interface. - Established a new API route for handling chat requests with rate limiting and input sanitization. - Updated the account and login pages for better user interaction and visual consistency. - Enhanced the About and Home pages to reflect the new branding and messaging for SCANUEV.

- Introduced new Avatar, Button, ContextMenu, DropdownMenu, GlassCard, GradientButton, Input, Label, LoadingDots, Skeleton, Tooltip, and WavyBackground components. - Each component is designed with customizable properties and styles for improved flexibility and usability. - Implemented forward refs for better integration with parent components. - Utilized utility functions for class name management to ensure consistent styling across components.

- Deleted several chart components (AgentBarChart, AgentForceGraph, AgentHeatmap, AgentPolarChart, AgentRadarChart, AgentResponseVisualization, and NetworkGraph) to streamline the codebase. - Introduced new components including BotAvatar, ChatContainer, ChatMessage, LoadingSpinner, and ScrollToTop for enhanced chat functionality. - Updated the ChatInterfaceClient to improve user experience with better message handling and loading states. - Implemented a new error boundary component for robust error handling in the chat interface. - Enhanced navigation and page transition animations for a smoother user experience.

- Introduced new Cypress test files for the chat interface and navigation, covering key functionalities such as message sending, agent type switching, and feedback submission. - Implemented tests for page navigation, including checks for 404 error handling and smooth scrolling behavior. - Added custom commands for user login in the Cypress support file. - Included video recordings and screenshots for failed test cases to aid in debugging.

- Introduced `useChatScroll` hook to manage automatic scrolling in chat interfaces based on message updates. - Added `useChatShortcuts` hook to handle keyboard shortcuts for search and input focus within chat. - Created `useMediaQuery` hook to determine if a media query matches, enhancing responsive design capabilities. - Implemented `useScrollDirection` hook to track scroll direction, aiding in UI adjustments based on user scrolling behavior. - Added unit tests for `useMediaQuery` to ensure correct functionality under various conditions.

- Introduced `formatTime` utility function to format Date objects into a string representation of hours and minutes. - Added new TypeScript interfaces for chat messages, loading spinner properties, and media query configurations. - Defined custom types for agent types and media queries to enhance type safety and clarity in the codebase. - Included type definitions for lodash debounce functionality and Radix UI components to improve integration and usability.

- Removed unused files including .gitignore, .prettierignore, and .prettierrc to streamline the project. - Deleted the ChatInterface component and replaced it with a new structure for improved performance and user experience. - Introduced a new components.json file for better component management and organization. - Added Cypress configuration for end-to-end testing and established a new Jest configuration for unit testing. - Updated Dockerfile to use a more recent Node.js version and simplified the build process. - Created a new README.md file to provide project overview and installation instructions. - Enhanced package.json with updated dependencies and scripts for testing and development. - Implemented a new Tailwind CSS configuration for improved styling capabilities.

for more information, see https://pre-commit.ci

sanders41

I was getting lots of lint, format and build errors. Part of the problem was an old version of next with known issues was being used. I got that updated and fixed the linting and formatting errors, but there are still build errors.

I haven't had time to figure out why the build fails.

sanders41 · 2025-01-03T19:38:10Z

As far as I can tell so far the build errors all seem to be coming from import { cn } from "@/lib/utils"; which is imported in a bunch of files, but it doesn't exist. I'm not sure what cn is supposed to be/do so I can't create it.

…d PageTransition components - Updated BotAvatar component to simplify SVG structure and improve clarity. - Refactored ChatMessage component to import formatMessageTime from a new date-utils file for better organization. - Introduced LoadingProvider component for managing loading states with context and animations. - Added PageTransition component to enhance page transition animations and improve user experience. - Created index.ts file to streamline component exports. - Adjusted import paths in various UI components for consistency.

- Created package-lock.json to manage project dependencies. - Added jsconfig.json for improved JavaScript project configuration. - Updated next.config.js to enable React strict mode and configure Webpack aliases. - Modified tsconfig.json to adjust module resolution and include base URL for path mapping. - Refactored layout.tsx to integrate LoadingProvider for better loading state management. - Introduced loading.tsx components for account and chat interfaces, utilizing Skeleton for loading indicators.

…into FrontEndRebuild

for more information, see https://pre-commit.ci

…ding states - Introduced new `page.tsx` for login with a simple message. - Added `ChatInterfaceClient.tsx` as a placeholder for chat interface logic. - Created `input.tsx` and `skeleton.tsx` components for UI consistency. - Updated `Dockerfile` to use Node 18 and streamline dependency installation. - Refactored `eslint.config.mjs` and `next.config.js` for improved module imports. - Modified `package.json` to update project name and dependencies. - Enhanced loading states in `loading.tsx` for chat and account interfaces. - Removed unused `LoadingProvider` and `index.ts` files to clean up the codebase. - Adjusted various components for consistency in code style and structure.

for more information, see https://pre-commit.ci

…istency - Reformatted the .pre-commit-config.yaml file for better readability. - Ensured consistent indentation for hook definitions across all repositories. - Updated hooks for mypy and ruff to maintain alignment with project standards.

…into FrontEndRebuild

for more information, see https://pre-commit.ci

- Updated import statements in `gradient-button.tsx`, `input.tsx`, and `wavy-background.tsx` to utilize absolute paths for better maintainability and consistency across the codebase.

…into FrontEndRebuild

sanders41

When I run the tests they fail, are they expected to pass?

npm run tests

Test Suites: 9 failed, 3 passed, 12 total
Tests:       16 failed, 16 passed, 32 total

npm run cypress:run

Your configFile is invalid: /home/paul/development/python/scanue-v/frontend/cypress.config.js

It threw an error when required, check the stack trace below:

TSError: ⨯ Unable to compile TypeScript:
error TS5095: Option 'bundler' can only be used when 'module' is set to 'preserve' or to 'es2015' or later.

    at createTSError (/home/paul/.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/ts-node/dist/index.js:311:16)
    at reportTSError (/home/paul/.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/ts-node/dist/index.js:314:23)
    at /home/paul/.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/ts-node/dist/index.js:686:17
    at Object.compile (/home/paul/.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/ts-node/dist/index.js:743:35)
    at Module.m._compile (/home/paul/.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/ts-node/dist/index.js:856:36)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Object.require.extensions.<computed> [as .js] (/home/paul/.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/ts-node/dist/index.js:859:16)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at loadFile (/home/paul/.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:89:14)
    at EventEmitter.<anonymous> (/home/paul/.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:116:38)
    at EventEmitter.emit (node:events:518:28)
    at EventEmitter.emit (node:domain:489:12)
    at process.<anonymous> (/home/paul/.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:22)

When I try the chat it errors, is this expected?

On the login screen, any time you type the screen flashes. It also doesn't send anything to the backend, I assume that hasn't been setup yet?

sanders41 · 2025-01-07T02:05:05Z

components/ui/input.tsx

If this file is empty is it needed?

sanders41 · 2025-01-07T02:05:35Z

components/ui/skeleton.tsx

If this file is empty is it needed?

iLevyTate · 2025-01-09T19:32:53Z

Closing Pull Request to re-approach with smaller, incremental changes instead of bulk updates.

iLevyTate added 8 commits January 2, 2025 17:06

iLevyTate requested a review from sanders41 January 2, 2025 22:13

pre-commit-ci bot and others added 6 commits January 2, 2025 22:13

[pre-commit.ci] auto fixes from pre-commit.com hooks

1341d17

for more information, see https://pre-commit.ci

Update Dockerfile

e037310

Run prettier

e302c2c

Fix lint errors

982ecde

Enable build check in CI

5401674

Move build to it's own step

2672d78

sanders41 reviewed Jan 3, 2025

View reviewed changes

iLevyTate and others added 13 commits January 4, 2025 22:43

Remove unused formatTime utility function to streamline codebase

b0e173a

Merge branch 'FrontEndRebuild' of https://github.com/xyvora/SCANUE-V …

6273f9d

…into FrontEndRebuild

[pre-commit.ci] auto fixes from pre-commit.com hooks

74003a9

for more information, see https://pre-commit.ci

[pre-commit.ci] auto fixes from pre-commit.com hooks

0be87d1

for more information, see https://pre-commit.ci

Merge branch 'FrontEndRebuild' of https://github.com/xyvora/SCANUE-V …

527ce63

…into FrontEndRebuild

[pre-commit.ci] auto fixes from pre-commit.com hooks

361af62

for more information, see https://pre-commit.ci

Refactor import paths in UI components to use absolute paths

8396eac

- Updated import statements in `gradient-button.tsx`, `input.tsx`, and `wavy-background.tsx` to utilize absolute paths for better maintainability and consistency across the codebase.

Merge branch 'FrontEndRebuild' of https://github.com/xyvora/SCANUE-V …

5c0f0d2

…into FrontEndRebuild

Fix dockerfile

59888e7

sanders41 and others added 8 commits January 5, 2025 09:51

Add .env back to .dockerignore

4f98b7a

Remove extra package-lock.json

78d53e0

Add frontend/lib directory with utils and other utility files

b3d0b26

Merge remote-tracking branch 'origin/FrontEndRebuild'

6ff7999

Update next-env.d.ts and package-lock.json

27a693b

Update .gitignore to explicitly allow frontend/lib directory

bdb3aee

Update .gitignore to explicitly allow frontend/lib directory

f7a3899

Fix package name

90ac03b

sanders41 reviewed Jan 7, 2025

View reviewed changes

Add frontend and end to end tests to CI

72e7ef0

iLevyTate closed this Jan 9, 2025

iLevyTate deleted the FrontEndRebuild branch January 16, 2025 02:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FrontEndRebuild #49

FrontEndRebuild #49

iLevyTate commented Jan 2, 2025

sanders41 left a comment

sanders41 commented Jan 3, 2025

sanders41 left a comment

sanders41 Jan 7, 2025

sanders41 Jan 7, 2025

iLevyTate commented Jan 9, 2025

FrontEndRebuild #49

FrontEndRebuild #49

Conversation

iLevyTate commented Jan 2, 2025

sanders41 left a comment

Choose a reason for hiding this comment

sanders41 commented Jan 3, 2025

sanders41 left a comment

Choose a reason for hiding this comment

sanders41 Jan 7, 2025

Choose a reason for hiding this comment

sanders41 Jan 7, 2025

Choose a reason for hiding this comment

iLevyTate commented Jan 9, 2025