add icons for managed sources

Author: vineus

assets/icons/github.svg

@@ -1,14 +1,48 @@
 import { AgentConfigurationType, AgentType } from "./dust_api/agent";
 import { DustApi, DustAPICredentials } from "./dust_api/api";
 import { useEffect, useState } from "react";
-import { getPreferenceValues, LocalStorage } from "@raycast/api";
+import { Color, getPreferenceValues, Image, LocalStorage } from "@raycast/api";
+import Asset = Image.Asset;
 
 export const DUST_AGENT: AgentType = {
   sId: "dust",
   name: "Dust",
   description: "An assistant with context on your company data.",
 };
 
+interface ManagedSource {
+  icon: Asset;
+  color: Color;
+  name: string;
+}
+export const MANAGED_SOURCES: { [id: string]: ManagedSource } = {
+  "managed-github": {
+    icon: "icons/github.svg",
+    color: Color.PrimaryText,
+    name: "GitHub",
+  },
+  "managed-google_drive": {
+    icon: "icons/google_drive.svg",
+    color: Color.Yellow,
+    name: "Google Drive",
+  },
+  "managed-slack": {
+    icon: "icons/slack.svg",
+    color: Color.Red,
+    name: "Slack",
+  },
+  "managed-notion": {
+    icon: "icons/notion.svg",
+    color: Color.Purple,
+    name: "Notion",
+  },
+  "managed-intercom": {
+    icon: "icons/intercom.svg",
+    color: Color.Blue,
+    name: "Intercom",
+  },
+};
+
 async function saveAgents(agents: { [id: string]: AgentConfigurationType }) {
   await LocalStorage.setItem("dust_agents", JSON.stringify(agents));
 }

assets/icons/google_drive.svg

@@ -3,7 +3,7 @@ import { DustApi, DustAPICredentials, DustDocument } from "./dust_api/api";
 import { useEffect, useState } from "react";
 import { addDustHistory } from "./history";
 import { AgentType } from "./dust_api/agent";
-import { DUST_AGENT } from "./agents";
+import { DUST_AGENT, MANAGED_SOURCES } from "./agents";
 
 async function answerQuestion({
   question,
@@ -103,16 +103,7 @@ export function AskDustQuestion({ question, agent = DUST_AGENT }: { question: st
   );
 }
 
-const colors = [Color.Blue, Color.Red, Color.Green, Color.Yellow, Color.Purple, Color.Orange];
 function DocumentsList({ documents }: { documents: DustDocument[] }) {
-  const sourceIdColors: { [id: string]: Color } = {};
-  let index = 0;
-  documents.forEach((document) => {
-    if (!sourceIdColors[document.dataSourceId]) {
-      sourceIdColors[document.dataSourceId] = colors[index % colors.length];
-      index++;
-    }
-  });
   return (
     <List>
       {documents
@@ -123,7 +114,25 @@ function DocumentsList({ documents }: { documents: DustDocument[] }) {
           <List.Item
             key={document.id}
             title={`${document.reference} - ${document.sourceUrl}`}
-            accessories={[{ tag: { color: sourceIdColors[document.dataSourceId], value: document.dataSourceId } }]}
+            icon={
+              document.dataSourceId in MANAGED_SOURCES
+                ? { source: MANAGED_SOURCES[document.dataSourceId].icon }
+                : { source: Icon.Globe }
+            }
+            accessories={[
+              {
+                tag: {
+                  color:
+                    document.dataSourceId in MANAGED_SOURCES
+                      ? MANAGED_SOURCES[document.dataSourceId].color
+                      : Color.SecondaryText,
+                  value:
+                    document.dataSourceId in MANAGED_SOURCES
+                      ? MANAGED_SOURCES[document.dataSourceId].name
+                      : document.dataSourceId,
+                },
+              },
+            ]}
             actions={
               <ActionPanel>
                 <Action.OpenInBrowser title="Open in Browser" url={document.sourceUrl} />

assets/icons/intercom.svg

@@ -2,6 +2,7 @@ import fetch from "node-fetch";
 import { createParser } from "eventsource-parser";
 import { ConversationType, UserMessageType } from "./conversation";
 import { AgentConfigurationType } from "./agent";
+import { MANAGED_SOURCES } from "../agents";
 export type AgentActionType = RetrievalActionType | DustAppRunActionType;
 
 type RetrievalActionType = {
@@ -376,7 +377,10 @@ export class DustApi {
                   reference: refCounter[k],
                 });
               }
-              return `[[${refCounter[k]}](${link})]`;
+              const icon = ref.dataSourceId in MANAGED_SOURCES ? MANAGED_SOURCES[ref.dataSourceId].icon : undefined;
+              const markdownIcon = icon ? `<img src="${icon}" width="16" height="16"> ` : "";
+              console.log("markdownIcon", markdownIcon);
+              return `[${markdownIcon}[${refCounter[k]}](${link})]`;
             }
             return "";
           })