klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add an animation to opening and closing the thought process

Browse Source
This commit is contained in:
sabaimran
2025-01-29 12:47:14 -08:00
parent 01faae0299
commit 0b2305d8f2
3 changed files with 55 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/interface/web/app/components/chatHistory/chatHistory.tsx
View File

@@ -2,6 +2,7 @@
import styles from "./chatHistory.module.css";
import { useRef, useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import ChatMessage, {
ChatHistoryData,
@@ -55,6 +56,19 @@ function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
const lastIndex = props.trainOfThought.length - 1;
const [collapsed, setCollapsed] = useState(props.completed);
const variants = {
open: {
height: "auto",
opacity: 1,
transition: { duration: 0.3, ease: "easeOut" }
},
closed: {
height: 0,
opacity: 0,
transition: { duration: 0.3, ease: "easeIn" }
}
};
useEffect(() => {
if (props.completed) {
setCollapsed(true);
@@ -87,15 +101,25 @@ function TrainOfThoughtComponent(props: TrainOfThoughtComponentProps) {
Close <CaretUp size={16} className="ml-1" />
</Button>
))}
{!collapsed &&
props.trainOfThought.map((train, index) => (
<TrainOfThought
key={`train-${index}`}
message={train}
primary={index === lastIndex && props.lastMessage && !props.completed}
agentColor={props.agentColor}
/>
))}
<AnimatePresence initial={false}>
{!collapsed && (
<motion.div
initial="closed"
animate="open"
exit="closed"
variants={variants}
>
{props.trainOfThought.map((train, index) => (
<TrainOfThought
key={`train-${index}`}
message={train}
primary={index === lastIndex && props.lastMessage && !props.completed}
agentColor={props.agentColor}
/>
))}
</motion.div>
)}
</AnimatePresence>
</div>
);
}

1
src/interface/web/package.json
View File

@@ -53,6 +53,7 @@
"embla-carousel-react": "^8.5.1",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"framer-motion": "^12.0.6",
"input-otp": "^1.2.4",
"intl-tel-input": "^23.8.1",
"katex": "^0.16.21",

21
src/interface/web/yarn.lock
View File

@@ -3121,6 +3121,15 @@ fraction.js@^4.3.7:
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
framer-motion@^12.0.6:
version "12.0.6"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.0.6.tgz#4ec8b9225ead4d0d7d4ff00ade6e76a83e6d0c99"
integrity sha512-LmrXbXF6Vv5WCNmb+O/zn891VPZrH7XbsZgRLBROw6kFiP+iTK49gxTv2Ur3F0Tbw6+sy9BVtSqnWfMUpH+6nA==
dependencies:
motion-dom "^12.0.0"
motion-utils "^12.0.0"
tslib "^2.4.0"
fs-extra@^11.1.0:
version "11.2.0"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b"
@@ -4167,6 +4176,18 @@ mlly@^1.7.3:
pkg-types "^1.2.1"
ufo "^1.5.4"
motion-dom@^12.0.0:
version "12.0.0"
resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.0.0.tgz#7045c63642eecbcc04c40b4457ebb07b3c2b3d0c"
integrity sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==
dependencies:
motion-utils "^12.0.0"
motion-utils@^12.0.0:
version "12.0.0"
resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.0.0.tgz#fabf79f4f1c818720a1b70f615e2a1768f396ac0"
integrity sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==
ms@^2.1.1, ms@^2.1.3:
version "2.1.3"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"