v2 message format and upgrade to ai sdk v5 (#743)

Co-authored-by: GitHub Action <[email protected]>
Co-authored-by: Liang-Shih Lin <[email protected]>
Co-authored-by: Dominik Engelhardt <[email protected]>
Co-authored-by: Jay V <[email protected]>
Co-authored-by: adamdottv <[email protected]>

1 files changed, 125 insertions, 0 deletions

diff --git a/packages/web/src/components/share/content-diff.module.css b/packages/web/src/components/share/content-diff.module.css
new file mode 100644
index 000000000..718ae3690
--- /dev/null
+++ b/packages/web/src/components/share/content-diff.module.css
@@ -0,0 +1,125 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--sl-color-divider);
+  background-color: var(--sl-color-bg-surface);
+  border-radius: 0.25rem;
+
+  [data-component="desktop"] {
+    display: block;
+  }
+
+  [data-component="mobile"] {
+    display: none;
+  }
+
+  [data-component="diff-block"] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-component="diff-row"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: stretch;
+
+    [data-slot="before"],
+    [data-slot="after"] {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow-x: visible;
+      min-width: 0;
+      align-items: stretch;
+      padding: 0 1rem;
+
+      &[data-diff-type="removed"] {
+        background-color: var(--sl-color-red-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-red-low) !important;
+          background-color: var(--sl-color-red-low) !important;
+        }
+
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 0.5ch;
+          top: 1px;
+          user-select: none;
+          color: var(--sl-color-red-high);
+        }
+      }
+
+      &[data-diff-type="added"] {
+        background-color: var(--sl-color-green-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-green-low) !important;
+          background-color: var(--sl-color-green-low) !important;
+        }
+
+        &::before {
+          content: "+";
+          position: absolute;
+          user-select: none;
+          color: var(--sl-color-green-high);
+          left: 0.5ch;
+          top: 1px;
+        }
+      }
+    }
+
+    [data-slot="before"] {
+      border-right: 1px solid var(--sl-color-divider);
+    }
+  }
+
+  .diff > .row:first-child [data-section="cell"]:first-child {
+    padding-top: 0.5rem;
+  }
+
+  .diff > .row:last-child [data-section="cell"]:last-child {
+    padding-bottom: 0.5rem;
+  }
+
+  [data-section="cell"] {
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    padding: 0.1875rem 0.5rem 0.1875rem 2.2ch;
+    margin: 0;
+
+    &[data-display-mobile="true"] {
+      display: none;
+    }
+
+    pre {
+      --shiki-dark-bg: var(--sl-color-bg-surface) !important;
+      background-color: var(--sl-color-bg-surface) !important;
+
+      white-space: pre-wrap;
+      word-break: break-word;
+
+      code > span:empty::before {
+        content: "\00a0";
+        white-space: pre;
+        display: inline-block;
+        width: 0;
+      }
+    }
+  }
+
+  @media (max-width: 40rem) {
+    [data-slot="desktop"] {
+      display: none;
+    }
+
+    [data-slot="mobile"] {
+      display: block;
+    }
+  }
+}