80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
// Upload and index: the browser sends the file to the files module (the kit's `uploadFile`), then
|
|
// asks this module to index it (`knowledge.document.index`). The indexing itself is a worker job;
|
|
// this form only ever waits on the request.
|
|
|
|
import { type ProjectSlugs, uploadFile, useTransport } from "@conusai-kit/ui"
|
|
import { type FormEvent, type ReactElement, useId, useState } from "react"
|
|
import { INDEXABLE_CONTENT_TYPES, MAX_INDEX_BYTES } from "../contract/index.js"
|
|
|
|
export interface IndexFormLabels {
|
|
readonly heading: string
|
|
readonly label: string
|
|
readonly hint: string
|
|
readonly submit: string
|
|
readonly busy: string
|
|
readonly done: string
|
|
readonly failed: string
|
|
}
|
|
|
|
type State = { kind: "idle" } | { kind: "busy" } | { kind: "done" } | { kind: "failed"; detail: string }
|
|
|
|
export function IndexForm({
|
|
slugs,
|
|
collectionName,
|
|
labels,
|
|
}: {
|
|
slugs: ProjectSlugs
|
|
collectionName: string
|
|
labels: IndexFormLabels
|
|
}): ReactElement {
|
|
const transport = useTransport()
|
|
const { call, describe } = transport
|
|
const inputId = useId()
|
|
const hintId = useId()
|
|
const [state, setState] = useState<State>({ kind: "idle" })
|
|
|
|
const index = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
|
|
event.preventDefault()
|
|
const form = event.currentTarget
|
|
const file = new FormData(form).get("file")
|
|
if (!(file instanceof File) || file.size === 0) return
|
|
setState({ kind: "busy" })
|
|
try {
|
|
const stored = await uploadFile(transport, slugs, file)
|
|
await call("knowledge.document.index", { ...slugs, collectionName, fileId: stored.fileId })
|
|
form.reset()
|
|
setState({ kind: "done" })
|
|
window.location.reload()
|
|
} catch (error) {
|
|
setState({ kind: "failed", detail: describe(error) })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section aria-labelledby={`${inputId}-heading`}>
|
|
<h2 id={`${inputId}-heading`}>{labels.heading}</h2>
|
|
<form onSubmit={(event) => void index(event)}>
|
|
<label htmlFor={inputId}>{labels.label}</label>
|
|
<input
|
|
id={inputId}
|
|
name="file"
|
|
type="file"
|
|
required
|
|
aria-describedby={hintId}
|
|
accept={INDEXABLE_CONTENT_TYPES.join(",")}
|
|
/>
|
|
<p id={hintId}>
|
|
{labels.hint} · {Math.round(MAX_INDEX_BYTES / 1024)} KB.
|
|
</p>
|
|
<button type="submit" disabled={state.kind === "busy"}>
|
|
{state.kind === "busy" ? labels.busy : labels.submit}
|
|
</button>
|
|
</form>
|
|
{state.kind === "done" ? <p role="status">{labels.done}</p> : null}
|
|
{state.kind === "failed" ? <p role="alert">{labels.failed.replace("{detail}", state.detail)}</p> : null}
|
|
</section>
|
|
)
|
|
}
|