From eb27f0b6f2686655434df484a9f567682488f934 Mon Sep 17 00:00:00 2001
From: Hugues Chocart <chocart.hugues@icloud.com>
Date: Tue, 21 Jan 2025 17:12:39 +0000
Subject: [PATCH] feat: add perplexity model (#720)

---
 packages/backend/src/utils/playground.ts      |  3 +-
 .../components/SmartViewer/Message.tsx        | 37 ++++++++++++++-----
 .../components/SmartViewer/index.module.css   |  5 +++
 .../components/checks/ChecksModal.tsx         |  2 +-
 packages/frontend/components/layout/Empty.tsx |  4 +-
 .../frontend/components/layout/Sidebar.tsx    |  2 +-
 packages/frontend/pages/join.tsx              |  2 +-
 packages/frontend/pages/prompts/[[...id]].tsx | 10 ++++-
 packages/frontend/utils/analytics.ts          |  4 +-
 packages/shared/models.ts                     |  5 +++
 10 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/packages/backend/src/utils/playground.ts b/packages/backend/src/utils/playground.ts
index 11c5ada5..17b39f7c 100644
--- a/packages/backend/src/utils/playground.ts
+++ b/packages/backend/src/utils/playground.ts
@@ -109,6 +109,7 @@ export async function handleStream(
 
       res = {
         choices,
+        citations: part.citations, // perplexity models return an array of citations links
         usage: {
           completion_tokens: tokens,
         },
@@ -421,7 +422,7 @@ export async function runAImodel(
   let res = await openai.chat.completions.create({
     model,
     messages,
-    stream: stream,
+    stream,
     temperature: extra?.temperature,
     max_tokens: extra?.max_tokens,
     top_p: extra?.top_p,
diff --git a/packages/frontend/components/SmartViewer/Message.tsx b/packages/frontend/components/SmartViewer/Message.tsx
index 0148aefc..18c05205 100644
--- a/packages/frontend/components/SmartViewer/Message.tsx
+++ b/packages/frontend/components/SmartViewer/Message.tsx
@@ -224,10 +224,10 @@ function TextMessage({
 }) {
   const text = data.content || data.text;
 
-  return (
-    <Code className={classes.textMessage}>
-      <ProtectedText>
-        {editable ? (
+  if (editable) {
+    return (
+      <Code className={classes.textMessage}>
+        <ProtectedText>
           <Textarea
             value={data.content || data.text}
             placeholder="Content"
@@ -235,7 +235,26 @@ function TextMessage({
             onChange={(e) => onChange({ ...data, content: e.target.value })}
             {...ghostTextAreaStyles}
           />
-        ) : (
+        </ProtectedText>
+      </Code>
+    );
+  } else if (data.citations) {
+    const textWithLinks = text.replace(/\[(\d+)\]/g, (match, numberStr) => {
+      const idx = parseInt(numberStr, 10) - 1;
+      if (data.citations[idx]) {
+        return `<a href="${data.citations[idx]}" target="_blank" class="${classes.citationLink}">[${numberStr}]</a>`;
+      }
+      return match;
+    });
+    return (
+      <Code className={classes.textMessage}>
+        <Text size="sm" dangerouslySetInnerHTML={{ __html: textWithLinks }} />
+      </Code>
+    );
+  } else {
+    return (
+      <Code className={classes.textMessage}>
+        <ProtectedText>
           <HighlightPii
             text={
               compact
@@ -244,10 +263,10 @@ function TextMessage({
             }
             piiDetection={piiDetection}
           />
-        )}
-      </ProtectedText>
-    </Code>
-  );
+        </ProtectedText>
+      </Code>
+    );
+  }
 }
 
 function ResponsiveImage({ src }) {
diff --git a/packages/frontend/components/SmartViewer/index.module.css b/packages/frontend/components/SmartViewer/index.module.css
index a0e65904..ae8a0d0c 100644
--- a/packages/frontend/components/SmartViewer/index.module.css
+++ b/packages/frontend/components/SmartViewer/index.module.css
@@ -156,3 +156,8 @@
   border-radius: var(--mantine-radius-sm);
   width: 100%;
 }
+
+
+.citationLink {
+  text-decoration: none;;
+}
\ No newline at end of file
diff --git a/packages/frontend/components/checks/ChecksModal.tsx b/packages/frontend/components/checks/ChecksModal.tsx
index 2c418e36..d7c13835 100644
--- a/packages/frontend/components/checks/ChecksModal.tsx
+++ b/packages/frontend/components/checks/ChecksModal.tsx
@@ -182,7 +182,7 @@ export default function ChecksModal({
           <Anchor
             href="#"
             onClick={() => {
-              $crisp.push(["do", "chat:open"]);
+              $crisp?.push(["do", "chat:open"]);
             }}
             variant="transparent"
           >
diff --git a/packages/frontend/components/layout/Empty.tsx b/packages/frontend/components/layout/Empty.tsx
index 9c578512..ded9d04a 100644
--- a/packages/frontend/components/layout/Empty.tsx
+++ b/packages/frontend/components/layout/Empty.tsx
@@ -343,7 +343,7 @@ const IntegrationStepper = ({ integration }: { integration: string }) => {
                 </Text>
                 <Button
                   onClick={() => {
-                    $crisp.push(["do", "chat:open"]);
+                    $crisp?.push(["do", "chat:open"]);
                   }}
                   size="compact-xs"
                   variant="outline"
@@ -696,7 +696,7 @@ export default function Empty({
                     color="blue"
                     variant="light"
                     onClick={() => {
-                      $crisp.push(["do", "chat:open"]);
+                      $crisp?.push(["do", "chat:open"]);
                     }}
                   >
                     Chat with us
diff --git a/packages/frontend/components/layout/Sidebar.tsx b/packages/frontend/components/layout/Sidebar.tsx
index 828848e8..61f5d49c 100644
--- a/packages/frontend/components/layout/Sidebar.tsx
+++ b/packages/frontend/components/layout/Sidebar.tsx
@@ -581,7 +581,7 @@ export default function Sidebar() {
                     <Menu.Item
                       leftSection={<IconMessage2 size={14} />}
                       onClick={() => {
-                        $crisp.push(["do", "chat:open"]);
+                        $crisp?.push(["do", "chat:open"]);
                       }}
                     >
                       Feedback
diff --git a/packages/frontend/pages/join.tsx b/packages/frontend/pages/join.tsx
index b20b33ae..ca998e0c 100644
--- a/packages/frontend/pages/join.tsx
+++ b/packages/frontend/pages/join.tsx
@@ -47,7 +47,7 @@ function TeamFull({ orgName }) {
               component="button"
               type="button"
               onClick={() => {
-                $crisp.push(["do", "chat:open"]);
+                $crisp?.push(["do", "chat:open"]);
               }}
             >
               Contact support →
diff --git a/packages/frontend/pages/prompts/[[...id]].tsx b/packages/frontend/pages/prompts/[[...id]].tsx
index 7ad62df2..05e193ba 100644
--- a/packages/frontend/pages/prompts/[[...id]].tsx
+++ b/packages/frontend/pages/prompts/[[...id]].tsx
@@ -199,7 +199,6 @@ function Playground() {
           setTemplate({ mode: "openai" });
 
           setOutput(run.output);
-
           setOutputTokens(run.tokens?.completion);
         }
 
@@ -358,6 +357,8 @@ function Playground() {
     setOutputTokens(0);
     setStreaming(true);
 
+    let citations = null;
+
     try {
       await fetcher.getStream(
         `/orgs/${org?.id}/playground`,
@@ -369,8 +370,11 @@ function Playground() {
         (chunk) => {
           try {
             const parsedLine = JSON.parse(chunk);
+            if (parsedLine.citations && !citations) {
+              citations = parsedLine.citations;
+            }
 
-            setOutput(parsedLine.choices[0]?.message);
+            setOutput({ ...parsedLine.choices[0]?.message, citations });
             setOutputTokens(parsedLine.usage?.completion_tokens || 0);
             setError(null);
           } catch (error) {
@@ -379,6 +383,8 @@ function Playground() {
         },
       );
 
+      // setOutput({ ...output, citations });
+
       // scroll template-input-area to the end
       const element = document.getElementById("template-input-area");
       element.scrollTop = element.scrollHeight;
diff --git a/packages/frontend/utils/analytics.ts b/packages/frontend/utils/analytics.ts
index b6822983..549246fc 100644
--- a/packages/frontend/utils/analytics.ts
+++ b/packages/frontend/utils/analytics.ts
@@ -169,7 +169,9 @@ function track(event: string, data?: any) {
   try {
     posthog?.capture(event, data);
 
-    w?.crisp?.push(["set", "session:event", [[[event, data]]]]);
+    if (typeof w?.crisp?.push === "function") {
+      w?.crisp?.push(["set", "session:event", [[[event, data]]]]);
+    }
   } catch (e) {
     console.error(e);
   }
diff --git a/packages/shared/models.ts b/packages/shared/models.ts
index 556f9b13..6fbe1e4e 100644
--- a/packages/shared/models.ts
+++ b/packages/shared/models.ts
@@ -198,4 +198,9 @@ export const MODELS = [
     name: "grok-2-1212",
     provider: "openrouter",
   },
+  {
+    id: "perplexity/llama-3.1-sonar-large-128k-online",
+    name: "perplexity-llama-3.1-sonar-large-128k-online",
+    provider: "openrouter",
+  },
 ];