Merge pull request #19 from PSDTools/demo-version

Demo version

Author: lishaduck

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "svelte.enable-ts-plugin": true,
   "eslint.validate": ["typescript", "javascript", "svelte"],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": [
+    "Fitz"
+  ]
 }

package.json

@@ -8,9 +8,11 @@
     "dev": "wxt",
     "dev:firefox": "wxt -b firefox",
     "dev:safari": "wxt -b safari",
+    "dev:edge": "wxt -b edge",
     "build": "wxt build",
     "build:firefox": "wxt build -b firefox",
     "build:safari": "wxt build -b safari",
+    "build:edge": "wxt build -b edge",
     "zip": "wxt zip",
     "zip:firefox": "wxt zip -b firefox",
     "zip:safari": "wxt zip -b safari",

src/entrypoints/popup/App.svelte

@@ -7,17 +7,25 @@
 
   import HomeComponent from "./Home.svelte";
   import PhishingComponent from "./Phishing.svelte";
+  import PhishingReal from "./PhishingReal.svelte";
+  import PhishingMenu from "./PhishingMenu.svelte";
+  import PhishingLoading from "./PhishingLoading.svelte";
   import FactCheckComponent from "./FactCheck.svelte";
   import ChatComponent from "./Chat.svelte";
   import FactCheckLoadingComponent from "./FactCheckLoading.svelte";
   import FactsChecked from "./FactsChecked.svelte";
+  import FactsCheckedFake from "./FactsCheckedFake.svelte";
 
   const RouteName = {
     Home: "home",
     Phishing: "phishing",
+    PhishingReal: "phishing-real",
+    PhishingMenu: "phishing-menu",
+    PhishingLoading: "phishing-loading",
     FactCheck: "fact-check",
     FactCheckLoading: "fact-check-loading",
     FactsChecked: "real",
+    FactsCheckedFake: "fake",
     Chat: "chat",
     Any: "any",
   } as const;
@@ -35,6 +43,21 @@
       path: `/${RouteName.Phishing}`,
       component: PhishingComponent,
     },
+    {
+      name: RouteName.PhishingReal,
+      path: `/${RouteName.PhishingReal}`,
+      component: PhishingReal,
+    },
+    {
+      name: RouteName.PhishingMenu,
+      path: `/${RouteName.PhishingMenu}`,
+      component: PhishingMenu,
+    },
+    {
+      name: RouteName.PhishingLoading,
+      path: `/${RouteName.PhishingLoading}`,
+      component: PhishingLoading,
+    },
     {
       name: RouteName.FactCheck,
       path: `/${RouteName.FactCheck}`,
@@ -50,19 +73,24 @@
       path: `/${RouteName.FactsChecked}`,
       component: FactsChecked,
     },
+
     {
       name: RouteName.Chat,
       path: `/${RouteName.Chat}`,
       component: ChatComponent,
     },
-
     {
       name: RouteName.Any,
       path: "*",
       redirect: {
         name: RouteName.Home,
       },
     },
+    {
+      name: RouteName.FactsCheckedFake,
+      path: `/${RouteName.FactsCheckedFake}`,
+      component: FactsCheckedFake,
+    },
   ] as const satisfies Route<RouteNames>[];
 
   export const options = {

src/entrypoints/popup/Chat.svelte

@@ -1,28 +1,29 @@
-<script lang="ts">
-  import BlankAnchor from "./BlankAnchor.svelte";
-  import Wrapper from "./Wrapper.svelte";
-  import { Send } from "lucide-svelte";
+<script lang="ts" module>
   import { GoogleGenerativeAI } from "@google/generative-ai";
 
   const key = import.meta.env.VITE_GEMINI_API_KEY;
 
   const genAI = new GoogleGenerativeAI(key);
-  // console.log(result.response.text());
+
+  const model = genAI.getGenerativeModel({
+    model: "gemini-2.0-flash-lite",
+    systemInstruction:
+      'You are DUCKY and help people with cybersecurity and digital literacy. Always say "Quack!" at the end of every response. Have a playful but serious tone; business casual. DUCKY has a phishing detector, chatbot, and website fact checker. DUCKY is a web extension available on all web browsers. The phishing detector looks at an email and determines if it is phishing attack or legitimate. You are the chatbot, you help users understand information and answer questions. The fact checker checks websites\' data, finds similar articles to determine if the website is trustworthy. DUCKY is a rubber duck because computer science often uses rubber duckies to talk to, Ducky also stands Defending and Understanding Cybersecurity Knowledge Year-round. Be friendly, no cursing. Keep your response under 75 words, excluding the word "Quack!" from the count. Do not leave blank lines.',
+  });
+</script>
+
+<script lang="ts">
+  import BlankAnchor from "./BlankAnchor.svelte";
+  import Wrapper from "./Wrapper.svelte";
+  import { Send } from "lucide-svelte";
 
   const parameters = new URLSearchParams(
     globalThis.location.hash.split("?")[1],
   );
 
   let question = $state<string>(parameters.get("q") ?? "");
-  // let currentQuestion = $state<string>("");
-  let response = $state<string>();
+  let response = $state<string>("");
   let loading = $state<boolean>(false);
-
-  const model = genAI.getGenerativeModel({
-    model: "gemini-2.0-flash-lite",
-    systemInstruction:
-      'you are DUCKY and have to help people with cybersecurity and digital literacy. always say "Quack!" at the end of every response. Have a playful but serious tone; business casual. DUCKY has a phishing detector, chat bot, and website fact checker. DUCKY is a chrome and firefox web extension. The phishing detector will automatically pop up when the user looks at an email and determines if it is phishing. The chatbot is what you are and can help users understand information or can be used to ask questions. The fact checker checks websites data and finds sources and other places to determine if the website is trustworthy. DUCKY is a rubber duck because computer science often uses rubber duckies to talk to. Be friendly, no cursing. Keep response under 75 words exclude the word "Quack!" from the count. Do not leave blank lines inbetween lines.',
-  });
 </script>
 
 <Wrapper pageTitle="Ducky Chat">
@@ -35,14 +36,12 @@
       setTimeout(() => {
         void (async () => {
           const airesponse = await model.generateContent(question);
-          console.log(airesponse.response.text());
           response = airesponse.response.text();
         })();
         loading = false;
       }, 2000);
 
       loading = true;
-      // question = "";
       event.preventDefault();
     }}
   >
@@ -95,6 +94,7 @@
     all: unset;
     outline: revert;
     background-color: #e2c100;
+    color: inherit;
 
     display: inline-flex;
     align-items: center;

src/entrypoints/popup/FactCheck.svelte

@@ -49,7 +49,7 @@
 
 <style>
   .radio-indent {
-    margin-left: 40px;
+    margin-left: 24px;
   }
 
   .option {
@@ -72,13 +72,19 @@
 
   /* New styles for scaling current tab text without taking more than two lines */
   .current-tab-text {
-    /* Font size scales between 14px and 18px based on the viewport width */
-    font-size: clamp(14px, 2vw, 18px);
+    /* Font size scales between 12px and 16px based on the viewport width */
+    font-size: clamp(12px, 1.8vw, 16px);
     overflow: hidden;
+    text-overflow: ellipsis;
     display: -webkit-box;
-    line-clamp: 2;
-    display: flex;
-    flex-direction: column;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+    word-break: break-all; /* Forces breaking at any character */
+    max-width: 100%;
+    line-height: 1.3;
+    margin-top: 2px;
+    padding-right: 5px;
   }
   .card {
     display: flex;

src/entrypoints/popup/FactCheckLoading.svelte

@@ -2,6 +2,7 @@
   import Wrapper from "./Wrapper.svelte";
   import Loading from "./Loading.svelte";
   import { delay } from "./utils.ts";
+  import { onMount } from "svelte";
   const randomMessages = [
     "Verifying sources",
     "Feeding ducks",
@@ -11,14 +12,31 @@
     "Gathering the flock",
     "Flying the coop",
   ];
+  let currentTab = $state<chrome.tabs.Tab>();
+  var nextPage: string = $state("real");
+
+  onMount(async () => {
+    [currentTab] = await browser.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
+
+    if ((currentTab.url ?? "").includes("https://newsroom.cisco.com")) {
+      nextPage = "real";
+    } else if ((currentTab.url ?? "").includes("https://theonion.com/")) {
+      nextPage = "fake";
+    }
+  });
 </script>
 
 <Wrapper pageTitle="Fact Checker">
   <div class="fact-wrapper">
+    <!-- Implement script here to go to different pages based on url -->
+
     <Loading
       loader={async (aborter) => await delay(4550, aborter)}
       {randomMessages}
-      url="real"
+      url={nextPage}
     />
   </div>
 </Wrapper>

src/entrypoints/popup/FactsChecked.svelte

@@ -2,7 +2,7 @@
   import BlankAnchor from "./BlankAnchor.svelte";
   import Wrapper from "./Wrapper.svelte";
 
-  let factuality = $state(96);
+  let factuality = $state(92);
   const factual = $derived(factuality > 50);
 </script>
 
@@ -21,35 +21,45 @@
 
     <span class="factuality">
       <!-- 8-ball? -->
-      {factual ? "Likely true" : "Possibly a falsehood"}
+      {factual ? "Likely True" : "Likely fake"}
     </span>
 
     <details class="details">
       <summary>Sources</summary>
       <ul>
         <li>
           <BlankAnchor
-            href="https://www.wwt.com/press-release/wwt-has-entered-into-a-definitive-agreement-to-acquire-softchoice"
-          >
-            Official Press Release
-          </BlankAnchor>
-        </li>
-        <li>
-          <BlankAnchor
-            href="https://www.wwt.com/news/wwt-to-buy-softchoice-in-dollar125b-blockbuster-heres-what-to-know"
+            href="https://www.wwt.com/news/cisco-expands-partnership-with-nvidia-to-accelerate-ai-adoption-in-the-enterprise"
           >
             Official Blogpost
           </BlankAnchor>
         </li>
       </ul>
     </details>
+    <div class="open">
+      <!--
+          So, technically, there isn't a search passed here, just a fragment.
+          But... the router handles it, so we just do some hacks on the chat page.
+        -->
+      <a
+        class="chat-button"
+        data-query={JSON.stringify({
+          q: "How can I fact check sources on my own?",
+        })}
+        href="#/chat"
+      >
+        How can I fact check sources on my own?
+      </a>
+    </div>
   </div>
 </Wrapper>
 
 <style>
   .details {
     width: 100%;
 
+    padding-left: 2rem;
+
     & summary {
       font-size: 1.4rem;
     }
@@ -94,4 +104,36 @@
     font-size: 0.5em;
     text-anchor: middle;
   }
+  .open {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1rem;
+    text-align: center;
+
+    & > .chat-button {
+      width: 100%;
+      background-color: #e2c100;
+      color: #242424;
+      transition:
+        border-color 0.25s,
+        background-color 0.3s,
+        transform 0.2s;
+
+      border-radius: 8px;
+      border: 1px solid transparent;
+      padding: 0.6em 1.2em;
+      font-size: 1em;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f0d500;
+        transform: scale(1.075);
+      }
+    }
+  }
 </style>