feat: messages

[ghost]

Description of change

built Messages page

Issue Number

closes #173

Type of change

• New (a change which implements a new feature)

How the change has been tested

CI and Manual

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

Summary by CodeRabbit

• New Features

  • Introduced a new chat message component with customizable appearance for outgoing and incoming messages.
  • Added a dedicated chat page displaying message threads with a sticky input bar for sending messages.
  • Implemented a search input on the messages page for filtering conversations.

• Enhancements

  • Updated header to support additional options and improved route-based customization.
  • Improved message and chat UI alignment and visual consistency, including refined text alignment and hover behavior.
  • Refined message input for a streamlined image attachment and sending experience.

• Bug Fixes

  • Corrected icon naming and usage for improved consistency across the app.

• Documentation

  • Added Storybook stories for the new chat message component to demonstrate its different states.

[coderabbitai]

Walkthrough

This update introduces a new chat message UI component (ChatMessage), integrates it into the messages page and individual message threads, and refines the layout and header logic for the protected routes. It also updates icon imports/exports and enhances the message input and message display components for improved alignment and interactivity.

Changes

File(s)	Change Summary
.../lib/fragments/ChatMessage/ChatMessage.svelte, .../ChatMessage/ChatMessage.stories.ts	New ChatMessage component and Storybook stories added.
.../lib/fragments/index.ts	Export of ChatMessage component added.
.../lib/fragments/Message/Message.svelte	Removed hover background class from button; added text-start alignment to message text.
.../lib/fragments/Header/Header.svelte	Added options prop; renders ActionMenu for secondary variant with options; added w-full class.
.../lib/fragments/MessageInput/MessageInput.svelte	Simplified image input logic; always renders send button; removed alternate icon.
.../lib/icons/CommentIcon.svelte, .../icons/Icons.svelte, .../icons/index.ts	Corrected import path for ISvgProps; replaced Comment with CommentIcon in usage and exports.
.../routes/(protected)/+layout.svelte	Refined sidebar import, header logic, route-to-heading mapping, and conditional bottom nav rendering.
.../routes/(protected)/messages/+page.svelte	Added search input, renders message list with unread/read states, and navigation callbacks.
.../routes/(protected)/messages/[id]/+page.svelte	New page for chat by user ID; renders sequence of chat messages and sticky message input.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MessagesPage
    participant ChatMessage
    participant MessageInput

    User->>MessagesPage: Loads messages page
    MessagesPage->>ChatMessage: Render list of messages
    User->>MessagesPage: Clicks on a message
    MessagesPage->>MessagesPage: Navigate to /messages/[id]
    User->>MessageInput: Types and sends message
    MessageInput->>MessagesPage: handleSend (async)
    MessagesPage->>ChatMessage: Add new message to thread

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Implement Messages Page and message by userID (#173)	✅
Ensure responsive design for messages UI (#173)	✅

Assessment against linked issues: Out-of-scope changes

No out-of-scope changes found.

Possibly related PRs

• feat: message-input #144: Introduces the initial MessageInput.svelte component and stories, which this PR builds upon with further UI simplification.
• Feat/metagram header #133: Implements the initial Header component, which is extended here to include options and conditional rendering.

Suggested reviewers

• coodos
• sosweetham

Poem

In the meadow of code where messages flow,
A chat bubble blooms with a warm orange glow.
New icons align, and headers now gleam,
Input fields ready for typing a dream.
With rabbits and friends, let conversations start—
This patch brings us closer, message by heart!
🐇💬✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0de52f8 and b913a12.

📒 Files selected for processing (1)

• platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (2)

platforms/metagram/src/lib/fragments/index.ts (1)

11-11: Remove trailing whitespace.

There's unnecessary trailing whitespace at the end of this line, which creates inconsistency with other export statements in the file.

-export { default as Post } from './Post/Post.svelte'; 
+export { default as Post } from './Post/Post.svelte';

platforms/metagram/src/routes/(protected)/messages/+page.svelte (1)

1-17: Add proper data fetching and error handling.

The component lacks proper data fetching, loading states, and error handling typical for a messages page.

Consider implementing:

• Data fetching from API/store
• Loading states while fetching messages
• Error handling for failed requests
• Empty state when no messages exist
• Pagination for large message lists

Would you like me to help generate a more complete implementation with proper data management?

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 36f772a and ff3ce93.

📒 Files selected for processing (4)

• platforms/metagram/src/lib/fragments/Message/Message.svelte (1 hunks)
• platforms/metagram/src/lib/fragments/index.ts (1 hunks)
• platforms/metagram/src/routes/(protected)/+layout.svelte (1 hunks)
• platforms/metagram/src/routes/(protected)/messages/+page.svelte (1 hunks)

🔇 Additional comments (1)

platforms/metagram/src/routes/(protected)/+layout.svelte (1)

26-26: Good implementation of scrollable layout.

The addition of h-[100dvh] overflow-y-scroll hide-scrollbar creates an appropriate full-height scrollable container. Using dvh (dynamic viewport height) is excellent for mobile compatibility, and hiding the scrollbar maintains a clean UI.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (8)

platforms/metagram/src/lib/fragments/Header/Header.svelte (1)

17-17: Consider using a more descriptive interface for options.

While the inline type definition works, consider extracting this to a dedicated interface for better maintainability and reusability.

+interface IHeaderOption {
+  name: string;
+  handler: () => void;
+}
+
interface IHeaderProps extends HTMLAttributes<HTMLElement> {
  variant: 'primary' | 'secondary' | 'tertiary';
  heading?: string;
  callback?: () => void;
-  options?: {name: string, handler: () => void}[];
+  options?: IHeaderOption[];
}

platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte (2)

50-57: Consider adding error handling for file input operations.

While the button logic is simplified and clear, consider adding error handling for file operations and validation.

		<button
				type="button"
				class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
				aria-label="add-image"
-				onclick={() => fileInput?.click()}
+				onclick={() => {
+					try {
+						fileInput?.click();
+					} catch (error) {
+						console.error('Failed to open file dialog:', error);
+					}
+				}}
		>

---

42-49: Consider adding file validation.

The file input accepts any image type but lacks validation for file size, format restrictions, or error handling for invalid files.

		<input
		id="add-image"
		type="file"
		class="hidden"
		accept="image/*"
		bind:files
		bind:this={fileInput}
+		onchange={(e) => {
+			const file = e.target?.files?.[0];
+			if (file && file.size > 5 * 1024 * 1024) { // 5MB limit
+				alert('File size must be less than 5MB');
+				e.target.value = '';
+				files = undefined;
+			}
+		}}
	/>

platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte (5)

26-31: Consider extracting complex conditional class logic.

The inline conditional styling in the cn() function could benefit from being extracted for better readability and maintainability.

+	const containerClasses = $derived(() => {
+		const baseClasses = 'flex items-start gap-2';
+		const directionClass = transactionType === 'incoming' ? 'flex-row-reverse' : 'flex';
+		return `${baseClasses} ${directionClass}`;
+	});

<div
	{...restProps}
	class={cn(
-		[
-			`flex items-start gap-2 ${transactionType === 'incoming' ? 'flex-row-reverse' : 'flex'}`,
-			restProps.class
-		].join(' ')
+		[containerClasses, restProps.class].join(' ')
	)}
>

---

39-44: Extract message bubble styling logic for better maintainability.

The complex conditional styling for the message bubble could be extracted into a derived value for better readability.

+	const messageBubbleClasses = $derived(() => {
+		const baseClasses = 'relative rounded-3xl px-4 py-2';
+		const bgClass = transactionType === 'incoming' ? 'bg-brand-burnt-orange' : 'bg-grey';
+		return `${baseClasses} ${bgClass}`;
+	});

		<div
			class={cn(
-				`relative rounded-3xl px-4 py-2 ${transactionType === 'incoming' ? 'bg-brand-burnt-orange' : 'bg-grey'}`
+				messageBubbleClasses
			)}
		>

---

46-60: Consider extracting SVG tail as a separate component.

The inline SVG with complex conditional positioning could be extracted into a reusable component for better maintainability and testing.

Create a separate ChatMessageTail.svelte component:

<script lang="ts">
	interface Props {
		transactionType: 'incoming' | 'outgoing';
	}
	
	let { transactionType }: Props = $props();
	
	const positionClass = transactionType === 'outgoing' 
		? 'start-[-8px] top-[-2px]' 
		: 'end-[-8px] top-[2px]';
	
	const fillColor = transactionType === 'outgoing'
		? '#F5F5F5'
		: 'var(--color-brand-burnt-orange)';
</script>

<svg
	class={`absolute ${positionClass}`}
	width="22"
	height="17"
	viewBox="0 0 22 17"
	fill="none"
	xmlns="http://www.w3.org/2000/svg"
>
	<path
		d="M0 0C5.79116 4.95613 8.40437 9.60298 10 17L22 2C11 2.5 7.53377 0.634763 0 0Z"
		fill={fillColor}
	/>
</svg>

Then use it in the main component:

			{#if isHeadNeeded}
-				<svg>...</svg>
+				<ChatMessageTail {transactionType} />
			{/if}

---

39-39: Consider responsive design for message width constraint.

The fixed max-w-[50%] constraint may not work well on very small mobile screens.

-	<div class={cn(`max-w-[50%] ${isHeadNeeded ? 'mt-4' : 'mt-0'}`)}>
+	<div class={cn(`max-w-[90%] sm:max-w-[70%] md:max-w-[50%] ${isHeadNeeded ? 'mt-4' : 'mt-0'}`)}>

---

63-65: Add accessibility improvements for screen readers.

Consider adding ARIA labels or semantic markup to improve accessibility for screen reader users.

-			<p class={cn(`${transactionType === 'incoming' ? 'text-white' : 'text-black-600'}`)}>
+			<p 
+				class={cn(`${transactionType === 'incoming' ? 'text-white' : 'text-black-600'}`)}
+				role="text"
+				aria-label={`${transactionType === 'incoming' ? 'Received' : 'Sent'} message`}
+			>
				{message}
			</p>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ff3ce93 and f19342c.

📒 Files selected for processing (13)

• platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.stories.ts (1 hunks)
• platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte (1 hunks)
• platforms/metagram/src/lib/fragments/Header/Header.svelte (3 hunks)
• platforms/metagram/src/lib/fragments/Message/Message.svelte (2 hunks)
• platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte (2 hunks)
• platforms/metagram/src/lib/fragments/index.ts (1 hunks)
• platforms/metagram/src/lib/icons/CommentIcon.svelte (1 hunks)
• platforms/metagram/src/lib/icons/Icons.svelte (1 hunks)
• platforms/metagram/src/lib/icons/index.ts (1 hunks)
• platforms/metagram/src/lib/store/store.svelte.ts (1 hunks)
• platforms/metagram/src/routes/(protected)/+layout.svelte (6 hunks)
• platforms/metagram/src/routes/(protected)/messages/+page.svelte (1 hunks)
• platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte (1 hunks)

✅ Files skipped from review due to trivial changes (6)

• platforms/metagram/src/lib/icons/index.ts
• platforms/metagram/src/lib/icons/CommentIcon.svelte
• platforms/metagram/src/lib/fragments/Message/Message.svelte
• platforms/metagram/src/lib/store/store.svelte.ts
• platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.stories.ts
• platforms/metagram/src/lib/icons/Icons.svelte

🚧 Files skipped from review as they are similar to previous changes (3)

• platforms/metagram/src/routes/(protected)/messages/+page.svelte
• platforms/metagram/src/lib/fragments/index.ts
• platforms/metagram/src/routes/(protected)/+layout.svelte

🔇 Additional comments (6)

platforms/metagram/src/lib/fragments/Header/Header.svelte (4)

11-11: LGTM! Proper import addition.

The ActionMenu component import is correctly added and will be used in the conditional rendering logic below.

---

20-20: LGTM! Proper props destructuring.

The options prop is correctly added to the destructuring assignment, maintaining consistency with the existing pattern.

---

50-50: LGTM! Appropriate CSS class addition.

Adding w-full ensures the header spans the full width, which is appropriate for a header component and aligns with typical header behavior.

---

91-93: LGTM! Well-implemented conditional rendering logic.

The conditional rendering correctly:

• Uses else if to ensure mutual exclusivity between callback button and ActionMenu
• Only renders ActionMenu for secondary variant when options are provided
• Properly passes the options prop to the ActionMenu component

This implementation maintains backward compatibility while adding the new functionality.

platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte (1)

42-49: Good simplification of file input logic.

The refactoring to always render the hidden file input (except for comment variant) simplifies the component logic and makes the file handling more predictable.

platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte (1)

6-22: Well-structured component interface with good TypeScript support.

The interface definition and props destructuring follow Svelte 5 best practices with proper type safety and bindable props.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte (1)

24-73: Consider adding semantic HTML structure for better accessibility.

The component could benefit from semantic HTML and ARIA attributes to improve accessibility for screen readers.

Consider wrapping the message in a more semantic structure:

 <div
 	{...restProps}
-	class={cn(
-		[`flex items-start gap-2 ${isOwn ? 'flex-row-reverse' : 'flex-row'}`, restProps.class].join(' ')
-	)}
+	class={cn(
+		[`flex items-start gap-2 ${isOwn ? 'flex-row-reverse' : 'flex-row'}`, restProps.class].join(' ')
+	)}
+	role="group"
+	aria-label={`Message from ${isOwn ? 'you' : 'contact'} at ${time}`}
 >

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c601232 and 3d77da0.

📒 Files selected for processing (7)

• platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.stories.ts (1 hunks)
• platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte (1 hunks)
• platforms/metagram/src/lib/fragments/Header/Header.svelte (3 hunks)
• platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte (2 hunks)
• platforms/metagram/src/routes/(protected)/+layout.svelte (5 hunks)
• platforms/metagram/src/routes/(protected)/messages/+page.svelte (1 hunks)
• platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (6)

• platforms/metagram/src/routes/(protected)/messages/+page.svelte
• platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.stories.ts
• platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte
• platforms/metagram/src/routes/(protected)/+layout.svelte
• platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
• platforms/metagram/src/lib/fragments/Header/Header.svelte

🔇 Additional comments (3)

platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte (3)

1-5: LGTM!

Clean imports with appropriate TypeScript support and utility functions.

---

6-12: LGTM!

Well-structured interface with appropriate types and good use of optional properties for flexibility.

---

43-55: Verify SVG tail positioning logic.

The SVG tail positioning uses complex conditional classes that should be verified to ensure correct visual alignment with the message bubbles.

Please test the component visually to ensure the SVG tails are properly positioned for both own and incoming messages, particularly:

• The start-[-5px] top-[-2px] positioning for own messages
• The end-[-5px] top-[2px] positioning for incoming messages