dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

De-emphasize input for past document version (#468)

Browse source
This commit is contained in:
Jeremy 2024-10-30 21:28:33 +05:30 • committed by GitHub
parent 29f095bcc9
commit 14e88a9c26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 25 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/custom/canvas.tsx
View file

@ -270,7 +270,17 @@ export function Canvas({
}} }}
exit={{ opacity: 0, x: 10, scale: 0.95, transition: { delay: 0 } }} exit={{ opacity: 0, x: 10, scale: 0.95, transition: { delay: 0 } }}
> >
<div className="-right-12 w-12 bg-muted absolute h-dvh top-0" /> <AnimatePresence>
{!isCurrentVersion && (
<motion.div
className="left-0 absolute h-dvh w-[400px] top-0 bg-zinc-900/50 z-50"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
<div className="flex flex-col h-full justify-between items-center gap-4"> <div className="flex flex-col h-full justify-between items-center gap-4">
<div <div
ref={messagesContainerRef} ref={messagesContainerRef}
@ -379,7 +389,7 @@ export function Canvas({
<div className="p-2 flex flex-row justify-between items-start"> <div className="p-2 flex flex-row justify-between items-start">
<div className="flex flex-row gap-4 items-start"> <div className="flex flex-row gap-4 items-start">
<div <div
className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground" className="cursor-pointer hover:bg-muted dark:hover:bg-zinc-700 p-2 rounded-lg text-muted-foreground"
onClick={() => { onClick={() => {
setCanvas(null); setCanvas(null);
}} }}
@ -412,7 +422,7 @@ export function Canvas({
<div className="flex flex-row gap-1"> <div className="flex flex-row gap-1">
<div <div
className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground" className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700"
onClick={() => { onClick={() => {
handleVersionChange('prev'); handleVersionChange('prev');
}} }}
@ -420,7 +430,7 @@ export function Canvas({
<UndoIcon size={18} /> <UndoIcon size={18} />
</div> </div>
<div <div
className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground" className="cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700"
onClick={() => { onClick={() => {
handleVersionChange('next'); handleVersionChange('next');
}} }}
@ -429,8 +439,8 @@ export function Canvas({
</div> </div>
<div <div
className={cx( className={cx(
'cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground', 'cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700',
{ 'bg-muted': mode === 'diff' } { 'bg-muted dark:bg-zinc-700': mode === 'diff' }
)} )}
onClick={() => { onClick={() => {
handleVersionChange('toggle'); handleVersionChange('toggle');

2
components/custom/multimodal-input.tsx
View file

@ -228,7 +228,7 @@ export function MultimodalInput({
value={input} value={input}
onChange={handleInput} onChange={handleInput}
className={cx( className={cx(
'min-h-[24px] overflow-hidden resize-none rounded-lg text-base bg-muted', 'min-h-[24px] overflow-hidden resize-none rounded-xl text-base bg-muted',
className className
)} )}
rows={3} rows={3}

12
components/custom/use-canvas-stream.tsx
View file

@ -5,6 +5,7 @@ import { useSWRConfig } from 'swr';
import { Suggestion } from '@/db/schema'; import { Suggestion } from '@/db/schema';
import { UICanvas } from './canvas'; import { UICanvas } from './canvas';
import useWindowSize from './use-window-size';
type StreamingDelta = { type StreamingDelta = {
type: 'text-delta' | 'title' | 'id' | 'suggestion' | 'clear' | 'finish'; type: 'text-delta' | 'title' | 'id' | 'suggestion' | 'clear' | 'finish';
@ -31,6 +32,9 @@ export function useCanvasStream({
} }
}, [optimisticSuggestions, mutate]); }, [optimisticSuggestions, mutate]);
const { width: windowWidth = 1920, height: windowHeight = 1080 } =
useWindowSize();
useEffect(() => { useEffect(() => {
const mostRecentDelta = streamingData?.at(-1); const mostRecentDelta = streamingData?.at(-1);
if (!mostRecentDelta) return; if (!mostRecentDelta) return;
@ -46,10 +50,10 @@ export function useCanvasStream({
documentId: delta.type === 'id' ? (delta.content as string) : '', documentId: delta.type === 'id' ? (delta.content as string) : '',
status: 'idle', status: 'idle',
boundingBox: { boundingBox: {
top: 0, top: windowHeight / 4,
left: 0, left: windowWidth / 4,
width: 0, width: 250,
height: 0, height: 50,
}, },
}; };
} }