[V0_FILE]typescriptreact:file="app/ai-principles/page.tsx" isMerged="true" 'use client' import { motion } from 'framer-motion' import { pageTransition } from '@/utils/animations' import { AIPrinciplesShowcase } from "../../components/ai-principles-showcase" export default function AIPrinciplesPage() { return (

AI Design Principles for Quest

Core principles for designing AI-powered experiences that put people first.

) } [V0_FILE]typescriptreact:file="utils/animations.ts" isMerged="true" export const pageTransition = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, transition: { duration: 0.4, ease: [0.4, 0.14, 0.3, 1] } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "framer-motion": "12.31.0" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/ai-principles-showcase.tsx" 'use client' import { useState } from 'react' import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { motion, AnimatePresence } from "framer-motion" import { Bug, AlertTriangle, Bot, Brain, Edit, Eye, FileEdit, HelpCircle, History, ImageIcon, Info, Lightbulb, MessageSquare, Mic, Undo, SliceIcon as VoiceIcon, X, List, Shield, Shuffle, Users, Lock, Sparkles, Layers } from 'lucide-react' import { cn } from "@/lib/utils" export function AIPrinciplesShowcase() { const [riskSensitivity, setRiskSensitivity] = useState(50) const [selectedStrategy, setSelectedStrategy] = useState(null) const [isEditing, setIsEditing] = useState(false) const [showError, setShowError] = useState(true) const [confidenceLevel, setConfidenceLevel] = useState(85) const strategies = [ { id: '1', title: 'Full Recovery', description: 'Restore entire mailbox with all folders, permissions, and metadata intact', riskLevel: 'Low', confidence: 95 }, { id: '2', title: 'Selective Recovery', description: 'Restore specific items or date ranges with deduplication checks', riskLevel: 'Low', confidence: 90 }, { id: '3', title: 'In-Place Recovery', description: 'Restore directly to original location, overwriting current data', riskLevel: 'Medium', confidence: 85 }, { id: '4', title: 'Cross-Tenant Migration', description: 'Move recovered data to a different environment with permission mapping', riskLevel: 'Medium-High', confidence: 78 } ] return (

{/* 1. Design Responsibly */}

1. Design responsibly

Use a human-centred approach

{/* Principle Explanation Card */}

Principle overview

AI should solve real problems - automating repetitive tasks, surfacing risks, or accelerating decisions. If it doesn't add clear value, don't use it.

Data collection and evaluation

Consider data quality, bias, and ethical sourcing - especially with sensitive enterprise data.

How we might achieve this

Let users adjust risk sensitivity levels
Show risk scores with severity and likelihood
Explain why something was flagged
Provide clear escalation paths for ambiguous cases

{/* Interactive Example Card */}

Example of user control

Set your backup risk tolerance

Control how aggressively the AI flags potential backup failures and data loss risks.

Risk Sensitivity {riskSensitivity}%

setRiskSensitivity(value)} max={100} step={1} />

75 ? "text-red-500" : riskSensitivity > 50 ? "text-orange-500" : "text-green-500" )} /> Risk Level: { riskSensitivity > 75 ? "High" : riskSensitivity > 50 ? "Medium" : "Low" }

{riskSensitivity > 75 ? "Flag all anomalies - missed backup windows, storage warnings, and minor configuration drift." : riskSensitivity > 50 ? "Balanced - alert on failed jobs, recovery point gaps, and security policy violations." : "Critical only - data loss events, ransomware detection, and complete backup failures." }

{/* 2. Design for variability */}

2. Design for variability

Use multiple outputs

{/* Principle Explanation Card */}

Principle overview

Offer multiple valid approaches. Different strategies may suit different contexts - let users compare options and make informed choices.

Adaptability to changing environments

Keep recommendations current as best practices evolve.

How to achieve this

Enable side-by-side comparison of approaches
Save preferred configurations as reusable templates
Keep the knowledge base current
Collect feedback to improve suggestions

{/* Interactive Example Card */}

Example of giving user options

Choose a recovery strategy

Compare AI-recommended approaches for restoring deleted user data.

{strategies.map((strategy) => (

setSelectedStrategy(strategy.id)} >

{strategy.title}

{strategy.riskLevel} Risk

{strategy.description}

{strategy.confidence}% confidence

))}

{/* 3. Design for mental models */}

3. Design for mental models

Teach effective use

{/* Principle Explanation Card */}

Principle overview

Be upfront about what the AI can and can't do. Users should understand how it works before they rely on it.

Transparency and explainability

Show the reasoning, not just the result. Clear explanations and access to underlying data build confidence.

How to achieve this

Show step-by-step reasoning
Visualise the analysis process
Provide access to raw data
State limitations clearly

{/* Interactive Example Card */}

Example of giving user transparent information

Scan backup history

AI reviews job logs, retention policies, and storage utilisation patterns.

Detect anomalies

Flags unusual data growth, failed jobs, or gaps in recovery points.

Suggest actions

Recommends policy adjustments, storage optimisation, or immediate remediation.

{/* 4. Design for co-creation */}

4. Design for co-creation

Support co-editing of outputs

{/* Principle Explanation Card */}

Principle overview

AI output is a starting point, not a final answer. Users should be able to edit, annotate, and refine results.

Iterative feedback loops

User corrections improve the AI over time. Make feedback easy to give.

How to achieve this

Let users edit AI-generated content directly
Support comments and annotations
Track version history
Enable sharing across teams

{/* Interactive Example Card */}

Example of allowing user to edit and customise

{isEditing ? (

<div className="flex gap-2 mt-4">
                      <Button 
                        variant="outline" 
                        size="sm"
                        onClick={() => setIsEditing(!isEditing)}
                      >
                        {isEditing ? (
                          <>
                            <Eye className="h-4 w-4 mr-2" />
                            Preview
                          </>
                        ) : (
                          <>
                            <Edit className="h-4 w-4 mr-2" />
                            Edit
                          </>
                        )}
                      </Button>
                      <Button variant="outline" size="sm">
                        <History className="h-4 w-4 mr-2" />
                        History
                      </Button>
                    </div>
                  </div>
                ) : (
                  <div className="rounded-lg border p-4 space-y-4 bg-white">
                    <h4 className="font-medium">Weekly Backup Health Report</h4>
                    <div className="space-y-4 text-sm">
                      <p>AI-generated summary for review:</p>
                      <div className="space-y-4">
                        <div>
                          <p className="font-medium">1. Backup Status</p>
                          <ul className="list-disc pl-5 mt-2 text-muted-foreground">
                            <li>847 successful jobs (98.2% success rate)</li>
                            <li>16 jobs require attention</li>
                            <li>3 critical failures flagged</li>
                          </ul>
                        </div>
                        <div>
                          <p className="font-medium">2. Storage Recommendations</p>
                          <ul className="list-disc pl-5 mt-2 text-muted-foreground">
                            <li>Archive tier migration suggested for 2.4TB cold data</li>
                            <li>Deduplication could save 340GB</li>
                            <li>Retention policy adjustment recommended for 12 mailboxes</li>
                          </ul>
                        </div>
                      </div>
                      <div className="flex gap-2 mt-4">
                        <Button 
                          variant="outline" 
                          size="sm"
                          onClick={() => setIsEditing(!isEditing)}
                        >
                          {isEditing ? (
                            <>
                              <Eye className="h-4 w-4 mr-2" />
                              Preview
                            </>
                          ) : (
                            <>
                              <Edit className="h-4 w-4 mr-2" />
                              Edit
                            </>
                          )}
                        </Button>
                        <Button variant="outline" size="sm">
                          <History className="h-4 w-4 mr-2" />
                          History
                        </Button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </Card>
        </div>
      </section>

{/* 5. Design for trust */}
      <section className="space-y-6">
        <div className="flex items-center gap-4">
          <Lock className="h-8 w-8" />
          <h2 className="text-3xl font-bold tracking-tight">5. Design for trust</h2>
        </div>
        <p className="text-lg text-foreground mb-6">Calibrate trust with explanations</p>

{/* Principle Explanation Card */}
        <Card className="bg-muted/50 border-l-4 border-l-primary">
          <CardContent className="pt-6 bg-white">
            <h3 className="text-xl font-semibold mb-4">Principle overview</h3>
            <p className="text-sm text-foreground leading-relaxed">
              Trust is earned through transparency. Show confidence levels, cite sources, and make the reasoning auditable.
            </p>
            <div className="space-y-4 mt-4">
              <div>
                <h4 className="text-base font-medium mb-2">Transparency and accountability</h4>
                <p className="text-sm text-foreground">
                  Users should understand how conclusions were reached - and be able to challenge them.
                </p>
              </div>
              <div>
                <h4 className="text-base font-medium mb-2">How to achieve this</h4>
                <ul className="list-disc pl-5 text-sm text-foreground space-y-2">
                  <li>Display confidence levels prominently</li>
                  <li>Reference industry standards and best practices</li>
                  <li>Allow review and validation of AI analysis</li>
                  <li>Make it easy to report errors</li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

<div className="rounded-lg border p-4 space-y-3 bg-white">
                  <h4 className="font-medium">How we define confidence</h4>
                  <div className="space-y-2">
                    <div className="flex items-start gap-2 text-sm">
                      <HelpCircle className="h-4 w-4 text-blue-500 mt-0.5" />
                      <div>
                        <p className="font-medium">Your backup history</p>
                        <p className="text-muted-foreground">Patterns from 12 months of job logs and recovery events in your environment.</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2 text-sm">
                      <HelpCircle className="h-4 w-4 text-blue-500 mt-0.5" />
                      <div>
                        <p className="font-medium">Quest knowledge base</p>
                        <p className="text-muted-foreground">Aggregated insights from 10,000+ similar environments</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2 text-sm">
                      <HelpCircle className="h-4 w-4 text-blue-500 mt-0.5" />
                      <div>
                        <p className="font-medium">Recovery success rates</p>
                        <p className="text-muted-foreground">Historical restore completion data for this data type</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </section>

{/* 6. Design for imperfection */}
      <section className="space-y-6">
        <div className="flex items-center gap-4">
          <Bug className="h-8 w-8" />
          <h2 className="text-3xl font-bold tracking-tight">6. Design for imperfection</h2>
        </div>
        <p className="text-lg text-foreground mb-6">Offer ways to improve outputs</p>

{/* Principle Explanation Card */}
        <Card className="bg-muted/50 border-l-4 border-l-primary">
          <CardContent className="pt-6 bg-white">
            <h3 className="text-xl font-semibold mb-4">Principle overview</h3>
            <p className="text-sm text-foreground leading-relaxed">
              AI will get things wrong. Design for graceful failure - clear errors, easy recovery, and simple feedback mechanisms.
            </p>
            <div className="space-y-4 mt-4">
              <div>
                <h4 className="text-base font-medium mb-2">Error handling and recovery</h4>
                <p className="text-sm text-foreground">
                  When something fails, explain what happened and offer a path forward.
                </p>
              </div>
              <div>
                <h4 className="text-base font-medium mb-2">How to achieve this</h4>
                <ul className="list-disc pl-5 text-sm text-foreground space-y-2">
                  <li>Write clear, actionable error messages</li>
                  <li>Suggest next steps when analysis fails</li>
                  <li>Make feedback submission frictionless</li>
                  <li>Monitor and improve continuously</li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Interactive Example Card */}
        <div className="relative">
          <div className="mb-4 flex items-center gap-2 text-muted-foreground">
            <Lightbulb className="h-5 w-5" />
            <span className="text-lg font-medium text-foreground">Example of error messaging and user control</span>
          </div>
          <Card className="p-6 bg-slate-50">
            <div className="space-y-6">
              <div className="space-y-4">
                <AnimatePresence>
                  {showError && (
                    <motion.div
                      initial={{ opacity: 0, y: -10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      className="rounded-lg border border-red-200 bg-red-50 p-4 space-y-3"
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex items-start gap-3">
                          <AlertTriangle className="h-5 w-5 text-red-500 mt-0.5" />
                          <div>
                            <p className="font-medium text-red-900">Recovery verification failed</p>
                            <p className="text-sm text-red-700">
                              3 items could not be validated - possible corruption in backup chain detected
                            </p>
                          </div>
                        </div>
                        <Button 
                          variant="ghost" 
                          size="sm"
                          onClick={() => setShowError(false)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                      <div className="space-x-3">
                        <Button variant="outline" size="sm" className="w-full justify-start bg-transparent">
                          <AlertTriangle className="h-4 w-4 mr-2" />
                          Try alternate backup point
                        </Button>
                        <Button variant="outline" size="sm" className="w-full justify-start bg-transparent">
                          <FileEdit className="h-4 w-4 mr-2" />
                          Skip corrupted items
                        </Button>
                        <Button variant="outline" size="sm" className="w-full justify-start bg-transparent">
                          <Undo className="h-4 w-4 mr-2" />
                          Cancel recovery
                        </Button>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>

<div className="rounded-lg border p-4 space-y-3 bg-white">
                  <h4 className="font-medium">Feedback options</h4>
                  <div className="space-y-2">
                    <Button variant="outline" size="sm" className="w-full justify-start bg-transparent">
                      <AlertTriangle className="h-4 w-4 mr-2" />
                      Flag false positive
                    </Button>
                    <Button variant="outline" size="sm" className="w-full justify-start bg-transparent">
                      <FileEdit className="h-4 w-4 mr-2" />
                      Adjust detection rules
                    </Button>
                    <Button variant="outline" size="sm" className="w-full justify-start bg-transparent">
                      <Undo className="h-4 w-4 mr-2" />
                      Restore previous policy
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </section>

{/* 7. Design for multimodal interaction */}
      <section className="space-y-6">
        <div className="flex items-center gap-4">
          <Layers className="h-8 w-8" />
          <h2 className="text-3xl font-bold tracking-tight">7. Design for multimodal interaction</h2>
        </div>
        <p className="text-lg text-foreground mb-6">Recognising different ways of interaction</p>

{/* Principle Explanation Card */}
        <Card className="bg-muted/50 border-l-4 border-l-primary">
          <CardContent className="pt-6 bg-white">
            <h3 className="text-xl font-semibold mb-4">Principle overview</h3>
            <p className="text-sm text-foreground leading-relaxed">
              People work differently. Support text, voice, uploads, and whatever else fits the workflow.
            </p>
            <div className="space-y-4 mt-4">
              <div>
                <h4 className="text-base font-medium mb-2">Accessibility and inclusivity</h4>
                <p className="text-sm text-foreground">
                  Multiple input methods mean more people can use the tool effectively.
                </p>
              </div>
              <div>
                <h4 className="text-base font-medium mb-2">How to achieve this</h4>
                <ul className="list-disc pl-5 text-sm text-foreground space-y-2">
                  <li>Offer text, voice, and file upload options</li>
                  <li>Adapt to different workflows</li>
                  <li>Build for accessibility from the start</li>
                  <li>Support global teams</li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

<div className="rounded-lg border p-4 mb-6 space-y-3 bg-white">
                  <div className="flex items-center gap-2">
                    <VoiceIcon className="h-5 w-5 text-blue-500" />
                    <h4 className="font-medium">Voice commands</h4>
                  </div>
                  <Button variant="outline" className="w-full gap-2 bg-transparent">
                    <Mic className="h-4 w-4" />
                    Press to speak
                  </Button>
                </div>
                
                <div className="rounded-lg border p-4 mb-6 space-y-3 bg-white">
                  <div className="flex items-center gap-2">
                    <ImageIcon className="h-5 w-5 text-blue-500" />
                    <h4 className="font-medium">Data upload</h4>
                  </div>
                  <div className="grid gap-2">
                    <Button variant="outline" className="w-full gap-2 bg-transparent">
                      Import job logs
                    </Button>
                    <p className="text-xs text-muted-foreground">
                      Upload backup logs or export files for AI-powered troubleshooting
                    </p>
                  </div>
                </div>
                <div className="rounded-lg border p-4 space-y-3 bg-white">
                  <div className="flex items-center gap-2">
                    <Eye className="h-5 w-5 text-blue-500" />
                    <h4 className="font-medium">Dashboard analysis</h4>
                  </div>
                  <div className="grid gap-2">
                    <Button variant="outline" className="w-full gap-2 bg-transparent">
                      Analyse error screenshot
                    </Button>
                    <p className="text-xs text-muted-foreground">
                      Upload screenshots of errors for AI-assisted diagnosis
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </section>

{/* References */}
      <section className="space-y-6 mt-16 pt-16 border-t">
        <div className="space-y-2">
          <h2 className="text-3xl font-bold tracking-tight">References</h2>
          <p className="text-lg text-muted-foreground">Academic and industry resources that informed these principles</p>
        </div>

<div className="grid gap-8">
          <div className="space-y-3">
            <h3 className="text-lg font-semibold text-foreground">Academic publications</h3>
            <div className="space-y-2 text-sm text-muted-foreground">
              <p><a href="https://dl.acm.org/doi/10.1145/3613904.3642466" className="hover:underline transition-colors hover:text-foreground">ACM Digital Library - AI Design Principles</a></p>
              <p><a href="https://hdsr.mitpress.mit.edu/pub/l0jsh9d1/release/8" className="hover:underline transition-colors hover:text-foreground">Harvard Data Science Review - AI Design Principles</a></p>
            </div>
          </div>

<div className="space-y-3">
            <h3 className="text-lg font-semibold text-foreground">Industry guidelines</h3>
            <div className="space-y-2 text-sm text-muted-foreground">
              <p><a href="https://ai.google/responsibility/principles/" className="hover:underline transition-colors hover:text-foreground">Google AI Principles</a></p>
              <p><a href="https://research.ibm.com/publications/design-principles-for-generative-ai-applications" className="hover:underline transition-colors hover:text-foreground">IBM Research - Design Principles for Generative AI Applications</a></p>
              <p><a href="https://www.infosys.com/iki/perspectives/responsible-ai-design-principles.html" className="hover:underline transition-colors hover:text-foreground">Infosys - Responsible AI Design Principles</a></p>
            </div>
          </div>

<div className="space-y-3">
            <h3 className="text-lg font-semibold text-foreground">Additional resources</h3>
            <div className="space-y-2 text-sm text-muted-foreground">
              <p><a href="https://pair.withgoogle.com/guidebook" className="hover:underline transition-colors hover:text-foreground">People + AI Research Guidebook</a></p>
              <p><a href="https://www.index.dev/blog/generative-ai-application-design-principles" className="hover:underline transition-colors hover:text-foreground">Index.dev - Generative AI Application Design Principles</a></p>
              <p><a href="https://www.aible.com/for-business" className="hover:underline transition-colors hover:text-foreground">Aible - AI for Business</a></p>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}</article></body></html>