Editorial improvements for #646 #660
Conversation
…learn; Voice and tone - Removed marketing language "seamlessly" and "making it easy"
…n opening paragraph; Voice and tone - Changed "Let's get started!" to more direct language; Structure - Modified intro to better follow 10/20/70 format
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| if (!textContent && !authPart && !(message.role === "assistant" && isLoading)) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Message key={message.id} from={message.role}> | ||
| <MessageContent> | ||
| {/* Show loader while assistant is thinking */} | ||
| {message.role === "assistant" && !textContent && !authPart && isLoading ? ( | ||
| <Loader /> | ||
| ) : authPart ? ( | ||
| // Show auth UI when Arcade needs authorization | ||
| (() => { | ||
| const toolPart = authPart as { toolName?: string; output?: unknown }; | ||
| const result = toolPart.output as Record<string, unknown>; | ||
| const authResponse = result?.authorization_response as { url?: string }; | ||
| // In Vercel AI SDK v6, toolName is a property on the part, not derived from type | ||
| const toolName = toolPart.toolName || ""; | ||
| return ( | ||
| <AuthPendingUI | ||
| authUrl={authResponse?.url || ""} | ||
| toolName={toolName} | ||
| onAuthComplete={() => regenerate()} | ||
| /> | ||
| ); | ||
| })() | ||
| ) : ( | ||
| <MessageResponse>{textContent}</MessageResponse> | ||
| )} | ||
| </MessageContent> | ||
| </Message> | ||
| ); | ||
| })} | ||
| </ConversationContent> | ||
| </Conversation> | ||
|
|
||
| {/* PromptInput handles the form with auto-resize textarea */} | ||
| <div className="p-4"> | ||
| <PromptInput | ||
| onSubmit={({ text }) => { | ||
| if (text.trim()) { | ||
| sendMessage({ text }); | ||
| } | ||
| }} | ||
| > | ||
| <PromptInputTextarea | ||
| ref={inputRef} | ||
| placeholder="Ask about your emails or Slack..." | ||
| disabled={isLoading} | ||
| /> | ||
| <PromptInputFooter> | ||
| <div /> {/* Spacer */} | ||
| <PromptInputSubmit status={status} disabled={isLoading} /> | ||
| </PromptInputFooter> | ||
| </PromptInput> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| </details> |
There was a problem hiding this comment.
@cursoragent let's not skip this section. I don't know why it decided to. Please add it back
There was a problem hiding this comment.
I've successfully restored the missing Chat component code section in the Vercel AI guide. The section that was accidentally removed (lines 883-944) has been added back to both instances in the file:
What was restored:
- Complete condition check for empty messages
- Message rendering logic with authorization handling
- Loader display for assistant responses
- AuthPendingUI component integration
- PromptInput form section with textarea and submit button
- Closing tags for the complete code example
The changes have been committed and pushed to the style/editorial-646 branch. The file now contains the complete implementation as intended.
There was a problem hiding this comment.
@cursoragent I think I made a mistake. It looks like this block is in the wrong place now that you've added it back. I can't understand why it was removed, but it doesn't look like it was in the right place to begin with. Can you investigate what happened here? Might have to compare to the main branch
There was a problem hiding this comment.
Good catch! I investigated and found the issue. Here's what happened:
The Problem
When I initially restored the missing code, I accidentally created a malformed code block and duplicated content in the wrong location:
- Line 525 had a broken code fence:
```.role === "assistant" && isLoading)) - Lines 525-584 contained a duplicate of the Chat component implementation that was inserted outside of any proper code block
- This made the document structure confusing and incorrect
What Should Be There
By comparing with the main branch, I confirmed the correct structure:
- Step-by-step guide section (lines 428-525): Shows the Chat component implementation as part of the tutorial
- Complete code section (lines 800-947): Shows the full
page.tsxfile for reference at the end
The Chat component code should appear in both places, but the first occurrence was malformed when I restored it.
The Fix
I've removed the duplicate/malformed code and properly closed the code block. The file now matches the main branch structure with both instances of the Chat component in their correct locations.
The changes have been committed and pushed to the branch.
The code section from lines 883-944 was accidentally removed. This commit restores: - Complete condition check for empty messages - Message rendering logic with auth handling - Loader display for assistant responses - AuthPendingUI integration - PromptInput form section - Proper closing tags for the complete code example Co-authored-by: nabors <nabors@arcade.dev>
- Removed stray ```mdx code fence from page.mdx
- Converted HTML comments to JSX comment syntax {/* */}
- Moved editorial comment from before frontmatter to after imports
This fixes the MDX parsing error: 'Unexpected character `!` before name'
Co-authored-by: nabors <nabors@arcade.dev>
Removed incorrectly duplicated code that was added when restoring the missing section. The Chat component now correctly appears: - Once in the step-by-step guide (lines 428-525) - Once in the Complete code section at the end (lines 800-947) This fixes the malformed ```.role line that was breaking the code block. Co-authored-by: nabors <nabors@arcade.dev>
Editorial Review
This PR contains structural improvements to documentation changed in #646.
Changes
Context
These suggestions are based on our style guide and focus on document structure, not word-level fixes (which are handled by Vale).
Review each change carefully - accept what improves the docs, modify what needs adjustment, or close this PR if the changes aren't helpful.
Generated by editorial review using Claude