feat: message-input

[ghost]

Description of change

Built message input

Issue Number

Closes #142

Type of change

• New (a change which implements a new feature)
• Update (a change which updates existing functionality)

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

Summary by CodeRabbit

• New Features
  • Introduced a new message input component supporting comment and direct message variants with avatar display, text input, and image attachment options.
  • Added Storybook examples demonstrating the message input component's different usage scenarios.
• Improvements
  • Made input field properties like placeholder and validation flags optional for more flexible usage.
  • Updated input field stories to better reflect valid, invalid, and password states with clearer placeholders and values.

[coderabbitai]

## Walkthrough

A new `MessageInput` Svelte component was added, along with its Storybook story and export in the fragments index. The component implements a message input UI with avatar, text input, send button, and an image upload or add button depending on the variant. Additionally, the input component's prop types were updated to make several props optional.

## Changes

| File(s)                                                                                  | Change Summary                                                                                                 |
|-----------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------|
| platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte                   | Added new `MessageInput` Svelte component with avatar, text input, send button, and image upload/add functionality.            |
| platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts               | Added Storybook story for `MessageInput` with default export and two named stories (`Comment` and `Dm`).      |
| platforms/metagram/src/lib/fragments/index.ts                                           | Exported `MessageInput` from fragments index.                                                                 |
| platforms/metagram/src/lib/ui/Input/Input.svelte                                        | Made several props (`placeholder`, `isRequired`, `isDisabled`, `isError`) in `IInputProps` optional.          |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant MessageInput (Component)
    participant FileInput (Hidden)
    participant Avatar
    participant Input

    User->>MessageInput (Component): View UI
    MessageInput (Component)->>Avatar: Render avatar or add button
    MessageInput (Component)->>Input: Render text input
    User->>Input: Type message
    User->>MessageInput (Component): Click image upload or add button
    MessageInput (Component)->>FileInput (Hidden): Trigger file picker (if applicable)
    User->>FileInput (Hidden): Select image(s)
    FileInput (Hidden)->>MessageInput (Component): Update files state
    User->>MessageInput (Component): Click send button
    MessageInput (Component)->>handleSend: Invoke send callback

Assessment against linked issues

Objective	Addressed	Explanation
Implement Message Input fragment as per design (#142)	✅
Gallery/file picker opens on right icon click (#142)	✅

Poem

A message box, so neat and bright,
With avatar smiling, ready to type.
Click the icon, images appear—
Upload your memories, bring them near!
The rabbit hops, its code now done,
MessageInput’s here—let’s have some fun!
🐇💬✨

<!-- walkthrough_end -->

<!-- announcements_start -->

> [!NOTE]
> <details>
> <summary>⚡️ AI Code Reviews for VS Code, Cursor, Windsurf</summary>
> 
> CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
> Learn more [here](http://coderabbit.ai/ide).
> 
> </details>

---

> [!NOTE]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
> 
> CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> Enjoy the performance boost—your workflow just got faster.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between a741e7819d230dbf0f597842938d0eb5b7db018f and 9c46831ededdf7cefa7bf5ed932516218c4e1fc8.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `.vscode/extensions.json` (1 hunks)
* `platforms/metagram/src/lib/ui/Input/Input.stories.ts` (1 hunks)
* `platforms/metagram/src/lib/ui/Input/Input.svelte` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (1)</summary>

* .vscode/extensions.json

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* platforms/metagram/src/lib/ui/Input/Input.svelte
* platforms/metagram/src/lib/ui/Input/Input.stories.ts

</details>

</details>
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

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.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=MetaState-Prototype-Project/prototype&utm_content=144):

- 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](https://www.coderabbit.ai/contact-us/support) 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](https://docs.coderabbit.ai/finishing-touches/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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts (1)

1-16: Story setup looks good, but consider adding more examples.

The Storybook story is correctly configured with autodocs for automatic documentation generation. However, consider adding more story variants with different props (e.g., with placeholder text, different avatar) to showcase component flexibility.

 export const Primary = {
 	args: {}
 };
+
+export const WithPlaceholder = {
+	args: {
+		placeholder: "Enter your message here..."
+	}
+};
+
+export const WithCustomAvatar = {
+	args: {
+		src: "https://example.com/custom-avatar.jpg"
+	}
+};

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

7-11: Consider adding an onFileSelect callback prop.

The component currently logs file changes internally, but doesn't provide a way for parent components to respond to file selection. Adding a callback would improve component flexibility.

 interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
 	src: string;
 	value: string;
 	placeholder?: string;
+	onFileSelect?: (files: FileList) => void;
 }

Then update the effect:

 $effect(() => {
-	console.log(files);
+	if (files && onFileSelect) {
+		onFileSelect(files);
+	}
 });

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between a9e703d and 85f959d.

📒 Files selected for processing (4)

• platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts (1 hunks)
• platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte (1 hunks)
• platforms/metagram/src/lib/fragments/index.ts (1 hunks)
• platforms/metagram/src/lib/ui/Input/Input.svelte (1 hunks)

🔇 Additional comments (2)

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

2-2: Export looks good, appropriately integrates the new component.

The export of the MessageInput component follows the same pattern as other fragments, making it available for use throughout the application.

platforms/metagram/src/lib/ui/Input/Input.svelte (1)

8-11: Appropriate changes to make input props optional.

Making these props optional improves the component's flexibility while maintaining backward compatibility. This allows components like MessageInput to use Input with fewer required parameters.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (4)

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

8-16: Props interface is well-defined

The interface for component props is clear and properly typed. Good job making placeholder and handleAdd optional while requiring essential props like handleSend.

One suggestion for improvement: consider making the src prop optional too since you're providing a default value.

interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
    variant: 'comment' | 'dm';
-   src: string;
+   src?: string;
    value: string;
    placeholder?: string;
    files?: FileList | undefined;
    handleAdd?: () => void;
    handleSend: () => Promise<void>;
}

---

20-20: Consider changing default avatar to a local asset

Using a specific Gravatar URL as the default avatar might not be suitable for all applications and creates an external dependency. Consider using a local placeholder image instead.

- src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+ src = '/assets/default-avatar.png',

---

56-61: Add feedback for file selection

The file input doesn't provide any user feedback when files are selected. Consider adding visual feedback to improve the user experience.

<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
-   <input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
+   <input 
+     id="add-image" 
+     type="file" 
+     class="hidden" 
+     accept="image/*" 
+     bind:files 
+     on:change={() => {
+       if (files && files.length > 0) {
+         // Show some indication that files were selected
+         // For example, you could update UI state or show a toast
+       }
+     }}
+   />
    <label for="add-image">
        <HugeiconsIcon size="24px" icon={ImageAdd02Icon} color="var(--color-black-400)" />
    </label>
</div>

---

15-15: Add loading state for async send operation

The handleSend function is typed as returning a Promise, but there's no loading state or error handling in the component. Consider adding loading state to provide better user feedback during async operations.

interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
    variant: 'comment' | 'dm';
    src: string;
    value: string;
    placeholder?: string;
    files?: FileList | undefined;
    handleAdd?: () => void;
    handleSend: () => Promise<void>;
}

let {
    variant = 'comment',
    src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
    value,
    placeholder,
    files = $bindable(),
    handleAdd,
    handleSend,
    ...restProps
}: IMessageInputProps = $props();

+let isLoading = false;
+
+async function handleSubmit() {
+  try {
+    isLoading = true;
+    await handleSend();
+  } catch (error) {
+    console.error('Error sending message:', error);
+    // Handle error state if needed
+  } finally {
+    isLoading = false;
+  }
+}

Then update the send button:

- onclick={handleSend}
+ onclick={handleSubmit}
+ disabled={isLoading}

And consider adding a loading indicator when isLoading is true.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between 85f959d and 10152e5.

📒 Files selected for processing (2)

• platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts (1 hunks)
• platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte (1 hunks)

🔇 Additional comments (4)

platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts (3)

1-12: Well-structured Storybook configuration

The Storybook setup follows best practices with appropriate component imports, title hierarchy, and autodocs configuration. The render function is correctly typed and will allow for proper prop passing.

---

14-20: Good demonstration of 'comment' variant

This story effectively demonstrates the 'comment' variant with appropriate placeholder text and handler implementation. The use of an alert for demonstration purposes works well in the Storybook context.

---

22-29: Complete demonstration of 'dm' variant

The 'dm' variant story properly demonstrates both handleAdd and handleSend functionality, showing the component's full capabilities. This provides good documentation for other developers.

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

45-45: Input now properly uses the placeholder prop

The component now correctly uses the passed placeholder prop in the Input component, addressing a previous review comment.

[sosweetham]

do the coderabbit suggestions first

[JulienAuvo]

lgt;