ChatCraft week 2: Research and troubleshooting
Tags: chatcraft, opensource, git, chakra
Published: 2024-01-19 23:04:07

---
series: Collaborating on ChatCraft
---

# Tech Stack Research

In my second week of working on [ChatCraft](https://github.com/tarasglek/chatcraft.org), I did some research on two technologies used by ChatCraft, [Chakra UI](https://chakra-ui.com/) and [Mermaid JS](https://mermaid.js.org/). I compiled my findings into wiki pages as well as a PowerPoint, which I presented to the team during our weekly progress meeting. See my powerpoint [here](https://seneca-my.sharepoint.com/:p:/g/personal/kliu57_myseneca_ca/EZDlzccj-NxHkWO4USeVAm8BezI5HeFB-iGYFvlUql9dPw?e=P68qBY).

### Chakra UI

![chakra banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mtxyx13uvde4v8292by.png)

[ChakraUI](https://chakra-ui.com/) is a [React](https://react.dev/) UI component library and framework, known for its easily customizable components. See the wiki [here](https://github.com/humphd/osd700-winter-2024/wiki/Tech-Stack-%E2%80%90-Chakra-UI).

### Mermaid JS

![mermaid banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sexdzcu2jzy85ugvq01b.png)

[Mermaid JS](https://mermaid.js.org/) is a JavaScript library which allows you to write code that translates into diagrams and flowcharts. See the wiki [here](https://github.com/humphd/osd700-winter-2024/wiki/Tech-Stack-%E2%80%90-Mermaid-JS).

# Troubleshooting sops

Following up from my last [blog](https://dev.to/katiel/working-with-chatcraft-29ff), I was able to get an OpenAI key using sops. However, the OpenAI key I got from sops did not work. I contacted other team members, who also said that the key stopped working for them, although it worked for them last week. After posting on our team discord, the project admin was able to confirm and fix the problem.

I also faced an [issue](https://github.com/tarasglek/chatcraft.org/issues/347) with the commands in the [README.sops.md](https://github.com/tarasglek/chatcraft.org/blob/main/README.sops.md) file not working for me. I spoke with other team members who also told me those instructions did not work for them as well.

I was able to find two alternative solutions with the help of my team members.

Solution 1:

```
./scripts/sops_age_key.sh
export SOPS_AGE_KEY=<PASTE_KEY_RECEIVED_FROM_LAST_COMMAND>
sops -d sops/keys.enc.yaml
```

Solution 2:

```
read -s SSH_TO_AGE_PASSPHRASE; export SSH_TO_AGE_PASSPHRASE
# Type passphrase then press [Enter]
export SOPS_AGE_KEY=$(ssh-to-age -private-key < ~/.ssh/id_ed25519)
sops -d sops/keys.enc.yaml
```

The second set of commands in the the [README.sops.md](https://github.com/tarasglek/chatcraft.org/blob/main/README.sops.md) which was meant for users who have passphrases set, worked for me as long as I entered an empty passphrase and hit `[Enter]`.

# Pull Request

I created an [issue](https://github.com/tarasglek/chatcraft.org/issues/347) and [PR](https://github.com/tarasglek/chatcraft.org/pull/348) to remove the non-functioning commands from [README.sops.md](https://github.com/tarasglek/chatcraft.org/blob/main/README.sops.md), which was merged.

# Issues

I signed up to work on [this issue](https://github.com/tarasglek/chatcraft.org/issues/345). Currently, [ChatCraft](https://chatcraft.org) allows users to switch between two providers, OpenAI and OpenRouter, however it only stores the API key of one provider. That means when we switch to a different provider, the old key is cleared from storage. This clearing of the key was something I worked on in a [past PR](https://github.com/tarasglek/chatcraft.org/pull/308). If we change the code to allow for the storage of multiple providers, users could toggle between the two without having to re-input the API key.

# Code Reviews

I did a code [review of PR#328](https://github.com/tarasglek/chatcraft.org/pull/328#pullrequestreview-1820101448), which was a simple documentation fix. I tested and approved the PR.

I did a code [review of PR#342](https://github.com/tarasglek/chatcraft.org/pull/342#pullrequestreview-1827969446). I scheduled a call with Amnish to make sure I tested everything that is meant to be tested and to show him the issues I encountered. I added comments and requested changes on the PR.

# Troubleshooting with Team Members

I helped Rachit troubleshoot a problem he was facing with a blank screen coming up when he ran `pnpm dev`.

We tried fetching the latest code and I asked him to try running the following commands to get his branch up to date with main. (Found from [this StackOverflow post](https://stackoverflow.com/questions/33484153/branch-is-behind-main)). This fixed the blank screen issue. I believe the problem was he was not using the correct commands to get his branch up to date with main.

To fetch the latest code: (Only use this if all your code is pushed to GitHub or you may risk losing work)

```
git fetch --all
git reset --hard origin/main
```

If your branch is behind of main then do:

```
git checkout main (you are switching your branch to main)
git pull 
git checkout yourBranch (switch back to your branch)
git merge main
```