Merge branch 'main' into feat/review-refactor-#1

src/managers/Messages.ts

@@ -9,6 +9,7 @@ export enum MessageToWebViewType {
   TOKEN_COUNT,
   CHOSEN_CODE_UPDATED,
   SUGGESTIONS,
+  UPDATE_FILE_LOADING_STATUS,
 }
 
 export enum MessageToVSCodeType {
@@ -25,6 +26,7 @@ export enum MessageToVSCodeType {
   OPEN_SELECTION,
   MARK_AS_APPLIED,
   EDIT_API_KEY,
+  GET_WORKSPACE_FILES,
 }
 export type MessageToWebView =
   | { type: MessageToWebViewType.CLEAR_AND_FOCUS_ON_INPUT }
@@ -37,6 +39,7 @@ export type MessageToWebView =
   | { type: MessageToWebViewType.API_KEY_MISSING_MODELS; models: string[] }
   | { type: MessageToWebViewType.TOKEN_COUNT; value: number }
   | { type: MessageToWebViewType.CHOSEN_CODE_UPDATED; code: string }
+  | { type: MessageToWebViewType.UPDATE_FILE_LOADING_STATUS; inProgress: boolean; progress: number; currentFilePath?: string }
   | {
       type: MessageToWebViewType.SUGGESTIONS;
       suggestions: string[];
@@ -64,4 +67,5 @@ export type MessageToVSCode =
       reapply: boolean;
     }
   | { type: MessageToVSCodeType.OPEN_SELECTION; minionTaskId: string }
-  | { type: MessageToVSCodeType.MARK_AS_APPLIED; minionTaskId: string };
+  | { type: MessageToVSCodeType.MARK_AS_APPLIED; minionTaskId: string }
+  | { type: MessageToVSCodeType.GET_WORKSPACE_FILES };

src/minionTasks/generateDescriptionForWorkspaceFiles.ts

@@ -24,17 +24,17 @@ export const countKnowledgeTokens = (content: string) => ({
   [GPTMode.QUALITY]: countTokens(content, GPTMode.QUALITY),
 });
 
-export const generateDescriptionForFiles = async (files: WorkspaceFileData[]) => {
+// TODO: this loop is no needed anymore - refactor this in future to just accept a WorkspaceFileData not WorkspaceFileData[]
+export const generateDescriptionForFiles = async (files: WorkspaceFileData[], onProcessStart?: () => void) => {
   let i = 0;
   const promises = [];
   while (files.length - 1 >= i) {
     const file = files[i];
     const { path, content } = file;
-    console.log('GENERATING DATA FOR: ', path, ' iteration: ', i);
+    console.log('GENERATING DATA FOR: ', path);
     try {
-      const data = await mutateCreateFileDescription(file);
+      const data = await mutateCreateFileDescription(file, onProcessStart);
       i++;
-
       if (data) {
         const { description, functions } = data;
         promises.push({

src/minionTasks/knowledge/knowledge.ts

@@ -1,8 +1,10 @@
 import { WorkspaceFilesKnowledge, countKnowledgeTokens } from '../generateDescriptionForWorkspaceFiles';
 import { oopKnowledge } from './oopKnowledge';
+import { reactKnowledge } from './reactKnowlede';
 import { scssKnowledge } from './scssKnowledge';
 import { typescriptKnowledge } from './typescriptKnowledge';
 
+// TODO: add knowledge about other languages eg. python
 export const minionsKnowledge: WorkspaceFilesKnowledge[] = [
   {
     id: 'InfoAboutTypescript',
@@ -24,4 +26,10 @@ export const minionsKnowledge: WorkspaceFilesKnowledge[] = [
     content: typescriptKnowledge,
     summaryContentTokensCount: countKnowledgeTokens(scssKnowledge),
   },
+  {
+    id: 'InfoAboutReact',
+    description: 'Info about React library, use it if project use React and if you need to know how to use it and what it is',
+    content: reactKnowledge,
+    summaryContentTokensCount: countKnowledgeTokens(reactKnowledge),
+  },
 ];

src/minionTasks/knowledge/reactKnowlede.ts

@@ -0,0 +1,113 @@
+export const reactKnowledge = `
+Sure, here are examples along with principles for writing correct React components and code:
+
+1. **Single Responsibility Principle:** Each component should ideally be responsible for only one function. 
+
+Example: 
+# jsx
+// Good: Single responsibility
+const FetchDataComponent = ({ url }) => {
+  const data = useFetch(url);
+  return <DataDisplayComponent data={data} />
+}
+#
+
+2. **Key in Lists:** Always use the key prop when creating dynamic lists in React. 
+
+Example: 
+# jsx
+// Good: Adding key prop to each child
+const ListComponent = ({items}) => (
+  <ul>
+    {items.map((item) => <li key={item.id}>{item.name}</li>)}
+  </ul>
+);
+#
+3. **Keeping Components Pure:** Avoid directly modifying a component's state. Instead, use setState(). 
+
+Example: 
+# jsx
+// Good: Updating state via setState
+class Counter extends React.Component {
+  state = { count: 0 }
+
+  increment = () => {
+    this.setState(prevState => ({ count: prevState.count + 1 }));
+  };
+
+  render() {
+    return <button onClick={this.increment}>{this.state.count}</button>
+  }
+}
+# 
+4. **PropTypes Usage:** PropTypes helps catch bugs by checking types passed through props. 
+
+Example: 
+# jsx
+import PropTypes from 'prop-types';
+
+const DataDisplayComponent = ({ data }) => <div>{data}</div>
+
+DataDisplayComponent.propTypes = {
+  data: PropTypes.number.isRequired,
+}
+# 
+5. **Functional Components and destructuring props:** Use functional components instead of class components, where possible. 
+
+Example:  
+# jsx
+// Good: Using functional components and destructuring props
+const TodoItem = ({ todo }) => <li>{todo.title}</li>;
+# 
+6. **Centralize State Management with Context:** Use React Context or libraries like Redux or MobX to centralize your state. 
+
+Example: 
+# jsx
+import React, { createContext, useContext } from "react";
+
+// Create a context
+const StateContext = createContext();
+
+// Provide context to child components
+const StateProvider = ({ children }) => {
+  const [state, setState] = useState("example state");
+
+  return (
+    <StateContext.Provider value={{ state, setState }}>
+      {children}
+    </StateContext.Provider>
+  );
+};
+
+// Consume context within a child component
+const ChildComponent = () => {
+  const { state, setState } = useContext(StateContext);
+
+  return <div>{state}</div>;
+};
+
+<StateProvider>
+  <ChildComponent />
+</StateProvider>
+# 
+7. **Using ESLint:** ESLint is a tool that can show you common mistakes, making your codes stricter and easier to understand. 
+
+Example: 
+
+First, you can install ESLint via npm:
+# 
+npm i eslint --save-dev
+# 
+Then, create a configuration file named .eslintrc and define rules in the configuration object:
+# json
+{
+    "rules": {
+        "no-console": "off",
+        "indent": ["error", 2],
+        "quotes": ["error", "double"]
+    }
+}
+# 
+
+These are best practices and principles with examples on how to write correct React components and code. Always comment your code where necessary and keep your code clean, efficient, and don't repeat yourself. These might not fit all projects due to different contexts and conditions, so make sure to adapt as necessary.
+`.trim();

src/minionTasks/mutators/mutateCreateFileDescription.ts

@@ -23,7 +23,9 @@ function createPrompt(fileData: WorkspaceFileData) {
   });
 }
 
-export async function mutateCreateFileDescription(fileData: WorkspaceFileData) {
+export async function mutateCreateFileDescription(fileData: WorkspaceFileData, onProcessStart?: () => void) {
+  onProcessStart?.();
+
   const promptWithContext = createPrompt(fileData);
   const mode: GPTMode = GPTMode.FAST;