docs(ai-vue): add docs for ai-vue #126
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.
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.
I guess we would need e.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.
Not sure what is the purpose of this tool. Maybe it makes sense in React to set state causing a re-render, but in Vue it would do nothing as notification ref is not used anywhere.
@AlemTuzlak Was original React 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.
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.
This is actually a DeepReadonly<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.
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.
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.
Not sure what for notification is used in this example
2 participants
🎯 Changes
✅ Checklist
pnpm run test:pr.🚀 Release Impact
add docs for
@tanstack/ai-vue