Adds handling adding Annotations to chat context

src/components/Messages/AnnotationContent/index.tsx

@@ -0,0 +1,37 @@
+import { AnnotationContent as IAnnotationContent, Role } from "@types";
+import type { FC } from "react";
+import { useState } from "react";
+import { TextFile } from "@icons";
+import style from "./style.module.css";
+
+export interface AnnotationContentProps {
+  role: Extract<Role, "user">;
+  content: IAnnotationContent;
+}
+
+export const AnnotationContent: FC<AnnotationContentProps> = ({ content, role }) => {
+  const [expanded, setExpanded] = useState(false);
+  const rawContent = content.content.content;
+
+  return (
+    <div
+      className={`${style.annotationContent} ${expanded ? style.expanded : ""}`}
+      data-role={role}
+      data-type="annotation-content"
+      role="button"
+      tabIndex={0}
+      onClick={() => setExpanded(!expanded)}
+    >
+      <div className={style.header}>
+        <TextFile />
+        <span className={style.label}>{expanded ? "Annotation" : "Show more"}</span>
+      </div>
+      {expanded && (
+        <div
+          className={style.body}
+          dangerouslySetInnerHTML={{ __html: rawContent }}
+        />
+      )}
+    </div>
+  );
+};

src/components/Messages/AnnotationContent/style.module.css

@@ -0,0 +1,58 @@
+.annotationContent {
+  background-color: var(--clover-ai-colors-accentAlt);
+  border-radius: 0.5rem;
+  color: var(--clover-ai-colors-secondary);
+  cursor: pointer;
+  padding: 0.75rem;
+  width: fit-content;
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.header svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+.label {
+  font-size: 0.75rem;
+}
+
+.body {
+  margin-top: 0.5rem;
+  overflow: hidden;
+}
+
+.body p {
+  margin: 0;
+}
+
+.annotationContent:not(.expanded) {
+  padding: 0.5rem;
+}
+
+.annotationContent:not(.expanded) .header {
+  gap: 0.25rem;
+}
+
+.annotationContent:not(.expanded) .header svg {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+.annotationContent.expanded .body {
+  animation: fadeIn 100ms ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/components/Messages/Message/index.tsx

@@ -1,5 +1,6 @@
 import type { Message as IMessage } from "@types";
 import { forwardRef } from "react";
+import { AnnotationContent } from "../AnnotationContent";
 import { MediaContent } from "../MediaContent";
 import { TextContent } from "../TextContent";
 import style from "./style.module.css";
@@ -19,11 +20,18 @@ export const Message = forwardRef<HTMLDivElement, MessageProps>(({ message }, re
       )}
       {message.role === "user" &&
         message.content.map((content, index) => {
-          return content.type === "text" ? (
-            <TextContent key={index} role={message.role} textContent={content} type="text" />
-          ) : content.type === "media" ? (
-            <MediaContent content={content} key={index} role={message.role} />
-          ) : null;
+          switch (content.type) {
+            case "text":
+              return (
+                <TextContent key={index} role={message.role} textContent={content} type="text" />
+              );
+            case "media":
+              return <MediaContent content={content} key={index} role={message.role} />;
+            case "annotation":
+              return <AnnotationContent content={content} key={index} role={message.role} />;
+            default:
+              return null;
+          }
         })}
     </div>
   );

src/icons/TextFile.tsx

@@ -0,0 +1,18 @@
+export const TextFile: React.FC<React.SVGProps<SVGSVGElement>> = () => {
+  return (
+    <svg
+      fill="currentColor"
+      height="100%"
+      viewBox="0 0 15 15"
+      width="100%"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M3 2.5C3 2.22386 3.22386 2 3.5 2H9.08579C9.21839 2 9.34557 2.05268 9.43934 2.14645L11.8536 4.56066C11.9473 4.65443 12 4.78161 12 4.91421V12.5C12 12.7761 11.7761 13 11.5 13H3.5C3.22386 13 3 12.7761 3 12.5V2.5ZM3.5 1C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V4.91421C13 4.51639 12.842 4.13486 12.5607 3.85355L10.1464 1.43934C9.86514 1.15804 9.48361 1 9.08579 1H3.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5H7.5C7.77614 5 8 4.77614 8 4.5C8 4.22386 7.77614 4 7.5 4H4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H10.5C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10H4.5Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};

src/icons/index.ts

@@ -4,3 +4,4 @@ export { BulletList } from "./BulletList";
 export { Clear } from "./Clear";
 export { Close } from "./Close";
 export { Gear } from "./Gear";
+export { TextFile } from "./TextFile";

src/plugin/Panel/ChatInput/SelectedAnnotation/index.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@components";
+import { usePlugin } from "@context";
+import { Close, TextFile } from "@icons";
+import type { Annotation } from "@types";
+import style from "./style.module.css";
+
+export interface SelectedAnnotationProps {
+  annotation: Annotation;
+}
+
+export const SelectedAnnotation: React.FC<SelectedAnnotationProps> = ({ annotation }) => {
+  const { dispatch, state } = usePlugin();
+
+  function handleClick(id: Annotation["id"]) {
+    const newContent = state.selectedContent.filter(
+      (item) => !(item.type === "annotation" && item.content.id === id),
+    );
+    dispatch({ type: "setSelectedContent", selectedContent: newContent });
+  }
+
+  const truncatedContent =
+    annotation.content.length > 15
+      ? annotation.content.substring(0, 15) + "..."
+      : annotation.content;
+
+  return (
+    <div className={style.selectedAnnotation}>
+      <span className={style.annotationContent} title={truncatedContent}>
+        <TextFile />
+      </span>
+      <Button
+        aria-label="Remove annotation"
+        shape="circle"
+        size="small"
+        title="Remove annotation"
+        variant="secondary"
+        onClick={() => handleClick(annotation.id)}
+      >
+        <Close />
+      </Button>
+    </div>
+  );
+};

src/plugin/Panel/ChatInput/SelectedAnnotation/style.module.css

@@ -0,0 +1,21 @@
+.selectedAnnotation {
+  display: grid;
+  width: 30px;
+  height: 30px;
+
+  > * {
+    grid-area: 1/1;
+  }
+
+  .annotationContent svg {
+    color: var(--clover-ai-colors-accentAlt);
+  }
+
+  > button {
+    width: fit-content;
+    height: fit-content;
+    transform-origin: bottom right;
+    translate: 40% 40%;
+    transform: scale(0.6);
+  }
+}

src/plugin/Panel/ChatInput/SelectedMedia/index.tsx

@@ -11,8 +11,10 @@ export const SelectedMedia: React.FC<SelectedMediaProps> = ({ media }) => {
   const { dispatch, state } = usePlugin();
 
   function handleClick(id: Media["id"]) {
-    const newMedia = state.selectedMedia.filter((m) => m.id !== id);
-    dispatch({ type: "setSelectedMedia", selectedMedia: newMedia });
+    const newContent = state.selectedContent.filter(
+      (item) => !(item.type === "media" && item.content.id === id),
+    );
+    dispatch({ type: "setSelectedContent", selectedContent: newContent });
   }
   return (
     <div className={style.selectedMedia}>

src/plugin/Panel/ChatInput/index.tsx

@@ -1,9 +1,10 @@
 import { Button, PromptInput } from "@components";
 import { usePlugin } from "@context";
 import { Add, ArrowUp, Clear } from "@icons";
-import { MediaContent, UserMessage } from "@types";
+import { UserMessage } from "@types";
 import type { FC } from "react";
 import { useState } from "react";
+import { SelectedAnnotation } from "./SelectedAnnotation";
 import { SelectedMedia } from "./SelectedMedia";
 
 export const ChatInput: FC = () => {
@@ -43,13 +44,9 @@ export const ChatInput: FC = () => {
       },
     };
 
-    if (state.selectedMedia.length) {
-      const mediaContent: MediaContent[] = state.selectedMedia.map((media) => ({
-        type: "media",
-        content: media,
-      }));
-      userMessage.content.push(...mediaContent);
-      dispatch({ type: "setSelectedMedia", selectedMedia: [] }); // Clear selected media after sending
+    if (state.selectedContent.length) {
+      userMessage.content.push(...state.selectedContent);
+      dispatch({ type: "setSelectedContent", selectedContent: [] });
     }
 
     // Add user message immediately
@@ -101,12 +98,17 @@ export const ChatInput: FC = () => {
           }
         }}
       >
-        <div className="selected-media">
-          {state.selectedMedia.length ? (
-            state.selectedMedia.map((media, index) => <SelectedMedia key={index} media={media} />)
-          ) : (
-            <></>
-          )}
+        <div className="selected-content">
+          {state.selectedContent.map((item, index) => {
+            switch (item.type) {
+              case "media":
+                return <SelectedMedia key={index} media={item.content} />;
+              case "annotation":
+                return <SelectedAnnotation annotation={item.content} key={index} />;
+              default:
+                return <></>;
+            }
+          })}
         </div>
         <div className="controls">
           {PromptInputButtons && <PromptInputButtons />}
@@ -121,17 +123,18 @@ export const ChatInput: FC = () => {
             <Clear />
           </Button>
           <Button
-            aria-label="Add media"
+            aria-label="Add content"
             shape="circle"
             size="small"
             state={formState !== "success" ? formState : undefined}
-            title="Add media"
+            title="Add content"
             onClick={openDialog}
           >
             <Add />
           </Button>
           <Button
             aria-label="Submit question"
+            disabled={!textareaValue.trim()}
             shape="circle"
             size="small"
             state={formState !== "success" ? formState : undefined}