Merge pull request #6355 from remix-project-org/modular_conversation_starters

dynamic conversation starters

Author: STetsing

apps/remix-ide-e2e/src/tests/pinned_plugin.test.ts

@@ -11,7 +11,9 @@ module.exports = {
   'Check if RemixAI plugin is pinned #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('*[data-id="movePluginToLeft"]')
-      .waitForElementVisible('*[data-id="remix-ai-assistant-starter-0"]')
+      .waitForElementVisible('*[data-id="remix-ai-assistant-starter-beginner-0"]')
+      .waitForElementVisible('*[data-id="remix-ai-assistant-starter-intermediate-1"]')
+      .waitForElementVisible('*[data-id="remix-ai-assistant-starter-expert-2"]')
       .click('*[data-id="movePluginToLeft"]')
       .waitForElementVisible('*[data-pinnedPlugin="movePluginToRight-remixaiassistant"]')
   },

libs/remix-ui/remix-ai-assistant/src/components/chat.tsx

@@ -2,16 +2,12 @@ import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 import copy from "copy-to-clipboard"
 import { ChatMessage, assistantAvatar } from "../lib/types"
-import React from 'react'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import React, { useState, useEffect } from 'react'
 import { CustomTooltip } from "@remix-ui/helper"
-
-const DEFAULT_SUGGESTIONS = [
-  'What is a modifier?',
-  'What is a Uniswap hook?',
-  'What is a ZKP?'
-]
+import {
+  sampleConversationStarters,
+  type ConversationStarter
+} from "../lib/conversationStarters"
 
 // ChatHistory component
 export interface ChatHistoryComponentProps {
@@ -22,24 +18,43 @@ export interface ChatHistoryComponentProps {
   historyRef: React.RefObject<HTMLDivElement>
 }
 
-const AiChatIntro = (props) => {
+interface AiChatIntroProps {
+  sendPrompt: (prompt: string) => void
+}
+
+const AiChatIntro: React.FC<AiChatIntroProps> = ({ sendPrompt }) => {
+  const [conversationStarters, setConversationStarters] = useState<ConversationStarter[]>([])
+
+  useEffect(() => {
+    // Sample new conversation starters when component mounts
+    const starters = sampleConversationStarters()
+    setConversationStarters(starters)
+  }, [])
+
+  const refreshStarters = () => {
+    const newStarters = sampleConversationStarters()
+    setConversationStarters(newStarters)
+  }
+
   return (
     <div className="assistant-landing d-flex flex-column mx-1 align-items-center justify-content-center text-center h-100 w-100">
       <img src={assistantAvatar} alt="RemixAI logo" style={{ width: '120px' }} className="mb-3 container-img" />
       <h5 className="mb-2">RemixAI</h5>
       <p className="mb-4" style={{ fontSize: '0.9rem' }}>
-            RemixAI provides you personalized guidance as you build. It can break down concepts,
-            answer questions about blockchain technology and assist you with your smart contracts.
+        RemixAI provides you personalized guidance as you build. It can break down concepts,
+        answer questions about blockchain technology and assist you with your smart contracts.
       </p>
-      <div className="d-flex flex-column mt-3">
-        {DEFAULT_SUGGESTIONS.map((s, index) => (
+      {/* Dynamic Conversation Starters */}
+      <div className="d-flex flex-column mt-3" style={{ maxWidth: '400px' }}>
+        {conversationStarters.map((starter, index) => (
+
           <button
-            key={s}
-            data-id={`remix-ai-assistant-starter-${index}`}
+            key={`${starter.level}-${index}`}
+            data-id={`remix-ai-assistant-starter-${starter.level}-${index}`}
             className="btn btn-secondary mb-2 w-100 text-start"
-            onClick={() => props.sendPrompt(s)}
+            onClick={() => sendPrompt(starter.question)}
           >
-            <i className="fa-kit fa-remixai me-2"></i>{s}
+            {starter.question}
           </button>
         ))}
       </div>

libs/remix-ui/remix-ai-assistant/src/lib/conversationStarters.ts

@@ -0,0 +1,90 @@
+export interface ConversationStarter {
+  question: string;
+  level: 'beginner' | 'intermediate' | 'expert';
+  category: string;
+}
+
+export const CONVERSATION_STARTERS: ConversationStarter[] = [
+  // Beginner Level (20 Questions)
+  { question: "", level: "beginner", category: "programming" },
+  { question: "How to use blob storage?", level: "beginner", category: "Solidity" },
+  { question: "What is the difference between storage, memory, and calldata in Solidity?", level: "beginner", category: "Solidity" },
+  { question: "How are dynamic arrays stored in contract storage?", level: "beginner", category: "Solidity" },
+  { question: "How does delegatecall differ from call? ", level: "beginner", category: "Solidity" },
+  { question: "How to avoid using dynamic array in Solidity?", level: "beginner", category: "Solidity" },
+  { question: "List some gas saving techniques", level: "beginner", category: "Solidity" },
+  { question: "How do NFTs work?", level: "beginner", category: "blockchain" },
+  { question: "Debugging strategies?", level: "beginner", category: "development" },
+
+  // Intermediate Level (20 Questions)
+  { question: "What’s a Uniswap hook?", level: "intermediate", category: "DeFi" },
+  { question: "How to use 1inch?", level: "intermediate", category: "DeFi" },
+  { question: "Show a contract that includes a flash loan", level: "intermediate", category: "DeFi" },
+  { question: "Show a smart contract that records carbon credits", level: "intermediate", category: "blockchain" },
+  { question: "Show a sybil-resistant voting contract", level: "intermediate", category: "programming" },
+
+  // Expert Level (20 Questions)
+  { question: "Account abstraction impact on UX?", level: "expert", category: "blockchain" },
+  { question: "MEV protection strategies?", level: "expert", category: "DeFi" },
+  { question: "ZK-rollups vs optimistic rollups?", level: "expert", category: "blockchain" },
+  { question: "Formal verification tools worth it?", level: "expert", category: "development" },
+  { question: "What is the power of tau?", level: "expert", category: "ZK" },
+  { question: "Groth16 vs Plonk?", level: "expert", category: "ZK" },
+  { question: "Cross-chain messaging protocols?", level: "expert", category: "blockchain" },
+  { question: "EIP-4844 blob space economics?", level: "expert", category: "blockchain" },
+  { question: "Restaking security assumptions?", level: "expert", category: "blockchain" },
+  { question: "AI-assisted smart contract auditing?", level: "expert", category: "development" },
+  { question: "Maximal extractable value mitigation?", level: "expert", category: "blockchain" },
+  { question: "Explain a witness in a ZK circuit", level: "expert", category: "ZK" },
+  { question: "Explain a rate limiting nullifier", level: "expert", category: "blockchain" },
+  { question: "Proto-danksharding readiness?", level: "expert", category: "blockchain" },
+  { question: "Homomorphic encryption in web3?", level: "expert", category: "blockchain" },
+  { question: "Explain the UUPS upgradeable contract", level: "expert", category: "blockchain" },
+  { question: "Explain the Diamond Pattern", level: "expert", category: "blockchain" },
+  { question: "Explain an underflow in Solidity", level: "expert", category: "blockchain" },
+  { question: "What are some tools that can help with security?", level: "expert", category: "blockchain" },
+  { question: "Explain the Transparent upgradeable contract", level: "expert", category: "blockchain" },
+  { question: "What the difference between an ERC and an EIP?", level: "expert", category: "blockchain" },
+  { question: "How to work with EIP 7702?", level: "expert", category: "blockchain" },
+  { question: "How to work a EIP 4337 Smart Account", level: "expert", category: "blockchain" },
+];
+
+/**
+ * Randomly samples one question from each difficulty level
+ * @returns An array of 3 conversation starters (beginner, intermediate, expert)
+ */
+export function sampleConversationStarters(): ConversationStarter[] {
+  const beginnerQuestions = CONVERSATION_STARTERS.filter(q => q.level === 'beginner');
+  const intermediateQuestions = CONVERSATION_STARTERS.filter(q => q.level === 'intermediate');
+  const expertQuestions = CONVERSATION_STARTERS.filter(q => q.level === 'expert');
+
+  const randomBeginner = beginnerQuestions[Math.floor(Math.random() * beginnerQuestions.length)];
+  const randomIntermediate = intermediateQuestions[Math.floor(Math.random() * intermediateQuestions.length)];
+  const randomExpert = expertQuestions[Math.floor(Math.random() * expertQuestions.length)];
+
+  return [randomBeginner, randomIntermediate, randomExpert];
+}
+
+/**
+ * Gets conversation starters with seeded randomization for consistent results in same session
+ * @param seed Optional seed for reproducible randomization
+ * @returns An array of 3 conversation starters (beginner, intermediate, expert)
+ */
+export function sampleConversationStartersWithSeed(seed?: number): ConversationStarter[] {
+  const seededRandom = (seedValue: number) => {
+    const x = Math.sin(seedValue) * 10000;
+    return x - Math.floor(x);
+  };
+
+  const actualSeed = seed ?? Date.now();
+  const beginnerQuestions = CONVERSATION_STARTERS.filter(q => q.level === 'beginner');
+  const intermediateQuestions = CONVERSATION_STARTERS.filter(q => q.level === 'intermediate');
+  const expertQuestions = CONVERSATION_STARTERS.filter(q => q.level === 'expert');
+
+  const randomBeginner = beginnerQuestions[Math.floor(seededRandom(actualSeed) * beginnerQuestions.length)];
+  const randomIntermediate = intermediateQuestions[Math.floor(seededRandom(actualSeed + 1) * intermediateQuestions.length)];
+  const randomExpert = expertQuestions[Math.floor(seededRandom(actualSeed + 2) * expertQuestions.length)];
+
+  return [randomBeginner, randomIntermediate, randomExpert];
+}
+