docs(sender): refactor sender docs and examples for 0.4.0 version #288
Conversation
…ndant clear action
WalkthroughRestructures the TrSender docs and demos: removes multiple legacy v0.3 demo files, adds a broad set of v0.4 demo examples and rewritten docs (sender.md, sender-compat.md), updates voice UI patterns, and adds TypeScript environment typings and tsconfig include adjustments. Changes
Sequence Diagram(s)mermaid User->>UI: tap/click record Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
|
✅ Preview build completed successfully!
|
📦 Package Previewpnpm add https://pkg.pr.new/opentiny/tiny-robot/@opentiny/tiny-robot@7ba66e5 pnpm add https://pkg.pr.new/opentiny/tiny-robot/@opentiny/tiny-robot-kit@7ba66e5 pnpm add https://pkg.pr.new/opentiny/tiny-robot/@opentiny/tiny-robot-svgs@7ba66e5 commit: 7ba66e5 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🤖 Fix all issues with AI agents
In `@docs/demos/sender/cancel-event.vue`:
- Around line 9-25: The setTimeout started in handleSubmit causes a race where
handleCancel's state is overwritten; fix by storing the timer ID (e.g.,
submitTimeoutId) when calling setTimeout inside handleSubmit, call
clearTimeout(submitTimeoutId) at the start of handleCancel (and reset the id to
null), and also clear it when the submit timeout completes to avoid stale
references; update references to loading, message, and content accordingly so
cancel always wins.
In `@docs/demos/sender/custom-slots.vue`:
- Around line 80-85: The hover CSS currently targets .emoji-btn but the actual
button uses class .search-btn, so update the selector in the stylesheet to
target .search-btn (and keep .deep-think-btn) so the hover styles apply to the
search button; locate the rule defining .deep-think-btn:hover, .emoji-btn:hover
and replace .emoji-btn with .search-btn, and verify there are no other
references to .emoji-btn in this component that need renaming or removal.
In `@docs/demos/sender/loading-state.vue`:
- Around line 10-24: The timeout started in handleSubmit is not tracked so it
still fires after handleCancel, causing unexpected clearing of content/loading;
update handleSubmit to store the setTimeout ID in a variable (e.g., a
module-scoped or reactive timerId) and clear any existing timer before creating
a new one, and update handleCancel to call clearTimeout on that stored timer ID
and reset the timerId to null so the timeout callback won't run after
cancellation; reference handleSubmit, handleCancel, loading, content, and the
setTimeout-created timer ID when making the change.
In `@docs/demos/sender/suggestion-basic.vue`:
- Around line 19-26: The suggestions extension's onSelect callback only logs the
chosen item and doesn't update the reactive selectedItem, so the UI conditional
never shows; modify the TrSender.suggestion(...) onSelect handler to set
selectedItem.value = item (or assign the appropriate property of item) after
logging so the reactive variable selectedItem is updated and the conditional
display can render the selection. Ensure you reference the existing selectedItem
reactive/ref and the TrSender.suggestion(...) call when making the change.
In `@docs/demos/sender/voice-custom-ui.vue`:
- Around line 85-89: The template incorrectly uses v-model:visible with
PressToTalkOverlay even though the component only accepts a one-way prop and
does not emit update:visible; change the binding to a regular prop bind (use
:visible="showMobileVoiceUI" instead of v-model:visible) so the
parent-controlled showMobileVoiceUI is passed down correctly, and remove any
expectation of child emits from PressToTalkOverlay.
- Around line 66-82: The VoiceButton is only rendered when !isMobile but mobile
touch handlers (handleTouchStart/handleTouchEnd) call
voiceButtonRef.value?.start()/stop(), causing undefined refs; ensure a
VoiceButton instance always exists for mobile by mounting a hidden VoiceButton
regardless of isMobile (or instantiate a separate hidden VoiceButton outside the
conditional) so voiceButtonRef is always defined, then keep the visible PC
VoiceButton for desktop and invoke voiceButtonRef.value.start()/stop() from the
touch handlers.
In `@docs/src/components/sender-compat.md`:
- Around line 98-99: The link fragment "[模板填充迁移](`#模板迁移`)" is flagged by MD051
because the target heading slug doesn't match; either add an explicit ID to the
target heading (e.g., add {`#模板迁移`} to the heading "第二步：处理破坏性变更") or update the
fragment to the actual generated slug for that heading; apply the same change
for the other occurrence noted (line 576) so both fragments match their
headings.
- Around line 153-159: Add a language identifier to the fenced code block that
contains "方案 A：快速迁移（当前）" and "方案 B：完全升级（目标）" in
docs/src/components/sender-compat.md to satisfy Markdownlint MD040; update the
triple-backtick fence to ```text so the block is explicitly marked as plain text
(no other content changes needed).
In `@docs/src/components/sender.md`:
- Around line 296-423: The markdown uses H4 (####) for subsection headings under
the main "Props" H2 which breaks the heading hierarchy; update the subsection
headings "Template", "Mention", "Suggestion", "UploadButton", "VoiceButton" (and
other similar blocks noted around the later range) from H4 to H3 (change "####"
to "###") so they nest correctly under the H2, ensuring consistent heading
levels throughout the sender component docs.
- Line 4: The version badge at the top currently reads "badge: 1.4.0" but the
page content targets v0.4.0; update the badge value from 1.4.0 to 0.4.0 so the
front-matter/version badge matches the documented version (change the "badge:
1.4.0" entry to "badge: 0.4.0").
- Around line 678-719: Replace the bolded subsection titles (e.g., "**基础颜色**",
"**尺寸和间距**", "**Header 区域**", "**Footer 区域**", "**前缀和操作区**", "**按钮**") with
proper Markdown headings (for example use "### 基础颜色", "### 尺寸和间距", etc.)
throughout this sender.md fragment so they are real headings that appear in the
TOC and satisfy MD036; keep the rest of the table content unchanged and apply
the same change to any other bolded subsection titles in the file.
🧹 Nitpick comments (6)
docs/demos/sender/template-editor.vue (1)
89-92: Show last submitted result even if editor content changes.The current
v-if="submittedContent && content"hides the submitted output whenever the editor is cleared or edited after submit. For a demo, it’s usually more helpful to keep the last submitted result visible as long assubmittedContentexists.♻️ Possible tweak
- <div v-if="submittedContent && content" class="result"> + <div v-if="submittedContent" class="result">docs/demos/sender/PressToTalkOverlay.vue (1)
38-38: Consider dynamic alt text for accessibility.The alt text is static while the image changes based on
isCancelingstate. For improved accessibility, consider making the alt text reflect the current state.♻️ Suggested improvement
- <img :src="recordImgUrl" alt="Recording Wave" /> + <img :src="recordImgUrl" :alt="isCanceling ? 'Cancel recording' : 'Recording in progress'" />docs/demos/sender/methods-demo.vue (1)
24-27: Variable shadowing: localcontentshadows the outer ref.The local
const contentdeclaration shadows thecontentref from line 6. While this doesn't cause a bug here, it can lead to confusion. Consider renaming the local variable.♻️ Suggested improvement
const handleGetContent = () => { - const content = chatInputRef.value?.getContent() - result.value = `当前内容: ${content}` + const currentContent = chatInputRef.value?.getContent() + result.value = `当前内容: ${currentContent}` }docs/demos/sender/suggestion-highlight.vue (1)
52-99: Consider extracting the duplicated highlights function.All four items in
customSuggestionsuse an identicalhighlightsfunction that splits on-and highlights the first part. This duplication can be reduced with a shared helper.Proposed refactor
+// 共享的高亮函数：高亮产品名称（-前的部分） +const highlightProductName = (text: string, _query: string): SuggestionTextPart[] => { + const parts = text.split('-') + return [ + { text: parts[0], isMatch: true }, + { text: '-', isMatch: false }, + { text: parts[1], isMatch: false }, + ] +} + // 自定义函数模式的建议项 const customSuggestions: SenderSuggestionItem[] = [ - { - content: 'ECS-云服务器卡顿问题', - highlights: (text: string, _query: string): SuggestionTextPart[] => { - // 高亮产品名称（ECS） - const parts = text.split('-') - return [ - { text: parts[0], isMatch: true }, - { text: '-', isMatch: false }, - { text: parts[1], isMatch: false }, - ] - }, - }, - // ... similar for other items + { content: 'ECS-云服务器卡顿问题', highlights: highlightProductName }, + { content: 'ECS-备份弹性云服务器', highlights: highlightProductName }, + { content: 'CDN-权限管理配置', highlights: highlightProductName }, + { content: 'CDN-缓存刷新问题', highlights: highlightProductName }, ]docs/demos/sender/custom-slots.vue (1)
19-22: Rename function to match its purpose.
handleEmojidisplays "打开网络搜索..." but the name suggests emoji handling. Consider renaming tohandleSearchfor clarity.Proposed rename
-const handleEmoji = () => { +const handleSearch = () => { message.value = '打开网络搜索...' setTimeout(() => (message.value = ''), 3000) }And update the template:
- <button class="search-btn" `@click`="handleEmoji"> + <button class="search-btn" `@click`="handleSearch">docs/demos/sender/actions-config-basic.vue (1)
53-58: Global style may cause unintended side effects.This unscoped style with
!importantwill affect all tooltip poppers across the documentation page, not just this demo. Consider using a more specific selector or documenting this as intentional.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@docs/src/components/sender.md`:
- Line 20: The anchor link for "已移除的 API" in docs/src/components/sender.md is
using the wrong fragment; update the link fragment to match the generated
heading slug (or add an explicit ID on the target heading "已移除的 API") so the
in-page link resolves; specifically, change the fragment used in the sentence
containing "已移除的 API" to the exact slug that the heading generates (or add an
explicit HTML/MDX id attribute to the "已移除的 API" heading) ensuring both the link
and the heading use the same identifier.
♻️ Duplicate comments (7)
docs/src/components/sender-compat.md (3)
98-98: Fix invalid link fragment.The link fragment
#模板迁移doesn't match the target heading. The target heading "第二步:处理破坏性变更" generates a different slug.💡 Suggested fix
Either update the link to point to the correct section:
-详见 [模板填充迁移](`#模板迁移`) +详见 [模板填充迁移](`#完整迁移方案`)Or if you want to link directly to the template migration subsection:
-详见 [模板填充迁移](`#模板迁移`) +详见 [模板填充迁移](`#5-模板填充迁移`)
153-159: Add language identifier to fenced code block.Markdownlint flags this block for missing language specification.
💡 Suggested fix
-``` +```text 方案 A:快速迁移(当前)
576-576: Fix invalid link fragment.Same issue as line 98 - the link fragment doesn't match the actual heading.
💡 Suggested fix
-**A**: 大部分插槽保持兼容,但 `#actions`、`#footer-left`、`#decorativeContent` 需要调整。详见 [第二步:处理破坏性变更](`#第二步-处理破坏性变更`)。 +**A**: 大部分插槽保持兼容,但 `#actions`、`#footer-left`、`#decorativeContent` 需要调整。详见 [第二步:处理破坏性变更](`#第二步处理破坏性变更`)。docs/src/components/sender.md (4)
294-310: Fix heading hierarchy - Template subsection.The subsections under "Props" jump from H2 directly to H4, which breaks the document hierarchy and TOC navigation.
💡 Suggested fix
-#### Template +### TemplateApply the same fix to other subsections: Mention, Suggestion, UploadButton, VoiceButton.
467-483: Fix heading hierarchy - UploadButton Events subsection.Same heading level issue - H4 under H2.
💡 Suggested fix
-#### UploadButton Events +### UploadButton EventsApply to VoiceButton Events as well.
496-507: Fix heading hierarchy - Methods subsections.Same heading level issue.
💡 Suggested fix
-#### UploadButton Methods +### UploadButton MethodsApply to VoiceButton Methods and other subsections.
676-723: Replace bold text with proper headings in CSS variables section.Using bold text instead of headings prevents these subsections from appearing in the table of contents and harms document structure.
💡 Suggested fix
Replace all bold subsection titles with H3 headings:
-**基础颜色** +### 基础颜色Apply to:
- 基础颜色 (line 676)
- 尺寸和间距 (line 685)
- Header 区域 (line 696)
- Footer 区域 (line 704)
- 前缀和操作区 (line 710)
- 按钮 (line 717)
🧹 Preview Cleaned UpThe preview deployment has been removed. |
2 participants
调整 v0.4.0 sender 组件案例及其示例文档
预览地址：https://sonyleo.github.io/tiny-robot/alpha/components/sender.html
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.