DEV Community: aldrin312

Sprint 6 Planning

aldrin312 — Thu, 03 Apr 2025 17:43:02 +0000

For this plan, same as always with the previous sprint since I didn't made that much progress the last time. To start with, I manage to partially got the auto scrolling feature work but it still have a lot of issues with it. One of which that it doesn't fully scroll down to the bottom of the scroll view. It is always just a bit on top of it. Another is that with more messages in the chat it starts the deteriorate. Like, making the chat laggy or slow while it streaming the message. So since this is proving very difficulty to fix, an alternative option is needed. Rather than making to scroll to the bottom, let it scroll until the top of the message is on top of the view. Similar with what is going on with chat gpt on how it handles message scrolling. So this is the alternative way for now. I think this is the better option, since it let the user to start reading from the top of the message rather than them having to scroll back up to it from the bottom. Or making them do an action first to start from the start.

Another issue that was found from this is that the AI message is being unrendered and rendered at the end of the stream. Causing it to disappear and reappear. Creating issues with the previous auto scrolling feature. I found the thing that's causing the issues. I'm not totally sure if its the cause but it tracked down to their. From what I can see, it unrenders the message when it saves or update itself to the database. It uses dixies to read data from the database. It is just saving it to the database, so it shouldn't unrenders the message, but it does. So I'm at a stomp with this one. After I finished the alternative to auto scrolling, I need to check if there's an alternative way to save it to the database without unrendering it. Generally it is not an issue but if the chat is slow enough when it has a lot of uncleared messages in chat, to unrender and rerender is very visible. It also messes up with the scroll height creating more issues with the thing I'm trying to fix. I'm not even sure if this is actually is causing the issue.

For now I can focus on making an alternative feature for the auto scrolling, it should be easier than trying to fix the old feature since I already made something similar before with another feature that scroll it to the top with a button.

Plan for Fixing the Auto-scroll Sprint

aldrin312 — Thu, 20 Mar 2025 15:56:31 +0000

This sprint is entirely dedicated to fixing the auto-scrolling feature of chatcraft. Currently its auto-scrolling feature is a bit buggy, it works for the most part except for the end of it. It scroll back to the top of the message and then to a random location in the message. I am looking into fixing that or more likely need to create a new auto-scrolling feature. It is the easier way I believe.

So the plan is that try to remove all instances of the auto-scroll to find the issue. After removing it all, for the most part, the height of the message view actively change. This is most likely the cause of the issue. To explain, at the end of the message stream it is recreating the message box again. So it disappear and appear again, changing the height of the view. Another issue maybe is that the buttons at the end that appears when the message is being streamed may also be affecting the height. So for now I need to figure out a way to maybe stop the message box for creating a new one or maintain the height of the message view, and refactor the buttons that appear while streaming.

At the same time I want to make the auto-scrolling smoother. I have added this feature on several parts on this project, like on the auto-complete command window and on the scroll back to top of the message. Having it scroll smoothly would make the streaming of message look appealing. Not with blockly scrolling that makes it heard to read.

Sprint 4 Results

aldrin312 — Thu, 13 Mar 2025 17:10:59 +0000

I only manage to finish 2 out of the 3 things I planned to finished on this sprint. Didn't have much spare time to work with the issues I mentioned in the sprint 4 planning. Though it still worse than I anticipated, while working on this with time constraint, my expectation was I only have time to finish 1 and partially finish another. But managed to able to create a 2nd pull request.

To begin with, the first issue I resolve is the moving popup menu on the chat message box Issue#827. This one wasn't particularly hard to resolve. All I needed to do it put the pop menu on its on flex container so it doesn't depend on a dynamically changing container.

PR#850

Before:

After:

After this one, I moved on to the autocomplete suggestions for the list of commands Issue#840. When initially typing "/" in the input box, a suggestion window shall open showing all of the command. As the user progressively type, it will narrow down the suggestion based on the input. Originally in the issue, they suggested a integrated features from chakra-autocomplete. This would have been nice to use, since it would make implementing this easier and nice features along with it. But it had dependencies issues with the project version of chakra. So this wasn't an option even though I would have liked to use this.

So instead I had to implement my own version of the autocomplete. For the most part I needed to open a window of suggestions based on the user input. Using useeffects to dynamically check the user input and use the value got from that to list the command suggestions that starts with the user inputs.

I decided to design it similar to how discord is doing it. As that was also the example used posted in the issue. Each commands on the list has the command an then the description of the command below it.

I find this visually appealing and also give information about the command frontally.

Overall, this issue wasn't too much of a problem to work on. I thought making it myself would be hard since I wasn't able to use an already made library. But if I break it apart piece by piece, it is less daunting of a task. It is basically a window that pops up when their is an onchange on the input box and what is being suggested is just finding the ones that starts with what the user has inputted.

PR#856

Demo:

4th Sprint Plan

aldrin312 — Thu, 06 Mar 2025 16:48:56 +0000

For this sprint I am planning to finish the chat completion hook. While I was working on it, I notice that the message is no longer being actively streamed to the chat. Where it would progressively add the chat response to the chat like this:

With the changes I made, it just put the entire message at the end of the stream. This took me many hours trying to figure out but to no avail. Got zero progress with it. I have no idea how the streaming massage work. So for now I am taking a brake from this and work on something else for now.

One thing I can do for now is try to fix the bug with the window pop up position and alignment.

Another thing I can work on while I take a break from the issue I having this spring is add the autocomplete feature. Where it would open a window that shows all of the commands when starting to type with "/" Issue #840. I worked with something similar before but with city names. So I got some insight that I can use to start with this issue.

Example with Discord:

After I finish working with these, I can make go back to working with chat completion message streaming. Maybe I have a different perspective with this one by then, hopefully. If not I can maybe get a jump start on the following sprint, that involves fixing auto scrolling. Making it properly work and smoother, much like what chatgpt is doing.

Sprint 3 and Reviews

aldrin312 — Thu, 20 Feb 2025 04:01:30 +0000

Sprint 3 Result

For this sprint, I manage to finish the worked I was assigned to and create the pull request for them, just waiting for reviews on them now. To make sure that they are properly tested and I didn't leave anything out. To elaborate, on this sprint I was assigned to detangle the chat completion part of chat base class. It was attached to the onPrompt part of the ChatBase. If I were too want to make a new chat response on another part of the code, I would have to do most of the things done in onPrompt to implement it. So to make things easier and cleaner, its better to move the chat completion part of the chat class or make it as a hook. Making it as a hook allows it to be easily used anywhere it the code.

Issue: #820

How I started is that, I tried to migrate all of the necessary codes from the onPromt in chatBase to the new method in ChatCraftChaft class, so to create a new response just needs to be chat.completion() . It was mostly done by copying everything that I would need. For the most part, didn't encounter much issues expect when I was using the wrong import.

For the longest time, I could not get the commands to work like how it was originally. Almost everything was copied over so their shouldn't be much of an issue. It turns out when I was creating the imports, I used the auto imports and it used the same class from another file that has the same class name. I was using

import { ChatCraftCommandRegistry } from "./ChatCraftCommandRegistry";

when I should be using

import { ChatCraftCommandRegistry } from "../lib/commands";

This thought me that I should check if I'm using the right imports and try not to use the same name for classes on other files.

Another one particular issue is that I would need to pass in the hooks that was needed. Since I could only use hooks in React functions or on custom React hooks. So I ended up with a method with cluttered variables,

chat.completion(prompt ?? "", chat, user, settings, chatApi, error);

. This wasn't particularly ideal but it works. I looked for ways for hooks to be used in the method without passing them in. But it required changing the general code too much.

Though when I was looking into React Hook, I found that its easier and cleaner to do this if I turn this into a hook. I use the hooks directly inside which reduced the variable needed. Creating a new chat response now just

chatCompletion(prompt, chat)

. This way it is easier to access else where in the code. PR

The Review

I was requested to review one of the pull request, [FIX] Unique File Name. This one wasn't too hard to review. I was able to follow what's going on with the new addition. Everything seems to be fine with it, at least with what I can surmise.

Though from reviewing this, I found a couple of bugs. Not caused my the pull request but something else. First bug I found is that when attaching a new file and removing them, causes the attach button to break and require a page refresh to work again.

Another bug is when adding a new file from an empty list of file in the attached file window, the add file button breaks.

I will be creating issues for these.

This sprint was a learning experience, I learned how hooks functions and how to create them, and reviewing pull request can lead to discoveries. Either discovering bugs or something new to learn.

The 3rd sprint.

aldrin312 — Thu, 13 Feb 2025 10:13:27 +0000

On this 3rd sprint I have been designated an issue where I have to untangle the chat completion part of the ai chat that is coupled in the chat base #819. This issue was found when I was working on another issue where I needed to append ":online" at the end of the models from open ai in order to allow them to search the web for their response But while working into this, their wasn't an easy way to do the chat completion and have that added in the chat. Currently in the project, how the chat completion works is that its tied to the onprompt of the chatbase function. It would be great if its tied to the chat object itself where chat completion could simply be called like chat.completion(). Doing it like this would simplify the code heavily and would make it easier get an AI response and put that response in the chat log.

My progress so far is good, where I have taken out the main feature of the chat completion. Where I can get a response and have that response posted in the chat log. Only thing that's missing is the extra features like the established commands and created chat functions. I should have enough time to finish at least this part by the end of this sprint.

After this, I mostly likely would want to create a hook for this. So its much more reusable and let it be more available for other classes and files. Though I'm not sure how to make hooks with react. Never really created one. So I need to do some research of making hooks. Their should be enough resource out their for react. React Hooks, this should be a good start to look into. Thiers other resources online that would also be good to look at. Considering this, learning how to make hooks should be a good learning experience.

Other than the chat completion issue, I also was requested to review a couple of pull requests. One of which is the update on the dependency, this was generally easy to understand. Just checked all of the new version of the dependency and tested it if anything breaks. I mostly looked at the UI, since some of the new dependency updates was about the UI. One thing I found though was that on the I reviewed, one of the dependency (openai) had a new update on the day I reviewed it. On the PR the openai depenecy was updated from 4.77.0 to 4.83.0 but openai has a new version 4.84.0. So I suggested a change to update to the most latest one.

Another PR I had to look into is the addition of hooks and a provider. I'm not sure what to look in this PR. I'm not familiar with this part of the project. I not sure if I can add any input on this. For now all I can do is see if I can find anything to give an input on. Though it is adding a new hook, possibly I can learn something from looking into this.

While I was testing the PR found a particular bug. Where a submenu of the message box moves when hovering over the message box or on the submenu.

I think the culprit is that the submenu menu position is aligned with the menu icon buttons that pops up when hovering over the message box. The icon buttons pop up so it tries to align with them.

For the most part this sprint their shouldn't be too much of an issue.

2nd Sprint

aldrin312 — Thu, 06 Feb 2025 18:29:25 +0000

For this sprint I was trying to work on several issues for chatcraft.org. One was fixing a UI bug, where the window for the model selection would change sizes depending on the longest model name shown. Since putting an input in the search bar would filter the closest models to the input and reduce the number of models on the list, the window would shrink.

Before:

After:

I quickly fix this by just stopping the window from dynamically changing. By stopping the height and width from changing based one the model list.

Result:

Another quick issue I worked on is adding a back to top at the end of long chat messages. This wasn't too hard to implement since theirs functions already exists that would smoothly scroll to the parts I needed. Simply just added a button and link the function.

On the third one, I wanted to work on making the auto scrolling. Making it smoother and maybe add some features, but I found out that theirs a bug in it. That would make it jump back up to top and then to a random spot. I tried to fix the issue but could not find the cause of it. When I disable all auto scroll events, the bug still happens. My assumption is that it is an underlying issue else where. So for now I stop working on this and work on something else.

That ended up being adding feature where it would let the ai models do a web search by simply appending ":online" at the end of the models. Thinking that all I need to do was create a command that would let user do a web search with ai, it would be easy. Turns out it was more involved. Creating a new command wasn't too hard to do but creating a new chat completion with an appended model was. I went through this having an assumption that I can simply call something and insert prompts into it while also appending ":online" on the model but that wasn't the case. Their wasn't any callable function that I can use to create a new streaming response from the ai. I have to create it. What's needed to be done is function, create hooks and implement them. Considering this, this part would need to bleed to the next sprint. Since theirs a lot work that needs to be done. As how hard they are to implement, I have not a clue. But it should be a good learning process for me.

2nd Sprint Plan.

aldrin312 — Sat, 01 Feb 2025 23:55:10 +0000

For this 2nd sprint I'm planning to work on 3 issues. As I try to get myself more familiarized with the overall code structure of the project. While also I'm having more confidence into tackling more complex issues.

1st Issue

Starting with the easiest issue #806. This issue is about making the window for selecting and searching to model stay static to a single size. To prevent it from moving all over the place when putting an input for on the search bar. This shouldn't be too hard to implement as I only need to remove anything that dynamically changing it size.

2nd Issue.

This is in regards with making the chat not scroll when the AI is creating a response and add a scroll back to top of the response at the bottom #807. This was a similar issue with this before so theirs already conde in the project to work with, but it doesn't work quite well. What I need to do is look into it on why it does not working as expected. Considering this, this might become tricky. Since I do not want to change it too much for the possibility that it might break everything. I notice that there's a hook for auto scrolling, I may just need to disable that on certain circumstance. I also find this online for disable and enabling auto scroll React hook to enable/disable page scroll (Typescript version)
. I can possible use this for the issue. As for return to top of the response part, I think I just need to make it scroll back up to the position where the beginning of the response is. Like the feature of scroll back to top on but instead scrolling back to beginning of the response in the chat.

3rd Issue.

For this issue #801, is to include a search option for Openrouter ai's. Like so, Web Searches. I would need to find where this part is being implemented and use a react effect hooks to add an ":online" at the end of the model. The hook would trigger when the user enter a command "/websearch" before their input. Ideally this issue shouldn't be too hard to implement. Except looking for when the response is being sent to the ai model might be tricky to find. I have some good leads to look into but I'm still not overly familiar with that that part of the project. Still I have something to start with than working with nothing.

For this sprint plan, I am trying to more bold than the previous sprint I did. I'm working with more complex issues this time, though they are not that deep in compare to the other issues but it is still progress. Eventually I want to tackle a complex issue that has a lot of dept into it. For now I'll progress step by step.

First sprint.

aldrin312 — Fri, 24 Jan 2025 19:16:36 +0000

For the first sprint submission, I want to work on something simple first as I try to familiarize myself with the overall code structure of the project chatcraft.org. To start with I just try to improve the some of the UX element of the project. So I created a couple of issues. One of which is add a hover effect on the sidebar items Issue: #783. To summarize the issue, does not have any hover over effects like the other elements on the projects. At the same time I want to add the same functionality if it was selected, showing the buttons for editing and deleting the chat if the mouse is hovered over them. This also would reduce the number of action needed to either delete or edit an item. Before, the user needs to select the item first then they can do edit or delete them.

As shown here:

Implementing this change wasn't too hard to do. As most of the things I need are already in the code. I just need to add the hover functionality on the components and use the functions that was used for selecting the sidebar items. A thing I noticed while working is the method used for changing the background color based whether the the site is in dark or light mode. My first thought on how dark and light mode work was that I need to make the same thing again but for the other mode. But react (I'm assuming) already has something for this instance, where I just need to input the value for whichever mode.

Demo:

Another small thing I implemented was add icons on the header menu for settings and logout, to make them more visible, Issue:#792. I wanted to make them align together with the other menu items. It also make them easier to find. As before I was having issues looking for the settings because I was searching for the settings icon since almost everything else has an icon beside them.

Before the change:

This was just a tiny change but I did discover something that is really neat from working on this. I found out, from looking into how the other items on the menu has icons, that its using icons from react-icons. Where you can easily import the icons and implement them as components. They also work light and dark mode, where they change automatically when the user change color modes. If it weren't for this, I would look for an .png of the settings icon and add the image beside the text and I would need to for light and dark mode.

Dark mode:

Light mode:

Though the things I implemented was not that difficult to do. I learned somethings that I can use on other projects. It also made me more familiar what is the code structure of the project, giving more confidence on tackling more complex issues. At least, on UX/UI elements for now. Later down the line I want to learn how to include onboarding on the project for new users, where it would point out features/functions of the project and instructions on how to use it. Considering when I was using the app for the first time, I wasn't sure what can I do and where to find the function I need.

Plans for new project.

aldrin312 — Tue, 14 Jan 2025 20:20:37 +0000

Starting a new semester, and with that starting a new open source class. For this class I would be working on an open-source web companion for coding with Large Language Models (LLMs). On this project I found a bit of an issue where it needs to reload the page each time I delete a shared chat. It can get annoying when I want to delete multiple shared chats consecutively. I plan post an issue about this and worked on it.

Also in order to delete a shared chat, it needs to be selected first then it can be deleted. Adding unnecessary actions when it can be done with one.

For now I want to tackle the not needing to reload after each deletion of shared chats.

The Plan.

How I want to solve this issue is i would need to figure out how to update the contents of the page without reloading. Considering that the project uses React (I think), that's a good place to start looking for solutions. I also worked with React before on a previous class project before. I can use it as a reference for this issue. Though it has been a while since I worked with React. I would need to do a refresher on it. For now I will start here and figure what are the next steps after.

If it prove to be difficult, another option I can do is have it allow to multiple deletion at once.

For now this is my plan, hope that its not too difficult to do.

The Final Release

aldrin312 — Thu, 12 Dec 2024 00:20:26 +0000

Finally, my contribution is ready to be merged into the main branch of the project. After a bunch or research and testing, considering that this was the first project I worked on with Vue, everything should be good now. The project, Aibyss I worked on is game where the player/user have an AI controlled bot where they can write code to change how it behaves and survives against other AI controlled bots.

Issue: feat: add a button where it would zoom in closely to the bot and follows it.

This was an extension of an issue I worked on before, Zoom in feature. We decided, when I was working on that feature, to split it into 2. To reduce the scope of the issue. It was split into the just the zoom in feature and then the follow + zoom in which is the issue I worked on for this release.

So for this release I have to create a new function where it would make the camera follow the users AI controlled bot and zoom in closely to it based on its size. Since this was an extension of a previous issue I can use some of the functionality from that and integrate it for this release. Though I have to refactor the entire zoom in feature to be able to use for this release and make it generally usable for other potential features that might need it. While I'm at it the maintainer suggested to move it to a util file.

As for the follow feature, I have to grab the coordinate of the bot and use it to set the coordinate of the camera. This took me several iteration to do since I need to update the camera coordinates on each draw frame. To make it follow the bot smoothly. I also need the camera view go outside of the intended stage borders. So I need to adjust and compensate the coordinate so it doesn't go outside. The level of zoom in scale needs to be adjusted as well, based on the users bot size. The camera need to be on the right zoom in level so that bot isn't too large for the zoom in camera view.

Final demo:

This release wasn't free of any issue. We encounter an error which we could not figure out what's causing it. I have a work around it but it is not ideal and preferred that the error is resolved.

Error:

My investigation lead me to a certain line being considered null when first loading the page, but they have been initialized and has values before the error happens. Unless other actions was performed first, like zooming in with mouse wheel, then everything works fine. For now were considering it as a bug with Vue since everything should be initialized but something is considering them or something else as null.

What I learned

To start with, I learned to worked with Vue, some of the Tailwind Css and Typescript. I never worked on these stuff before and happy to include these to my technical skills. Though the most important thing I learned from this is how to work with another person. For this one, I got lucky to have a communicable maintainer for this open source project. He was patient with me, considering that I'm new to Vue and typescript. I like how strict he was with the additions I making. This made me more thorough on how I'm doing my code and everything should follow their coding standards. It made me take this more seriously and I should consider this as professional work.

I also learned from this the importance of a well defined specifications, which I wish this one had. Most of the on this release I worked on assumptions on what should be included or not. After I made a pull request the maintainer added suggestions and modifications, which I'm happy to do, but it extend the time when my PR can be merge into main. This lead to unnecessary time wasted since I could be working for all of these from the beginning or between iterations. Especially since communication time between each input is at least a day.

Overall, this was a great learning experience for me and not to get intimidated by something new. At first I was scared to work on this, but it turns out it wasn't that bad. Just needed to take the first step for it and the everything becomes easy. The first step is always the hardest.

The Progress

aldrin312 — Tue, 03 Dec 2024 23:21:27 +0000

What I've done so far is completed the majority of the required specifications on the issue that I was working on (following player bot while zoomed in). Though this took me a while to work on, even though this was an extension of an issue on worked on before zoom in and out of gamescreen, I had to refactor the code I did before to work with the issue I'm working with now. While I was refactoring, I cleaned up the code I had before, simplified the functions and made them
generally usable for other use cases.

After I got most of the specifications done, I encountered a bug where the function to follow the bot closely doesn't work initially after first loading the page. It had to be manually zoom in and out with mouse wheel first then it works fine. If not, it would break the entire zoom in and out functionality entirely and the page needs to be reloaded. This took me a while to figure out. It did not make sense to me, I had to put in a specific calculated value first then after that any value put in works fine.

What I had to do was this:

const newScale = Math.max(minZoom, Math.min(maxZoom, app.stage.scale.x + 10));
const botPos = { x: firstBot.x, y: firstBot.y };
smoothZoom(botPos, newScale);

As suppose to just this:

const botPos = { x: firstBot.x, y: firstBot.y };
smoothZoom(botPos, 1);

Need to look at it more so I can figure out what's going on. For now it is fixed.

Goal

As for my goals from my planning phase. Everything seems to be moving smoothly, I am trying to be more thorough with my work. Double checking my code, trying follow the maintainers coding standard and style, and thoroughly checking for any potential addition they may add.

Research

Currently I'm looking into more about zooming in canvas with for .vue. So I can figure out what's going on with that issue and if I can improve upon my code or add more functionalities. But what I learned so far from it is that .vue seems to be a good framework to work with for dynamic changes and animations on a canvas. For instance I find it really neat for something to move smoothly on a canvas and zoom in and out also. I thought I would need something complex for that to happen.

Conclusion

I learned so many things working on this project. Especially when this is the first time I'm working with .vue and I don't have a lot of experience with typescript. This might be something that I might use later on for my personal project. Though I need more research on it to actually do that which will come in time as I work with it more.