new features on website

Author: MostlyKIGuess

yappus-website/src/components/docs/ContextAwarenessSection.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+export default function ContextAwarenessSection() {
+  return (
+    <div className="py-16 px-4 md:px-8 max-w-6xl mx-auto" id="context-awareness">
+      <h3 className="text-4xl font-semibold mb-4 text-emerald-400">
+        Context Awareness
+      </h3>
+      <div className="mt-10 space-y-8 text-gray-300">
+        <div>
+          <h3 className="text-2xl font-semibold text-white mb-4">Persistent Conversation Context</h3>
+          <p className="mb-4">
+            Yappus Terminal maintains context between your queries, enabling more coherent and relevant AI responses.
+            The terminal preserves conversation history, allowing the AI to reference previous exchanges and provide
+            more accurate answers based on the full context of your conversation.
+          </p>
+          
+          <div className="bg-gray-800 rounded-lg p-4 font-mono text-sm mt-4">
+            <p className="text-green-400">$ yappus What is JavaScript?</p>
+            <p className="text-gray-400 mt-2">JavaScript is a programming language commonly used for web development...</p>
+            <p className="text-green-400 mt-3">$ yappus What about TypeScript?</p>
+            <p className="text-gray-400 mt-2">TypeScript is a superset of JavaScript that adds static type definitions...</p>
+          </div>
+        </div>
+        
+        <div>
+          <h3 className="text-2xl font-semibold text-white mb-4">File Context Integration</h3>
+          <p className="mb-4">
+            Yappus seamlessly incorporates file content into your AI conversations. Reference files using
+            the <code className="bg-gray-700 px-1 rounded">/file</code> command to make them part of the
+            conversation context.
+          </p>
+          
+          <div className="bg-gray-800 rounded-lg p-4 font-mono text-sm mt-4">
+            <p className="text-green-400">$ yappus /file src/utils.js</p>
+            <p className="text-gray-400 mt-2">File content added to conversation context.</p>
+            <p className="text-green-400 mt-3">$ yappus What does the parseConfig function do?</p>
+            <p className="text-gray-400 mt-2">The parseConfig function in your utils.js file parses the JSON configuration...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

yappus-website/src/components/docs/DocumentationSection.tsx

@@ -5,7 +5,7 @@ import HistorySection from "./HistorySection";
 import ConfigSection from "./ConfigSection";
 import CommandsSection from "./CommandsSection";
 import ExamplesSection from "./ExamplesSection";
-
+import ContextAwarenessSection from "./ContextAwarenessSection";
 export default function DocumentationSection() {
   return (
     <section id="docs" className="px-4 py-20 max-w-7xl mx-auto">
@@ -19,6 +19,7 @@ export default function DocumentationSection() {
         <HistorySection />
         <ConfigSection />
         <CommandsSection />
+        <ContextAwarenessSection/>
         <ExamplesSection />
       </div>
     </section>

yappus-website/src/components/docs/ExamplesSection.tsx

@@ -24,6 +24,16 @@ export default function ExamplesSection() {
           query="Explain the difference between tar and zip"
           response="TAR: Archive tool that bundles files without compression by default. Add compression with flags like -z (gzip). Good for preserving Unix permissions.\n\nZIP: Both archives and compresses files. Better cross-platform compatibility with Windows. Allows adding/extracting single files without processing the whole archive."
         />
+        <ExampleQuery
+          query="Code Analysis with File Context"
+          response={`$ yappus /file src/app.js
+File content added to conversation context.
+$ yappus What could be improved in this code?
+Based on the file content, here are some suggestions:
+1. Add input validation for the user data
+2. Implement error handling for the API calls
+3. Consider using async/await instead of promises`}
+        />
       </div>
     </div>
   );

yappus-website/src/components/home/FeaturesSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FaTerminal, FaHistory, FaCode } from "react-icons/fa";
+import { FaTerminal, FaHistory, FaCode, FaAddressBook, FaFolderOpen, FaLaptop } from "react-icons/fa";
 import FeatureCard from "../ui/FeatureCard";
 
 export default function FeaturesSection() {
@@ -23,6 +23,21 @@ export default function FeaturesSection() {
           title="Syntax Highlighting"
           description="Clear syntax highlighting for code blocks in your AI responses."
         />
+        <FeatureCard
+          icon={<FaAddressBook className="text-orange-400" size={24} />}
+          title="Context Awareness"
+          description="Maintains conversation context across commands and integrates file contents for relevant responses."
+        />
+         <FeatureCard
+          icon={<FaLaptop className="text-green-400" size={24} />}
+          title="Local Mode (Coming Soon)"
+          description="Interact using a local LLM."
+        />
+         <FeatureCard
+          icon={<FaFolderOpen className="text-green-400" size={24} />}
+          title=" File Exploration (Coming Soon)"
+          description="Explore your file system directly using yappus."
+        />
       </div>
     </section>
   );

yappus-website/src/components/home/TerminalPreview.tsx

@@ -28,6 +28,18 @@ export default function TerminalPreview() {
           <p className="mt-1 text-yellow-400">
             find / -type f -size +100M -exec ls -lh {} \; | sort -rh
           </p>
+          <p className="mt-4 text-gray-400">&gt; yappus /file package.json</p>
+          <p className="mt-2 text-blue-400">
+            Reading content from: package.json
+            This `package.json` file is the project&apos;s manifest. It describes the project&apos;s name, version, dependencies, and scripts.  Essentially, it tells your computer (and tools like Node.js) everything it needs to know about the project to build and run it.  Specifically, this one for a Next.js site using various frontend libraries..
+          </p>
+          <p className="text-gray-400 mt-4">&gt; yappus What dependencies does this project use?</p>
+          <p className="mt-2 text-blue-400">
+            Based on your package.json, this project uses:
+            - React v18.2.0
+            - Next.js v13.4.1
+            - TailwindCSS v3.3.2
+          </p>
           <p className="text-gray-400 mt-4">&gt; _</p>
         </div>
       </div>