[IDEA] Live Scrolling with Scrolling Buffer

[aymenssf]

Live Scrolling with Scrolling Buffer:

Scrolling Buffer: Implement a buffer that stores a certain number of previously generated lines. This allows users to scroll up and see the recently generated text without affecting the ongoing generation process.
Live Scrolling: As the AI generates new lines, automatically update the displayed content within the buffer. This way, the user can scroll up and review the recent history without the page jumping or content disappearing.

[debanjum]

Hey @aymenssf, can you describe the issue in more details? Is the problem that the user can't scroll-up when Khoj is writing out its response? What is the "content disappearing" bit you mentioned? Feel free to share screenshots or small videos if they'll help explaining the issue

[m00nbyt3]

I have this problem, I can't scroll-up when Khoj is writing out its response

[aymenssf]

https://github.com/khoj-ai/khoj/assets/79019644/4e450c75-08ca-47a1-972d-e9f993f3f021
Hello @debanjum , here is what I mean, thank you

[m00nbyt3]

As a temporal solution, we can inject this code ( genereted by khoj btw :) ) in DevTools console:

// Selects the element
var chatBody = document.getElementById("chat-body");

// Saves the last scrollTop value
var originalScrollTop = chatBody.scrollTop;

// Redefine scrollTop porperty
Object.defineProperty(chatBody, 'scrollTop', {
    set: function(value) {
        // Do not do nothing, so the scrollTop will not change
        // Maybe we can write some code here
    },
    get: function() {
        return originalScrollTop;
    },
    configurable: true
});

[shantanuSakpal]

yep, this is an annoying bug. if the answer is going to be long, i would like to start reading it rather than waiting for the ai to finish the answer

[m00nbyt3]

This has gotten worse with the new UI, theres a strange flicker while the answer is generated, and its impossible to srcoll up to read the answer from the start while khoj is generating it.

[sabaimran]

hey @m00nbyt3 , does the code you pasted above work for fixing this bug?

I haven't been able to fix this so far in my experimentation from ~2 months ago. If any contributors want to jump in and create a fix, I'll actually compensate you lol. Hopefully it should be a minimal JavaScript-y fix in the file chatHistory.tsx and how the function scrollToBottom is being called.

Otherwise, I'll take another look at it next week!

[shantanuSakpal]

alright, will give it a try.

[m00nbyt3]

That code worked before the UI upgrade. Ill also give it a try, no need to compensate anything, this is open source :))

[shantanuSakpal]

cool @m00nbyt3 , thats the spirit 👍 😄

[sabaimran]

Thanks, @m00nbyt3 ! Let me know if you run into issues and I'll hop back in.

[shantanuSakpal]

are you still working on this? @m00nbyt3