fix(notification): information now displayed on the right

[StanGirard]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Checklist before requesting a review

Please delete options that are not relevant.

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented hard-to-understand areas
• I have ideally added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged

Screenshots (if appropriate):

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
docs	🔄 Building (Inspect)	Visit Preview	Sep 17, 2023 10:24pm
quivrapp	🔄 Building (Inspect)	Visit Preview	Sep 17, 2023 10:24pm

[github-actions]

Risk Level 2 - /home/runner/work/quivr/quivr/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/ChatNotification/components/NotificationDisplayer/NotificationDisplayer.tsx

The code changes seem to be mostly about styling and layout, which is generally low risk. However, there are a few points to consider:

1. Parsing JSON: The code is parsing JSON using JSON.parse(nonParsedMessage.replace(/'/g, '\"')). This could potentially throw an error if nonParsedMessage is not a valid JSON string. It would be safer to wrap this in a try-catch block to handle any potential errors.

let parsedMessage: NotificationMessage;
try {
  parsedMessage = JSON.parse(nonParsedMessage.replace(/'/g, '\"')) as NotificationMessage;
} catch (error) {
  console.error('Error parsing message:', error);
  return <Fragment />;
}

2. Hover state: The hover state is being managed with a local state variable isHovered. This is fine for simple cases, but if the hover behavior becomes more complex, consider using a dedicated hover state management library or CSS :hover pseudo-class.

3. Inline styles: There are inline styles used in the hover div. It's generally better to use classes for styling to keep the styling separate from the logic and to take advantage of CSS performance optimizations.

<div className=\"absolute bg-white p-2 rounded-sm border border-gray-100 shadow-sm transition-transform transform translate-y-1 translate-x-1/4 z-10 hover-div\">

---

📑🐞🎨

---

Powered by Code Review GPT