feat: integrate PromptInputProvider into ChatLayout and utilize prompt input controller in ChatPage

This commit is contained in:
Henry Li
2026-02-02 10:18:02 +08:00
parent 867749d7a3
commit 6c0e5fffd0
2 changed files with 10 additions and 3 deletions

View File

@@ -1,5 +1,6 @@
"use client"; "use client";
import { PromptInputProvider } from "@/components/ai-elements/prompt-input";
import { ArtifactsProvider } from "@/components/workspace/artifacts"; import { ArtifactsProvider } from "@/components/workspace/artifacts";
export default function ChatLayout({ export default function ChatLayout({
@@ -7,5 +8,9 @@ export default function ChatLayout({
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return <ArtifactsProvider>{children}</ArtifactsProvider>; return (
<ArtifactsProvider>
<PromptInputProvider>{children}</PromptInputProvider>
</ArtifactsProvider>
);
} }

View File

@@ -5,6 +5,7 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { ConversationEmptyState } from "@/components/ai-elements/conversation"; import { ConversationEmptyState } from "@/components/ai-elements/conversation";
import { usePromptInputController } from "@/components/ai-elements/prompt-input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
ResizableHandle, ResizableHandle,
@@ -53,6 +54,7 @@ export default function ChatPage() {
} = useArtifacts(); } = useArtifacts();
const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>(); const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const promptInputController = usePromptInputController();
const inputInitialValue = useMemo(() => { const inputInitialValue = useMemo(() => {
if (threadIdFromPath !== "new" || searchParams.get("mode") !== "skill") { if (threadIdFromPath !== "new" || searchParams.get("mode") !== "skill") {
return undefined; return undefined;
@@ -62,6 +64,7 @@ export default function ChatPage() {
useEffect(() => { useEffect(() => {
if (inputInitialValue) { if (inputInitialValue) {
setTimeout(() => { setTimeout(() => {
promptInputController.textInput.setInput(inputInitialValue);
const textarea = document.querySelector("textarea"); const textarea = document.querySelector("textarea");
if (textarea) { if (textarea) {
textarea.focus(); textarea.focus();
@@ -70,7 +73,7 @@ export default function ChatPage() {
} }
}, 100); }, 100);
} }
}, [inputInitialValue]); }, [inputInitialValue, promptInputController.textInput]);
const isNewThread = useMemo( const isNewThread = useMemo(
() => threadIdFromPath === "new", () => threadIdFromPath === "new",
[threadIdFromPath], [threadIdFromPath],
@@ -272,7 +275,6 @@ export default function ChatPage() {
context={settings.context} context={settings.context}
extraHeader={isNewThread && <Welcome />} extraHeader={isNewThread && <Welcome />}
disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"} disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
initialValue={inputInitialValue}
onContextChange={(context) => onContextChange={(context) =>
setSettings("context", context) setSettings("context", context)
} }