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 } }}
>
<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
ref={messagesContainerRef}
@ -379,7 +389,7 @@ export function Canvas({
<div className="p-2 flex flex-row justify-between items-start">
<div className="flex flex-row gap-4 items-start">
<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={() => {
setCanvas(null);
}}
@ -412,7 +422,7 @@ export function Canvas({
<div className="flex flex-row gap-1">
<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={() => {
handleVersionChange('prev');
}}
@ -420,7 +430,7 @@ export function Canvas({
<UndoIcon size={18} />
</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={() => {
handleVersionChange('next');
}}
@ -429,8 +439,8 @@ export function Canvas({
</div>
<div
className={cx(
'cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground',
{ 'bg-muted': mode === 'diff' }
'cursor-pointer hover:bg-muted p-2 rounded-lg text-muted-foreground dark:hover:bg-zinc-700',
{ 'bg-muted dark:bg-zinc-700': mode === 'diff' }
)}
onClick={() => {
handleVersionChange('toggle');

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

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