Merge branch 'next' into ui/stephen/fix-ui-issues

rajinderjhol · Oct 8, 2024 · 702841c · 702841c
1 parent abfcf3b
commit 702841c
Show file tree

Hide file tree

Showing 13 changed files with 1,122 additions and 83 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -1 +1,21 @@
-TODO
+The MIT License (MIT)
+
+Copyright (c) 2024 FireJet Pte. Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,82 +1,68 @@
-# CtoAi
+<div align="center">
+  <p style="font-size: 3em; margin-bottom: 0px;">Taffy 🍬</p>
+  <p style="font-style: italic;">AI Code Editor focused on multi file editing and better context</p>
+![Placeholder gif demonstrating Taffy in action](#)
+</div>
 
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
 
-✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨.
+## Getting Started
 
-[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!
+1. Add to VSCode from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=FireJet.taffy)
+2. Add either a OpenAI, Anthropic or DeepSeek API Key
+3. Select any portion of your code, then press `Ctrl+Shift+M` to ask a question
 
-## Finish your remote caching setup
+## Motivation
 
-[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/FeT2StV652)
+We found that often with AI code assistants, they just don't seem smart enough to generate the correct code in the context required. Examples include
 
+1. Not follow codebase best practices
+2. Using outdated versions of libraries
+3. Not understanding types within the codebase
+4. Generation being limited to single file edits
 
-## Run tasks
+The thing is, all of these are not outside the capabilities of modern LLMs - with the right information in the context window, all these issues can be resolved.
 
-To run the dev server for your app, use:
+However, with alternative AI code assistants, they fall fall short in one of these ways:
 
-```sh
-npx nx serve cto-ai
-```
+1. Not having multi-file support
+2. Not having sufficient context to answer the question correctly
+3. Racking up large API bills because of large context windows
 
-To create a production bundle:
+With our initial release, we've solved multi-file support, and with subsequent releases we hope to solve the other problems as well.
 
-```sh
-npx nx build cto-ai
-```
+## Features
+### Current Features
 
-To see all available targets to run for a project, run:
+- Multi File Editing
+- Fast edits (Only edit the section being updated)
+- LLM Tools (LLM can read other files in your codebase, and make necessary updates)
+- `@mentions` files in your codebase to reference them
+- Bring Your Own key (BYOK)
+- MIT Licensed
 
-```sh
-npx nx show project cto-ai
-```
-        
-These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.
-
-[More about running tasks in the docs &raquo;](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+### Upcoming Features
 
-## Add new projects
+Right now, we have a base of features that we believe make a good foundation for the developer experience that we expect from an AI code assistant. 
 
-While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature.
+We have several ideas of how we can improve the developer experience, and we need your feedback and votes in order to better shape the development of this product.
 
-Use the plugin's generator to create new projects.
+- **Small Model Context Big Model Thinking**: [Upvote this feature](#)
+- **Types Context**: [Upvote this feature](#)
+- **Library Context**: [Upvote this feature](#)
+- **Diagnostics Context**: [Upvote this feature](#)
+- **Best Practices Context**: [Upvote this feature](#)
 
-To generate a new application, use:
-
-```sh
-npx nx g @nx/react:app demo
-```
+## Local Development
 
-To generate a new library, use:
+To run Taffy locally:
 
 ```sh
-npx nx g @nx/react:lib mylib
+npm i          # Install dependencies
+npm run serve  # Start the development server
 ```
 
-You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list <plugin-name>` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE.
-
-[Learn more about Nx plugins &raquo;](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry &raquo;](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-
-
-[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-
-## Install Nx Console
-
-Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
-
-[Install Nx Console &raquo;](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-
-## Useful links
-
-Learn more:
+Press `F5` to debug or run it in the standard VSCode extension host.
 
-- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects)
-- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+## License
 
-And join the Nx community:
-- [Discord](https://go.nx.dev/community)
-- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl)
-- [Our Youtube channel](https://www.youtube.com/@nxdevtools)
-- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+MIT
diff --git a/apps/ui/src/app/ChatPanel.tsx b/apps/ui/src/app/ChatPanel.tsx
@@ -1,30 +1,18 @@
-import { Badge, Button, Textarea } from '@taffy/components';
+import { Button } from '@taffy/components';
 import { Send, Settings } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { ButtonWithHotkey } from '../components/ButtonWithHotkey';
 import { chatStore, continuePrompt } from '../stores/chat-store';
 import { updateChat } from '../stores/update-prompt';
-import { toggleModeHandler } from './KeyboardShortcuts/handlers';
+import { RichTextArea } from './RichTextArea';
 import { Messages } from './Messages';
 
 export function ChatPanel() {
   const showSettings = chatStore.use('showSettings');
   const scrollAreaRef = useRef<HTMLDivElement>(null);
-  const mode = chatStore.use('mode');
+  // const mode = chatStore.use('mode');
   const [input, setInput] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  useEffect(() => {
-    const handleWindowFocus = () => {
-      if (inputRef.current) {
-        inputRef.current.focus();
-      }
-    };
-    handleWindowFocus();
-    window.addEventListener('focus', handleWindowFocus);
-    return () => {
-      window.removeEventListener('focus', handleWindowFocus);
-    };
-  }, []);
 
   const handleSend = async () => {
     if (!input.trim()) return;
@@ -56,7 +44,8 @@ export function ChatPanel() {
           <Badge>{mode}</Badge>
         </ButtonWithHotkey> */}
         <div className="flex gap-2 relative mt-2">
-          <Textarea
+          <RichTextArea />
+          {/* <Textarea
             ref={inputRef}
             value={input}
             onChange={(e) => {
@@ -69,8 +58,8 @@ export function ChatPanel() {
               }
             }}
             placeholder="Type your message..."
-            className="flex-1 pr-10 border-none text-xs"
-          />
+            className="flex-1 pr-10 border-none"
+          /> */}
           <div className="flex flex-col absolute right-0 inset-y-0 p-1.5 gap-1.5">
             <ButtonWithHotkey hideHint keys="enter" action={handleSend}>
               <Button