Merge pull request #1 from stacklok/help-guides

Help guides

Author: Luke Hinds

package-lock.json

@@ -17,14 +17,20 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.4",
+    "@types/prismjs": "^1.26.5",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.462.0",
+    "prismjs": "^1.29.0",
     "react": "^18.3.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^7.0.2",
+    "react-syntax-highlighter": "^15.6.1",
     "recharts": "^2.14.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.5.5",

package.json

@@ -0,0 +1,98 @@
+# Continue Setup Guide
+
+First off all, you will need to install the Continue Extension. 
+
+You can do this by running the following command:
+
+```bash
+code --install-extension continue.continue
+```
+
+Alternatively, you can install the extension from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Continue.continue).
+
+
+Once you have installed the extension, you should be able to see the Continue icon in the Activity Bar.
+
+![Continue Icon](./images/continue.png)
+
+## Steps to Complete Setup
+
+### 1. Configure Continue
+
+Within VSCode open the command palette and run the `Continue: New Sesstion`
+
+This will bring up the Continue chat window. 
+
+Select the cog icon in the top right corner to open the settings.
+
+Configure your LLM provider as per normal with Continue, but change the `apiBase`
+value as follows:
+
+```json
+{
+  "apiBase": "http://localhost:8989/openai",
+  }
+}
+```
+
+For example, to configure the Anthropic provider, you would use the following configuration:
+
+```json
+{
+  "title": "anthropic claude-3-5-sonnet",
+  "provider": "anthropic",
+  "model": "claude-3-5-sonnet-20241022",
+  "apiKey": "yourkey",
+  "apiBase": "http://localhost:8989/anthropic"
+},
+```
+
+The same follows for OpenAI, Ollama, vLLM and any other provider you wish to use.
+
+```json
+"models": [
+    {
+      "title": "vllm-qwen2.5-coder-14b-instruct",
+      "provider": "vllm",
+      "model": "Qwen/Qwen2.5-Coder-14B-Instruct",
+      "apiKey": "key",
+      "apiBase": "http://localhost:8989/vllm"
+    },
+    {
+      "title": "openai",
+      "provider": "openrouter",
+      "model": "gpt-4o-2024-11-20",
+      "apiBase": "http://localhost:8989/openai",
+      "apiKey": "key"
+    },
+    {
+      "title": "anthropic claude-3-5-sonnet",
+      "provider": "anthropic",
+      "model": "claude-3-5-sonnet-20241022",
+      "apiKey": "key",
+      "apiBase": "http://localhost:8989/anthropic"
+    },
+    {
+      "title": "ollama qwen2.5-coder-7b-instruct",
+      "provider": "ollama",
+      "model": "sammcj/qwen2.5-coder-7b-instruct:q8_0",
+      "apiBase": "http://localhost:8989/ollama"
+    }
+  ],
+```
+
+For auto completion, you can add the following to your settings.json file:
+
+```json
+"tabAutocompleteModel": {
+  "title": "ollama",
+  "provider": "ollama",
+  "model": "codellama:7b-code",
+  "apiBase": "http://127.0.0.1:8989/ollama"
+},
+```
+
+You can now start using Continue as before, but with the added benefit
+extra privacy and control over your data.
+
+![Continue Window](./images/continue-two.png)

public/help/continue-setup.md

@@ -0,0 +1,76 @@
+# 🤖 CoPilot Setup Guide
+
+Welcome to the setup guide for configuring CoPilot integration with **CodeGate**. 
+
+
+---
+
+## 📋 Prerequisites
+
+Before you begin, make sure you have the following:
+- ✅ An active GitHub account
+- ✅ A GitHub CoPilot subscription
+- ✅ A CodeGate account
+
+---
+
+## 🛠️ Setup Instructions
+
+### Install the CodeGate CA
+
+To enable CodeGate, you’ll need to install its Certificate Authority (CA) into your operating system’s trust store.
+
+> **Why is this needed?**  
+> The CodeGate CA allows your machine to securely intercept and modify traffic between GitHub CoPilot and your IDE.  
+> ✨ **Don’t worry!** The decrypted traffic stays on your local machine and never leaves.
+
+
+#### 🍎 **For MacOS Users**
+
+Run the following command in your terminal to install the CA:
+
+```bash
+sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain codegate_volume/certs/ca.crt
+```
+
+#### 🖥️ For Windows Users
+
+Use this PowerShell command:
+
+```Powershell
+Import-Certificate -FilePath "certs\\ca.crt" -CertStoreLocation Cert:\\LocalMachine\\Root
+```
+
+#### 🐧 For Linux Users
+
+Run these commands to install the CA:
+
+```bash
+sudo cp certs/ca.crt /usr/local/share/ca-certificates/codegate.crt
+sudo update-ca-certificates
+```
+
+    Note: You might need to restart your IDE after adding the certicates
+
+### Configure CoPilot Settings to Use CodeGate
+
+Update your CoPilot configuration to use CodeGate as a proxy. Add the following to your project configuration:
+
+```json
+{
+  "http.proxy": "https://localhost:8990",
+  "http.proxyStrictSSL": true,
+  "http.proxySupport": "on",
+  "github.copilot.advanced": {
+    "debug.useNodeFetcher": true,
+    "debug.useElectronFetcher": true,
+    "debug.testOverrideProxyUrl": "https://localhost:8990",
+    "debug.overrideProxyUrl": "https://localhost:8990
+  }
+```
+
+### Start Coding with the Privacy Protections and Security of CodeGate in place
+
+That’s it—you’re all set! 
+
+Go forth and build something amazing! 🚀✨

public/help/copilot-setup.md

@@ -7,6 +7,7 @@ import { Chat } from "./components/Chat";
 import { usePromptsStore } from "./hooks/usePromptsStore";
 import { Sidebar } from "./components/Sidebar";
 import { useSse } from "./hooks/useSse";
+import { Help } from "./components/Help";
 
 function App() {
   const { prompts, loading, fetchPrompts } = usePromptsStore();
@@ -29,6 +30,7 @@ function App() {
               <Routes>
                 <Route path="/" element={<Dashboard />} />
                 <Route path="/prompt/:id" element={<Chat />} />
+                <Route path="/help/:section" element={<Help />} />
               </Routes>
             </div>
           </div>

public/help/images/continue-two.png

@@ -4,16 +4,40 @@ import { Separator } from "./ui/separator";
 
 export function Header() {
   return (
-    <header className="flex-shrink-0 h-16 px-3 items-center flex w-full bg-teal-25 opacity-1 border-b-blue-200 border-b ">
-      <SidebarTrigger />
-      <Separator orientation="vertical" className="h-8 mx-3" />
-      <nav className="mx-1 flex">
-        <Link to="/">
-          <h1 className="text-2xl w-max flex font-semibold">
-            CodeGate Dashboard
-          </h1>
-        </Link>
-      </nav>
+    <header className="flex-shrink-0 h-16 px-3 items-center flex w-full bg-teal-25 opacity-1 border-b-blue-200 border-b">
+      <div className="flex items-center flex-1">
+        <SidebarTrigger />
+        <Separator orientation="vertical" className="h-8 mx-3" />
+        <nav className="mx-1 flex">
+          <Link to="/">
+            <h1 className="text-2xl w-max flex font-semibold">
+              CodeGate Dashboard
+            </h1>
+          </Link>
+        </nav>
+      </div>
+      <div className="flex items-center relative group mr-16">
+        <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-gray-100 transition-colors">
+          Help
+        </div>
+        {/* Dropdown menu */}
+        <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
+          <div className="py-1">
+            <Link 
+              to="/help/continue-setup" 
+              className="block px-5 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors"
+            >
+              Continue Setup
+            </Link>
+            <Link 
+              to="/help/copilot-setup" 
+              className="block px-5 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors"
+            >
+              CoPilot Setup
+            </Link>
+          </div>
+        </div>
+      </div>
     </header>
   );
 }

public/help/images/continue.png

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Markdown } from './Markdown';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism-tomorrow.css';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
+
+export function Help() {
+  const { section } = useParams();
+  const [content, setContent] = useState<string>('');
+
+  useEffect(() => {
+    const fetchContent = async () => {
+      try {
+        const response = await fetch(`/help/${section}.md`);
+        if (!response.ok) {
+          throw new Error('Failed to load content');
+        }
+        const text = await response.text();
+        setContent(text);
+        
+        // Allow content to render before highlighting
+        setTimeout(() => {
+          Prism.highlightAll();
+        }, 0);
+      } catch (error) {
+        console.error('Error loading help content:', error);
+        setContent('# Error\nFailed to load help content. Please try again later.');
+      }
+    };
+
+    fetchContent();
+  }, [section]);
+
+  return (
+    <div className="w-full px-4">
+      <div 
+        className="
+          bg-white rounded-lg shadow-sm p-6 mx-auto
+          max-w-[1200px] min-w-[800px]
+          max-h-[calc(100vh-8rem)] overflow-y-auto
+          scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100
+          hover:scrollbar-thumb-gray-400 
+          [&::-webkit-scrollbar]:w-2
+          [&::-webkit-scrollbar-track]:bg-gray-100
+          [&::-webkit-scrollbar-thumb]:bg-gray-300
+          [&::-webkit-scrollbar-thumb]:rounded-full
+          [&::-webkit-scrollbar-thumb:hover]:bg-gray-400
+        "
+      >
+        <Markdown 
+          className="
+            prose prose-lg max-w-none
+            prose-headings:text-gray-900 
+            prose-h1:text-3xl prose-h1:font-bold prose-h1:mb-8
+            prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-8 prose-h2:mb-4
+            prose-h3:text-xl prose-h3:font-medium prose-h3:mt-6 prose-h3:mb-3
+            prose-p:text-gray-600 prose-p:leading-relaxed
+            prose-code:text-blue-600
+            prose-pre:bg-gray-900 prose-pre:rounded-lg prose-pre:p-4
+            prose-pre:shadow-md
+          "
+        >
+          {content}
+        </Markdown>
+      </div>
+    </div>
+  );
+}

src/App.tsx

@@ -0,0 +1,44 @@
+import { Link, Outlet, useLocation } from 'react-router-dom';
+
+export function HelpLayout() {
+  const location = useLocation();
+
+  const isActive = (path: string) => {
+    return location.pathname === path;
+  };
+
+  const linkClass = (path: string) => {
+    return `block px-4 py-2 rounded-lg transition-colors ${
+      isActive(path)
+        ? 'bg-blue-100 text-blue-700 font-medium'
+        : 'text-gray-600 hover:bg-gray-100'
+    }`;
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-8">Help Center</h1>
+      <div className="flex gap-8">
+        <aside className="w-64 flex-shrink-0">
+          <nav className="flex flex-col gap-2 sticky top-8">
+            <Link
+              to="/help/continue-setup"
+              className={linkClass('/help/continue-setup')}
+            >
+              Continue Setup
+            </Link>
+            <Link
+              to="/help/copilot-setup"
+              className={linkClass('/help/copilot-setup')}
+            >
+              CoPilot Setup
+            </Link>
+          </nav>
+        </aside>
+        <main className="flex-1 min-w-0">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}