nylas / components Goto Github PK

Describe the bug
Leveraging the Email component for any thread results in a huge whitespace between messages.

To Reproduce
Send emails back and forth through Outlook Web , open the thread in Nylas Email component. There will be jumbled text and large white spaces.

Expected behavior
It renders cleanly, without large whitespace and without affecting parent container CSS.

Version:
1.0.13

Additional context
See video below:

https://drive.google.com/file/d/12aGtAaeER9ZioCQ3cOEHwNdvmiIkBJdF/view?usp=sharing

Brand new to this repo / code and just trying to do the most basic setup based on the readme.

When running yarn storybook I get a long list of warnings and errors
I'm running a docker containers, tried node:14.0.0-buster and , node:14-buster (the latter comes with node v.14.18.1). I long list of warnings and errors in the output (see attached)

2021-11-23-error-output.txt

Not a node dev so I could totally be doing something wrong, but not sure what I should be looking for.

Is your feature request related to a problem? Please describe.
Currently there is no way to reply to an email thread via the mailbox component.

Describe the solution you'd like
The "Send a Message" API supports a reply_to and reply_to_message_id fields which can be used along with the compose component, to provide this reply to feature in the mailbox component.

In your description, you show a super nice looking full calendar view. The component although renders a a one-day view? How to set it as a full calendar?

I went through the list of available event listeners over here
https://developer.nylas.com/docs/user-experience/components/mailbox-component/#mailbox-event-listeners

But couldn't find a way to listen to back button press. Is there such option?

Is your feature request related to a problem? Please describe.
Currently email component does not support attachments. So when an email contains files as an attachment , it is simply ignored in the email component.

Describe the solution you'd like
The Nylas API response json contains the file related information, if the email contains an attachment. And there's another file API present. So we can use both of these to make the attachments downloadable, just like in any other provider client.

Describe the bug
Composer change event is not fired on empty text (for example, when I select all the text and delete it).

To Reproduce

1. Register a change handler on <nylas-composer> component, logging out all messages
2. When text is added or part of it deleted, the handler is correctly fire. However, if I delete all text, it's not fire.

(Please let me know if above is sufficient - I can provide a CodePen similar if necessary)

Expected behavior
Composer should fire change event when all text is deleted. I am uncertain if this event should also be fired with empty text during initialization.

Version:
1.1.6-canary.20in

Additional context
The issue seems to be in this line, because if (onchange) onchange(html) is only being run if html is not falsy.

Summary

Explain the difference between where we're at now and where we need to get to in a sentence or two.

Motivation

Talk about why this change makes sense, from your personal perspective.

Detailed Design

Explain the practical changes that might have to be made, and how the change would need to be supported. Give code examples, even if they're pseudocode.

Rendered

Drop any wireframes, back-of-the-napkin sketches, or renderings of what this change look like, if applicable.

Drawbacks

Are there any potential regressions? Is there anybody who might not benefit from this change?

Alternatives

If we don't opt to go with this change, how else might your initial problem / motivation be solved?

How do we teach this?

How can newcomers to Components learn that the above change exists, or is a best-practice?

Describe the bug
Since the Nylas components are built with Svelte and compiled to Web Components, it can't be assumed that they are always being rendered in a strictly browser environment. For example, even a SvelteKit app will need to process the component on the Server Side, even if SSR is set to false.

In my case, I'm using the Agenda component in a SvelteKit app, and when executing yarn build & yarn preview the following error is received:

> window is not defined
ReferenceError: window is not defined
    at C:\Users\ajcra\Desktop\piste-web\node_modules\@nylas\components-agenda\index.js:1:244
    at C:\Users\ajcra\Desktop\piste-web\node_modules\@nylas\components-agenda\index.js:1:85
    at Object.<anonymous> (C:\Users\ajcra\Desktop\piste-web\node_modules\@nylas\components-agenda\index.js:1:205)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
error Command failed with exit code 1.

After examining the Agenda, I suspect it's because of this reference to window:
https://github.com/nylas/components/blob/main/commons/src/define-component-patch.ts

To Reproduce
This repo demonstrates the issue:
https://github.com/AndrewCraswell/piste-web/tree/u/andcra/nylas-ssr-bug

yarn build
yarn preview

Expected behavior
The components should be able to be referenced in a non-browser environment and should avoid calling browser specific APIs if they are not available.

Version:
^1.0.14

Additional context
Add any other context about the problem here.

[Integration test issue]

I've been meaning to help contribute to Nylas Components -- could you please open source it so I can do so?

Is your feature request related to a problem? Please describe.
I need a fully-functional mailbox component (that is, actions like starring and read/unread will have an effect) with a display of only a specific list of threads.

Describe the solution you'd like
I have a list of Nylas threads and I just need to filter to those threads. I don't particularly care about the approach, but something like a "thread IDs" parameter that takes a list of thread IDs would be fantastic.

Describe alternatives you've considered
The current search capability lets you do advanced search, sure, but does not work with a list of IDs. Alternatively, I can pass in external data, but then I lose all functionality (read/unread, starring, etc).

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

On the nylas-mailbox demo, clicking the Refresh button only gives me a small indication that something is happening in the background.

Add a greyed-out or blurred state to the emails while a refresh is taking place. You'll probably need to add a conditional class to https://github.com/nylas/components/blob/main/components/mailbox/src/Mailbox.svelte#L740-L744 in Svelte, if refreshingMailbox is true.

Describe the bug
Our application leverages Modals to render email threads. When I open my first email thread Modal and render the nylas-email component, it works fine. If I then close that Modal, and open another Modal with another Thread ID, the entire page causes a crash on Chrome.

To Reproduce
Leverage the basic nylas-email component but within a Modal in React. Open one modal/thread, notice it works. Open another, notice page hang and then crash.

Expected behavior
Not to crash, but simply load the new thread.

Version:
1.0.13

Additional context
Add any other context about the problem here.

Describe the bug
We render email threads in our application as a "flyout" which is a few hundred pixel pane attached to the right side of our application. Sometimes, large email threads rendered in nylas-email seems to cause an overflow-x scroll.

https://drive.google.com/file/d/1Tv6JFXFkMPFuj8SF80F11HqTrF9hCDXn/view?usp=sharing

To Reproduce
Create a fixed container on the right hand side of the page, with a width of 512 px. View a large email thread (> 20 messages, large paragraph responses).

Expected behavior
We expect the nylas-email component to honor the parent container's width and text-wrap neatly within the container (including whatever margins paddings we specify).

Version:
1.0.14

Describe the bug

When clicking a draft in a thread, it takes multiple seconds until the draft is shown as selected and the draftClicked event is fired.

To Reproduce

Open a thread with a draft, then click the draft email. I tested only from the Mailbox component.

Expected behavior
User feedback on their click (draft is outlined) and the JS event is fired in a timely manner (an order of magnitude faster)

Version:
main

Is your feature request related to a problem? Please describe.

When using Nylas data without external data, each message is loaded on demand. But when using external data, the messages must all be loaded up front.

Describe the solution you'd like

A way to load message content on demand to reduce up-front loading times.

Describe alternatives you've considered

Loading all messages up front works, but requires fetching every single message that may be displayed, even though they're unlikely to.

[Integration test issue]

I've been meaning to help contribute to Nylas Components -- could you please open source it so I can do so?

Describe the bug
When leveraging the nylas-email component (with id, access_token and thread_id populated), I get the following error in my application from the component:

UserInputError: 8e761915-41fa-4f08-8549-72480b200d53
      Invalid request. Your component requires an `access_token` as X-Access-Token or as `access_token` on the request body

When looking at the Network console, I see a 422 error on the URL:

https://web-components.nylas.com/middleware/threads/1f0s6qeqxz8h0taq4yy77z6go?view=expanded

To Reproduce
Simply I am using the @nylas/components-email package, with the following code:

<nylas-email
      id="8e761915-41fa-4f08-8549-72480b200d53"
      access_token={viewer.nylasEmailAccessToken}
      thread_id={props.threadId}
    ></nylas-email>

I confirmed both the threadId and nylasEmailAccessToken are populated and valid (even hard coding them).

Expected behavior
It loads all the messages in my thread.

Version:
1.0.12

While making the request to get the threads, the query params from url are being added to the request query params. This results in failure of the request.
Attacehd the screenshot showing the error response.

Version
1.0.13

Describe the bug
When using the mailbox component with my own data (structured as threads), I am able to open threads but not individual messages. The last message which attempts to load and show by default gets stuck in an infinite loading state, and then I receive the following error message when I attempt to open another individual message in the thread:

Error 1: Last message stuck in infinite loading state
Error 2: Attempting to open any other message gives me the above error

To Reproduce
Mailbox settings gives access to all Nylas users, not individuals.

Component Loaded:

<nylas-mailbox id={emailId} access_token={accessToken}> </nylas-mailbox>

Data Loaded:

const mailbox = document.getElementsByTagName("nylas-mailbox")[0];
mailbox.all_threads = allThreads;

Threads (allThreads):
Retrieved from a get request to Nylas' API via https://api.nylas.com/threads/{threadId}?view=expanded

Expected behavior
Clicking on messages in threads should not error out or load infinitly.

Version:
1.1.5

Describe the bug
We currently embed nylas-mailbox within a container with a padding on HTML body of padding: 2rem;. When we open emails that have significantly large bodies, the mailbox component ignores the parent's width and simply renders what seems to be full screen width.

To Reproduce
Some steps involved to reproduce the bug and any code samples you can share.

<body>
  <div style="padding: 2rem;">
    <nylas-mailbox id="foo" access_token="bar"></nylas-mailbox>
  </div>
</body>

Expected behavior
A clear and concise description of what you expected to happen.
The mailbox should honor the parent div's width/height as its boundary, and not force a static width.

Version:
1.0.11

Additional context
I can't seem to find the CSS causing this, but only happens on really long threads it seems.

I feel like we can leverage the power of GPT 4 and create a chat interface with all the docs of nylas components.

I Know of a service that can provide a chat interface that interacts with your document for free. ChatGPT might not have a context of the whole repo, but Having a chat interface would help people understand the code,

Do get back to me, you can contact me on WhatsApp at : https://wa.me/918778949938

Here's an example: langchainx.web.app

I noticed that commit activity seems to have stopped for the last month. Is this still actively being developed?

Over on https://components.nylas.io/components/contact-list/src/index.html, the "Filter by Email" input and prompt show up before contacts are loaded. We should only show this if there are any contacts to filter.

The spacing over at https://components.nylas.io/components/agenda/src/index.html is currently uneven. Apply some margins and spacing between form elements and headers.

In the Availability and Scheduler components, I can currently hit tab or shift+tab to navigate between time slots.

I'd love the ability to use my up/down/left/right arrow keys to move between dates and times.

Relevant code for this is probably in an on:keypress here: https://github.com/nylas/components/blob/main/components/availability/src/Availability.svelte#L1665-L1670

Review period will end on 2021-09-21 at 17:08:00 UTC.

Originally posted by @BrewTestBot in Homebrew/brew#12092 (comment)