Skip to content

refactor(elements): prompt-input to use createContext for unified context management #82

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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
snowbitx wants to merge 2 commits into from
+29 −51
Closed

refactor(elements): prompt-input to use createContext for unified context management #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb03934
refactor(elements): prompt-input to use createContext for unified con…
snowbitx Dec 6, 2025
13ddb8b
refactor(elements): use the createContext from reka
snowbitx Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 11 additions & 19 deletions apps/www/content/3.components/1.chatbot/prompt-input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,8 @@ import type { HTMLAttributes } from 'vue'
import type { PromptInputMessage } from './types'
import { InputGroup } from '@repo/shadcn-vue/components/ui/input-group'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { inject, onMounted, onUnmounted, ref } from 'vue'
import { usePromptInputProvider } from './context'
import { PROMPT_INPUT_KEY } from './types'
import { onMounted, onUnmounted, ref } from 'vue'
import { usePromptInput, usePromptInputProvider } from './context'

const props = defineProps<{
class?: HTMLAttributes['class']
Expand All @@ -90,23 +89,16 @@ const emit = defineEmits<{
const formRef = ref<HTMLFormElement | null>(null)

// --- Dual-mode context handling ---
const inheritedContext = inject(PROMPT_INPUT_KEY, null)
const localContext = inheritedContext
? null
: usePromptInputProvider({
initialInput: props.initialInput,
maxFiles: props.maxFiles,
maxFileSize: props.maxFileSize,
accept: props.accept,
onSubmit: msg => emit('submit', msg as any),
onError: err => emit('error', err),
})

const context = inheritedContext || localContext
const inheritedContext = usePromptInput(null)
Copy link
Contributor Author

@snowbitx snowbitx Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When reka's createContext is passed null, it does not trigger the catch block.
ref


if (!context) {
throw new Error('PromptInput context is missing.')
}
const context = inheritedContext ?? usePromptInputProvider({
initialInput: props.initialInput,
maxFiles: props.maxFiles,
maxFileSize: props.maxFileSize,
accept: props.accept,
onSubmit: msg => emit('submit', msg as any),
onError: err => emit('error', err),
})

const { fileInputRef, addFiles, submitForm } = context

Expand Down
30 changes: 11 additions & 19 deletions packages/elements/src/prompt-input/PromptInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@ import type { HTMLAttributes } from 'vue'
import type { PromptInputMessage } from './types'
import { InputGroup } from '@repo/shadcn-vue/components/ui/input-group'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { inject, onMounted, onUnmounted, ref } from 'vue'
import { usePromptInputProvider } from './context'
import { PROMPT_INPUT_KEY } from './types'
import { onMounted, onUnmounted, ref } from 'vue'
import { usePromptInput, usePromptInputProvider } from './context'

const props = defineProps<{
class?: HTMLAttributes['class']
Expand All @@ -25,23 +24,16 @@ const emit = defineEmits<{
const formRef = ref<HTMLFormElement | null>(null)

// --- Dual-mode context handling ---
const inheritedContext = inject(PROMPT_INPUT_KEY, null)
const localContext = inheritedContext
? null
: usePromptInputProvider({
initialInput: props.initialInput,
maxFiles: props.maxFiles,
maxFileSize: props.maxFileSize,
accept: props.accept,
onSubmit: msg => emit('submit', msg as any),
onError: err => emit('error', err),
})
const inheritedContext = usePromptInput(null)

const context = inheritedContext || localContext

if (!context) {
throw new Error('PromptInput context is missing.')
}
const context = inheritedContext ?? usePromptInputProvider({
initialInput: props.initialInput,
maxFiles: props.maxFiles,
maxFileSize: props.maxFileSize,
accept: props.accept,
onSubmit: msg => emit('submit', msg as any),
onError: err => emit('error', err),
})

const { fileInputRef, addFiles, submitForm } = context

Expand Down
18 changes: 7 additions & 11 deletions packages/elements/src/prompt-input/context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import type { AttachmentFile, PromptInputContext } from './types'
import { nanoid } from 'nanoid'
import { inject, onBeforeUnmount, provide, ref } from 'vue'
import { PROMPT_INPUT_KEY } from './types'
import {
createContext,
} from 'reka-ui'
import { onBeforeUnmount, ref } from 'vue'

export const [usePromptInput, providePromptInputContext] = createContext<PromptInputContext>('PromptInput')

export function usePromptInputProvider(props: {
initialInput?: string
Expand Down Expand Up @@ -178,14 +182,6 @@ export function usePromptInputProvider(props: {
submitForm,
}

provide(PROMPT_INPUT_KEY, context)
return context
}

export function usePromptInput() {
const context = inject<PromptInputContext>(PROMPT_INPUT_KEY)
if (!context) {
throw new Error('usePromptInput must be used within a PromptInput component')
}
providePromptInputContext(context)
return context
}
2 changes: 0 additions & 2 deletions packages/elements/src/prompt-input/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,3 @@ export interface PromptInputContext {
openFileDialog: () => void
submitForm: () => void
}

export const PROMPT_INPUT_KEY = Symbol('PromptInputContext')