fix(channels): render prompt expansion inline#3732
Conversation
Generated-By: PostHog Code Task-Id: 8b5e328f-08da-4999-9414-071c743a9053
|
Merging to
After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here |
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
|
👋 Visual changes detected for this PR. Review and approve in PostHog Visual Review If these changes are unexpected, they may be caused by a flaky test or a broken snapshot on master. Don't approve — rerun the job or wait for a fix. |
adboio
added
the
Stamphog
Prompt To Fix All With AIFix the following 2 code review issues. Work through them one at a time, proposing concise fixes.
---
### Issue 1 of 2
packages/ui/src/features/canvas/components/ChannelFeedView.tsx:448-459
**Unicode Boundary Corrupts Prompt Text**
The search slices by UTF-16 code units. When the fitting boundary lands inside a supplementary character such as an emoji, the collapsed prompt renders a replacement glyph before the ellipsis.
```suggestion
const collapsedCharacters = Array.from(collapsedText);
let low = 0;
let high = collapsedCharacters.length;
while (low < high) {
const middle = Math.ceil((low + high) / 2);
text.textContent = `${collapsedCharacters.slice(0, middle).join("").trimEnd()}... `;
if (body.scrollHeight <= body.clientHeight) {
low = middle;
} else {
high = middle - 1;
}
}
setTruncatedText(
collapsedCharacters.slice(0, low).join("").trimEnd(),
);
```
### Issue 2 of 2
packages/ui/src/features/canvas/components/ChannelFeedView.tsx:473-474
**Expanded Action Joins Final Word**
The expanded branch renders the original prompt directly beside the `less` button. When the prompt does not end with whitespace, users see text such as `final wordless` instead of a separated inline action.
```suggestion
{truncatedText !== null && (expanded ? " " : "... ")}
{truncatedText !== null && (
```
Reviews (1): Last reviewed commit: "fix(channels): render prompt expansion i..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| let low = 0; | ||
| let high = collapsedText.length; | ||
| while (low < high) { | ||
| const middle = Math.ceil((low + high) / 2); | ||
| text.textContent = `${collapsedText.slice(0, middle).trimEnd()}... `; | ||
| if (body.scrollHeight <= body.clientHeight) { | ||
| low = middle; | ||
| } else { | ||
| high = middle - 1; | ||
| } | ||
| } | ||
| setTruncatedText(collapsedText.slice(0, low).trimEnd()); |
There was a problem hiding this comment.
The search slices by UTF-16 code units. When the fitting boundary lands inside a supplementary character such as an emoji, the collapsed prompt renders a replacement glyph before the ellipsis.
| let low = 0; | |
| let high = collapsedText.length; | |
| while (low < high) { | |
| const middle = Math.ceil((low + high) / 2); | |
| text.textContent = `${collapsedText.slice(0, middle).trimEnd()}... `; | |
| if (body.scrollHeight <= body.clientHeight) { | |
| low = middle; | |
| } else { | |
| high = middle - 1; | |
| } | |
| } | |
| setTruncatedText(collapsedText.slice(0, low).trimEnd()); | |
| const collapsedCharacters = Array.from(collapsedText); | |
| let low = 0; | |
| let high = collapsedCharacters.length; | |
| while (low < high) { | |
| const middle = Math.ceil((low + high) / 2); | |
| text.textContent = `${collapsedCharacters.slice(0, middle).join("").trimEnd()}... `; | |
| if (body.scrollHeight <= body.clientHeight) { | |
| low = middle; | |
| } else { | |
| high = middle - 1; | |
| } | |
| } | |
| setTruncatedText( | |
| collapsedCharacters.slice(0, low).join("").trimEnd(), | |
| ); |
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/ui/src/features/canvas/components/ChannelFeedView.tsx
Line: 448-459
Comment:
**Unicode Boundary Corrupts Prompt Text**
The search slices by UTF-16 code units. When the fitting boundary lands inside a supplementary character such as an emoji, the collapsed prompt renders a replacement glyph before the ellipsis.
```suggestion
const collapsedCharacters = Array.from(collapsedText);
let low = 0;
let high = collapsedCharacters.length;
while (low < high) {
const middle = Math.ceil((low + high) / 2);
text.textContent = `${collapsedCharacters.slice(0, middle).join("").trimEnd()}... `;
if (body.scrollHeight <= body.clientHeight) {
low = middle;
} else {
high = middle - 1;
}
}
setTruncatedText(
collapsedCharacters.slice(0, low).join("").trimEnd(),
);
```
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| {truncatedText !== null && !expanded && "... "} | ||
| {truncatedText !== null && ( |
There was a problem hiding this comment.
The expanded branch renders the original prompt directly beside the less button. When the prompt does not end with whitespace, users see text such as final wordless instead of a separated inline action.
| {truncatedText !== null && !expanded && "... "} | |
| {truncatedText !== null && ( | |
| {truncatedText !== null && (expanded ? " " : "... ")} | |
| {truncatedText !== null && ( |
Rule Used: Maintain proper spacing in template strings. Ensur... (source)
Learned From
PostHog/posthog#32603
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/ui/src/features/canvas/components/ChannelFeedView.tsx
Line: 473-474
Comment:
**Expanded Action Joins Final Word**
The expanded branch renders the original prompt directly beside the `less` button. When the prompt does not end with whitespace, users see text such as `final wordless` instead of a separated inline action.
```suggestion
{truncatedText !== null && (expanded ? " " : "... ")}
{truncatedText !== null && (
```
**Rule Used:** Maintain proper spacing in template strings. Ensur... ([source](https://app.greptile.com/posthog-org-19734/-/custom-context?memory=d0a97985-7ddb-464d-9739-625899016a97))
**Learned From**
[PostHog/posthog#32603](https://github.com/PostHog/posthog/pull/32603)
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
|
Note 🤖 stamphog reviewed Greptile flagged two P1 correctness bugs (UTF-16 slicing can corrupt supplementary characters at the truncation boundary; the expanded view can visually merge the last word into the "less" button) and both are still present verbatim in the current diff — unresolved, not addressed by a later commit.
Gate mechanics and policy version
|
stamphog
Bot
removed
the
Stamphog
1 participant
Problem
Truncated channel prompts separated the ellipsis and expansion link from the text, especially when prompts contained newlines.
Why: Prompt previews should read as one continuous sentence with an obvious inline expansion action.
Changes
text... more, withmorein normal inline flow.How did you test this?
pnpm --filter @posthog/ui exec vitest run src/features/canvas/components/ChannelFeedView.test.tsxpnpm --filter @posthog/ui typecheckAutomatic notifications
Created with PostHog Code