Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork79
docs(ai-vue): add docs for ai-vue#126
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:main
Are you sure you want to change the base?
Conversation
docs/api/ai-vue.md Outdated
| <div v-for="part in message.parts" :key="part.id"> | ||
| <span v-if="part.type === 'text'">{{ part.content }}</span> | ||
| <div v-else-if="part.type === 'thinking'"> | ||
| <div class="text-sm text-gray-500 italic">💭 Thinking: {{ part.content }}</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
This could potentially be merged with wrapper div
| const handleSubmit = (e: Event) => { | ||
| const val = input.value.trim() | ||
| if (((val ?? '') !== '') && !isLoading) { | ||
| sendMessage(input.value); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I guess we would neede.target.reset() as well to clear the form on submit.
| const notification = ref<string | null>(null); | ||
| // Create client tool implementations, | ||
| const updateUI = updateUIDef.client((input) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Not sure what is the purpose of this tool. Maybe it makes sense inReact to set state causing are-render, but inVue it would do nothing asnotification ref is not used anywhere.
@AlemTuzlak Was originalReact intention just to cause a re-render?
| createChatClientOptions, | ||
| type InferChatMessages | ||
| } from "@tanstack/ai-client"; | ||
| import { updateUIDef } from "@/tools/definitions"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
This tool def seems to be buried in one of the other pages, maybe in-lining it would be wise?
Or at least a link to this tool definition?
@AlemTuzlak
docs/api/ai-vue.md Outdated
| ```typescript | ||
| interface UseChatReturn { | ||
| messages: UIMessage[]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
This is actually aDeepReadonly<ShallowRef<Array<UIMessage>>>
docs/api/ai-vue.md Outdated
| }) => Promise<void>; | ||
| reload: () => Promise<void>; | ||
| stop: () => void; | ||
| isLoading: boolean; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
isLoading: DeepReadonly<ShallowRef<boolean>>
docs/api/ai-vue.md Outdated
| reload: () => Promise<void>; | ||
| stop: () => void; | ||
| isLoading: boolean; | ||
| error: Error | undefined; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
error: DeepReadonly<ShallowRef<Error | undefined>>
| } from "@tanstack/ai-client"; | ||
| import { updateUIDef, saveToStorageDef } from "@/tools/definitions"; | ||
| const notification = ref<{message: string; type: 'success' | 'error'}>(null); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Not sure what fornotification is used in this example
🎯 Changes
✅ Checklist
pnpm run test:pr.🚀 Release Impact
add docs for
@tanstack/ai-vue