From 0f42ce3b80f795126fca88b4bf94143458afcdeb Mon Sep 17 00:00:00 2001
From: duanfuxiang <duanfuxiang@haizhi.com>
Date: Tue, 7 Jan 2025 14:18:18 +0800
Subject: [PATCH] fix style css in ts

---
 .../chat-view/MarkdownActionBlock.tsx         |    7 +-
 src/components/chat-view/ReactMarkdown.tsx    |    7 +-
 .../chat-input/plugins/shared/LexicalMenu.ts  |    5 +-
 src/render-plugin/render-surgestion-plugin.ts |    2 +-
 src/styles.css                                | 1631 +++++++++++++++++
 src/utils/image.ts                            |    8 +-
 src/utils/obsidian.ts                         |   13 +-
 src/utils/ollama.ts                           |    8 +-
 src/utils/parse-infio-block.test.ts           |   42 +-
 src/utils/parse-infio-block.ts                |   24 +-
 src/utils/prompt-generator.ts                 |   12 +-
 styles.css                                    |    9 +
 12 files changed, 1729 insertions(+), 39 deletions(-)
 create mode 100644 src/styles.css

diff --git a/src/components/chat-view/MarkdownActionBlock.tsx b/src/components/chat-view/MarkdownActionBlock.tsx
index ed9fa8d..57eedfb 100644
--- a/src/components/chat-view/MarkdownActionBlock.tsx
+++ b/src/components/chat-view/MarkdownActionBlock.tsx
@@ -2,6 +2,7 @@ import { Check, CopyIcon, Loader2 } from 'lucide-react'
 import { PropsWithChildren, useMemo, useState } from 'react'
 
 import { useDarkModeContext } from '../../contexts/DarkModeContext'
+import { InfioBlockAction } from '../../utils/parse-infio-block'
 
 import { MemoizedSyntaxHighlighterWrapper } from './SyntaxHighlighterWrapper'
 
@@ -26,7 +27,7 @@ export default function MarkdownActionBlock({
   filename?: string
   startLine?: number
   endLine?: number
-  action?: 'edit' | 'new' | 'reference'
+  action?: InfioBlockAction
 }>) {
   const [copied, setCopied] = useState(false)
   const { isDarkMode } = useDarkModeContext()
@@ -67,7 +68,7 @@ export default function MarkdownActionBlock({
               </>
             )}
           </button>
-          {action === 'edit' && (
+          {action === InfioBlockAction.Edit && (
             <button
               onClick={() => {
                 onApply({
@@ -88,7 +89,7 @@ export default function MarkdownActionBlock({
               )}
             </button>
           )}
-          {action === 'new' && (
+          {action === InfioBlockAction.New && (
             <button
               onClick={() => {
                 onApply({
diff --git a/src/components/chat-view/ReactMarkdown.tsx b/src/components/chat-view/ReactMarkdown.tsx
index d5c787e..8396660 100644
--- a/src/components/chat-view/ReactMarkdown.tsx
+++ b/src/components/chat-view/ReactMarkdown.tsx
@@ -2,7 +2,8 @@ import React, { useMemo } from 'react'
 import Markdown from 'react-markdown'
 
 import {
-	ParsedinfioBlock,
+	InfioBlockAction,
+	ParsedInfioBlock,
 	parseinfioBlocks,
 } from '../../utils/parse-infio-block'
 
@@ -23,7 +24,7 @@ function ReactMarkdown({
 	children: string
 	isApplying: boolean
 }) {
-	const blocks: ParsedinfioBlock[] = useMemo(
+	const blocks: ParsedInfioBlock[] = useMemo(
 		() => parseinfioBlocks(children),
 		[children],
 	)
@@ -35,7 +36,7 @@ function ReactMarkdown({
 					<Markdown key={index} className="infio-markdown">
 						{block.content}
 					</Markdown>
-				) : block.startLine && block.endLine && block.filename && block.action === 'reference' ? (
+				) : block.startLine && block.endLine && block.filename && block.action === InfioBlockAction.Reference ? (
 					<MarkdownReferenceBlock
 						key={index}
 						filename={block.filename}
diff --git a/src/components/chat-view/chat-input/plugins/shared/LexicalMenu.ts b/src/components/chat-view/chat-input/plugins/shared/LexicalMenu.ts
index a5e6165..adcf054 100644
--- a/src/components/chat-view/chat-input/plugins/shared/LexicalMenu.ts
+++ b/src/components/chat-view/chat-input/plugins/shared/LexicalMenu.ts
@@ -538,9 +538,8 @@ export function useMenuAnchorRef(
         containerDiv.setAttribute('aria-label', 'Typeahead menu')
         containerDiv.setAttribute('id', 'typeahead-menu')
         containerDiv.setAttribute('role', 'listbox')
-        containerDiv.style.display = 'block'
-        containerDiv.style.position = 'absolute'
-        parent.append(containerDiv)
+				containerDiv.classList.add('infio-utils-lexical-menu-container')
+      parent.append(containerDiv)
       }
       anchorElementRef.current = containerDiv
       rootElement.setAttribute('aria-controls', 'typeahead-menu')
diff --git a/src/render-plugin/render-surgestion-plugin.ts b/src/render-plugin/render-surgestion-plugin.ts
index 4b93b24..a40249e 100644
--- a/src/render-plugin/render-surgestion-plugin.ts
+++ b/src/render-plugin/render-surgestion-plugin.ts
@@ -86,7 +86,7 @@ class InlineSuggestionWidget extends WidgetType {
   toDOM() {
     const span = document.createElement("span");
     span.textContent = this.display_suggestion;
-    span.style.opacity = "0.4"; // TODO replace with css
+    span.classList.add("infio-utils-display-suggestion-opacity");
     span.onclick = () => {
       cancelSuggestion(this.view);
     }
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..645ab3d
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,1631 @@
+/*
+ * Autocomplete 
+ */
+
+.infio-autocomplete-setting-list-item {
+  display: flex;
+  align-items: center;
+  padding: 0.75em 0;
+}
+
+.infio-autocomplete-setting-item-textarea {
+  width: 100%;
+  resize: vertical;
+  padding: 0.5em;
+  margin-top: 0.5em;
+}
+
+.infio-autocomplete-loader-placeholder {
+  width: 25px;
+  height: 25px;
+}
+
+.infio-autocomplete-loader {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  position: relative;
+  animation: infio-autocomplete-rotate 1s linear infinite;
+}
+
+.infio-autocomplete-loader::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 2px solid #1976d2;
+  animation: infio-autocomplete-prix-clip-fix 2s linear infinite;
+}
+
+@keyframes infio-autocomplete-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes infio-autocomplete-prix-clip-fix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}
+
+/* 
+ * Chat 
+ */
+.infio-chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: calc(var(--size-4-1) * -1);
+}
+
+.infio-chat-header-title {
+  font-size: var(--font-ui-medium);
+  font-weight: var(--font-medium);
+  margin: 0;
+}
+
+.infio-chat-header-buttons {
+  display: flex;
+  gap: var(--size-2-1);
+}
+
+.infio-chat-container {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  height: 100%;
+
+  .infio-stop-gen-btn {
+    z-index: 1000;
+    position: absolute;
+    bottom: 160px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: var(--size-4-1);
+  }
+}
+
+/* 
+ * Chat Messages and Content
+ * - Message containers
+ * - Message styling*/
+.infio-chat-messages {
+  flex-grow: 1;
+  overflow-y: auto;
+  user-select: text;
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-4-1);
+  padding: 0 var(--size-4-3) var(--size-4-5) var(--size-4-3);
+  margin: var(--size-4-2) calc(var(--size-4-3) * -1) 0;
+
+  .infio-chat-messages-user {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-4-1);
+  }
+
+  .infio-chat-messages-assistant {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: var(--size-4-2);
+  }
+}
+
+/* 
+ * Markdown Content Styling
+ * - Typography and text formatting
+ * - Lists, blockquotes, and code blocks
+ */
+
+.infio-markdown {
+  line-height: var(--line-height-normal);
+  font-size: var(--font-ui-small);
+
+  h1 {
+    font-size: var(--font-ui-large);
+  }
+
+  h2 {
+    font-size: var(--font-ui-medium);
+  }
+
+  h3 {
+    font-size: var(--font-ui-small);
+  }
+
+  h4 {
+    font-size: var(--font-ui-smaller);
+  }
+
+  h5 {
+    font-size: var(--font-ui-smallest);
+  }
+
+  h6 {
+    font-size: var(--font-ui-smallest);
+  }
+
+  p {
+    font-size: var(--font-ui-small);
+  }
+
+  ul {
+    font-size: var(--font-ui-small);
+    padding-left: var(--size-4-4);
+  }
+
+  ol {
+    font-size: var(--font-ui-small);
+    padding-left: var(--size-4-4);
+  }
+
+  li {
+    font-size: var(--font-ui-small);
+  }
+
+  blockquote {
+    font-size: var(--font-ui-small);
+    font-style: var(--blockquote-style);
+    background-color: var(--blockquote-background-color);
+    margin: 0;
+    padding-left: var(--size-4-2);
+    border-left: var(--blockquote-border-thickness) solid
+      var(--blockquote-border-color);
+  }
+
+  code {
+    font-size: var(--font-ui-small);
+    border-radius: var(--code-radius);
+    padding: 0.1em 0.25em;
+    color: var(--code-normal);
+    font-size: var(--code-size);
+    background-color: var(--code-background);
+    vertical-align: baseline;
+  }
+
+  table {
+    font-size: var(--font-ui-small);
+  }
+
+  thead {
+    font-size: var(--font-ui-small);
+  }
+
+  tbody {
+    font-size: var(--font-ui-small);
+  }
+
+  tr {
+    font-size: var(--font-ui-small);
+  }
+
+  td {
+    font-size: var(--font-ui-small);
+  }
+
+  th {
+    font-size: var(--font-ui-small);
+  }
+}
+
+/* 
+ * Input Controls and Buttons
+ * - Buttons and interactive elements
+ * - Input areas and textareas
+ */
+
+button:not(.clickable-icon).infio-chat-list-dropdown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--text-muted);
+
+  &:hover {
+    background-color: var(--background-modifier-hover);
+  }
+}
+
+.obsidian-default-textarea {
+  -webkit-app-region: no-drag;
+  background: var(--background-modifier-form-field);
+  color: var(--text-normal);
+  font-family: inherit;
+  padding: 0;
+  font-size: var(--font-ui-small);
+  outline: none;
+  min-height: 80px;
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: var(--font-ui-small);
+  padding: var(--size-2-1);
+}
+
+.infio-chat-user-input-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  -webkit-app-region: no-drag;
+  background: var(--background-secondary-alt);
+  border: var(--input-border-width) solid var(--background-modifier-border);
+  color: var(--text-normal);
+  font-family: inherit;
+  padding: calc(var(--size-2-2) + 1px);
+  font-size: var(--font-ui-small);
+  border-radius: var(--radius-s);
+  outline: none;
+
+  &:focus-within,
+  &:focus,
+  &:focus-visible,
+  &:active {
+    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
+    transition: box-shadow 0.15s ease-in-out;
+  }
+}
+
+.infio-chat-user-input-files {
+  display: flex;
+  flex-direction: row;
+  gap: var(--size-4-1);
+  flex-wrap: wrap;
+  padding-bottom: var(--size-4-1);
+}
+
+.infio-chat-user-input-controls {
+  display: flex;
+  flex-direction: row;
+  gap: var(--size-4-1);
+  justify-content: space-between;
+  align-items: center;
+  height: var(--size-4-4);
+
+  .infio-chat-user-input-controls__model-select-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--size-2-2);
+  }
+
+  .infio-chat-user-input-controls__buttons {
+    flex-shrink: 0;
+    display: flex;
+    gap: var(--size-4-2);
+    align-items: center;
+  }
+}
+
+.infio-chat-user-input-controls .infio-chat-user-input-submit-button {
+  display: flex;
+  align-items: center;
+  gap: var(--size-4-1);
+  font-size: var(--font-smallest);
+  color: var(--text-muted);
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0 var(--size-2-1);
+  border-radius: var(--radius-s);
+  height: var(--size-4-4);
+  cursor: pointer;
+  transition: color 0.15s ease-in-out;
+
+  &:hover {
+    color: var(--text-normal);
+  }
+
+  .infio-chat-user-input-submit-button-icons {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.infio-chat-user-input-controls .infio-chat-user-input-vault-button {
+  display: flex;
+  align-items: center;
+  gap: var(--size-4-1);
+  font-size: var(--font-smallest);
+  color: var(--text-muted);
+  background-color: var(--background-secondary-alt) !important;
+  border: none;
+  box-shadow: none;
+  padding: 0 var(--size-2-1);
+  border-radius: var(--radius-s);
+  height: var(--size-4-4);
+  cursor: pointer;
+  transition: color 0.15s ease-in-out;
+
+  &:hover {
+    color: var(--text-normal);
+  }
+
+  .infio-chat-user-input-vault-button-icons {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.infio-chat-user-input-file-badge {
+  display: flex;
+  align-items: center;
+  background-color: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);
+  border-radius: var(--radius-s);
+  font-size: var(--font-smallest);
+  padding: var(--size-2-1) var(--size-4-1);
+  gap: var(--size-2-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.infio-chat-user-input-file-badge-focused {
+    border: 1px solid var(--interactive-accent);
+  }
+}
+
+.infio-chat-user-input-file-badge:hover {
+  background-color: var(--background-modifier-hover);
+  cursor: pointer;
+}
+
+.infio-chat-user-input-file-badge-delete {
+  cursor: pointer;
+  display: flex;
+  color: var(--text-muted);
+}
+
+.infio-chat-user-input-file-badge-name {
+  display: flex;
+  flex-direction: row;
+  gap: var(--size-2-1);
+  flex-grow: 1;
+  overflow: hidden;
+  align-items: center;
+}
+
+.infio-chat-user-input-file-badge-name-icon {
+  color: var(--text-muted);
+}
+
+.infio-chat-user-input-file-badge-name span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.infio-chat-user-input-file-badge-name-block-suffix {
+  color: var(--text-faint);
+  flex-grow: 0;
+}
+
+.infio-chat-user-input-file-badge-current {
+  color: var(--color-base-50);
+}
+
+.infio-chat-user-input-file-content-preview {
+  background-color: var(--background-primary);
+  border-radius: var(--radius-s);
+  border: 1px solid var(--background-modifier-border);
+  max-height: 350px;
+  overflow-y: auto;
+  white-space: pre-line;
+
+  img {
+    max-width: 100%;
+    max-height: 350px;
+  }
+}
+
+/*
+ * Interactive States
+ * - Hover and active states
+ * - Transitions and animations
+ */
+
+@media (hover: hover) {
+  .obsidian-default-textarea:hover {
+    border-color: var(--background-modifier-border-hover);
+    transition:
+      box-shadow 0.15s ease-in-out,
+      border 0.15s ease-in-out;
+  }
+}
+
+.obsidian-default-textarea:active {
+  border-color: var(--background-modifier-border-focus);
+  transition:
+    box-shadow 0.15s ease-in-out,
+    border 0.15s ease-in-out;
+}
+
+/* 
+ * Popovers and Dialogs
+ * - Popover styles
+ * - Dialog styles
+ */
+
+.infio-popover {
+  z-index: 1000;
+  background: var(--background-primary);
+  box-shadow: var(--shadow-s);
+  border-radius: var(--radius-m);
+  /* position: fixed; */
+  border: 1px solid var(--background-modifier-border);
+  overflow: hidden;
+  width: 240px;
+  max-width: 240px;
+}
+
+.infio-popover ul {
+  padding: 0;
+  list-style: none;
+  margin: 0;
+  max-height: 200px;
+  overflow-y: scroll;
+}
+
+.infio-popover ul::-webkit-scrollbar {
+  display: none;
+}
+
+.infio-popover ul {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding: var(--size-4-1) 0;
+}
+
+.infio-popover ul li {
+  margin: 0;
+  min-width: 180px;
+  font-size: var(--font-ui-smaller);
+  outline: none;
+  cursor: pointer;
+  border-radius: 0;
+}
+
+.infio-popover ul li.selected {
+  background: var(--background-modifier-hover);
+}
+
+.infio-popover li {
+  z-index: 1000;
+  max-height: 300px;
+  overflow-y: auto;
+  background-color: var(--background-primary);
+  border: 1px solid var(--background-modifier-border);
+  margin: 0 8px 0 8px;
+  padding: var(--size-2-3) var(--size-4-2);
+  color: var(--text-normal);
+  cursor: pointer;
+  line-height: var(--line-height-tight);
+  font-size: var(--font-ui-smaller);
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  background-color: var(--background-primary);
+  border-radius: 8px;
+  border: 0;
+  min-height: 20px;
+  align-items: center;
+  gap: var(--size-4-1);
+  align-items: start;
+}
+
+.infio-chat-list-dropdown-empty {
+  background: transparent;
+  cursor: default;
+  color: var(--text-faint);
+}
+
+.infio-popover li.active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.infio-popover li:hover {
+  background-color: var(--background-modifier-hover);
+}
+
+.infio-popover-item-icon {
+  display: flex;
+  user-select: none;
+  line-height: 16px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 14px;
+  padding-top: 1px;
+  align-items: center;
+  color: var(--text-muted);
+  min-width: fit-content;
+}
+
+.infio-popover li:hover {
+  background-color: var(--background-modifier-hover);
+  cursor: pointer;
+}
+
+.infio-popover li .infio-chat-list-dropdown-item-icon {
+  visibility: hidden;
+  padding: var(--size-2-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.infio-popover li:hover .infio-chat-list-dropdown-item-icon {
+  visibility: visible;
+}
+
+.infio-popover li .infio-chat-list-dropdown-item-icon:hover {
+  background-color: var(--background-modifier-hover);
+  border-radius: var(--radius-s);
+}
+
+.infio-chat-list-dropdown-content {
+  width: 280px;
+  max-width: 280px;
+}
+
+.infio-chat-list-dropdown-content li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.infio-chat-list-dropdown-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+input[type='text'].infio-chat-list-dropdown-item-title-input {
+  width: 100%;
+  font-size: var(--font-ui-smaller);
+}
+
+.infio-chat-list-dropdown-item-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--size-4-1);
+}
+
+.infio-chat-code-block {
+  position: relative;
+  border: 1px solid var(--background-modifier-border);
+  border-radius: var(--radius-s);
+}
+
+.infio-chat-code-block code {
+  padding: 0;
+}
+
+.infio-chat-code-block-header {
+  display: none;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--font-smallest);
+  padding: 0 var(--size-4-1) 0 0;
+}
+
+.infio-chat-code-block:hover .infio-chat-code-block-header {
+  position: absolute;
+  top: calc(var(--size-4-3) * -1);
+  right: var(--size-4-1);
+  display: flex;
+}
+
+.infio-chat-code-block.has-filename .infio-chat-code-block-header {
+  display: flex;
+  border-bottom: 1px solid var(--background-modifier-border);
+  background-color: var(--background-primary);
+  border-radius: var(--radius-s) var(--radius-s) 0 0;
+  height: calc(var(--size-4-8) - var(--size-4-1));
+}
+
+.infio-chat-code-block.has-filename:hover .infio-chat-code-block-header {
+  position: inherit;
+  top: 0;
+  left: 0;
+}
+
+.infio-chat-code-block-header-filename {
+  padding-left: var(--size-4-2);
+  font-size: var(--font-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.infio-chat-code-block-header-button {
+  display: flex;
+  gap: var(--size-4-1);
+  right: 0;
+  font-family: var(--font-interface);
+  padding: 0;
+  font-size: var(--font-small);
+  font-weight: var(--font-medium);
+  color: var(--text-muted);
+}
+
+.infio-chat-code-block.has-filename .infio-chat-code-block-header-button {
+  gap: 0;
+  overflow: hidden;
+  min-width: fit-content;
+  height: 100%;
+}
+
+.infio-chat-code-block.has-filename
+  .infio-chat-code-block-header-button
+  button {
+  box-shadow: none;
+  border: 0;
+  padding: 0 var(--size-4-2);
+  border-radius: 0;
+  background-color: var(--background-primary);
+  font-size: var(--font-medium);
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--background-modifier-hover);
+  }
+}
+
+.infio-chat-code-block-header-button button {
+  display: flex;
+  gap: var(--size-4-1);
+  font-size: var(--font-ui-smaller);
+}
+
+.infio-chat-code-block-content {
+  margin: 0;
+}
+
+/* 
+ * Lexical Content Editable
+ * - Styles for the content editable area
+ */
+
+.infio-chat-lexical-content-editable-root {
+  min-height: 46px;
+  max-height: 120px;
+}
+
+.infio-chat-lexical-content-editable-root .mention {
+  background-color: var(--tag-background);
+  color: var(--tag-color);
+  padding: var(--size-2-1) calc(var(--size-2-1));
+  border-radius: var(--radius-s);
+  background-color: var(--tag-background);
+  color: var(--tag-color);
+  padding: 0 calc(var(--size-2-1));
+  border-radius: var(--radius-s);
+  word-break: break-all;
+}
+
+.infio-chat-lexical-content-editable-paragraph {
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* 
+ * Settings and Dialogs
+ * - Styles for settings and dialogs
+ */
+
+.infio-chat-settings-textarea {
+  display: block;
+  margin: var(--size-4-2) 0;
+  padding: 0;
+
+  .infio-item-control {
+    width: 100%;
+  }
+
+  textarea {
+    width: 100%;
+    min-height: 100px;
+    resize: none;
+  }
+}
+
+.infio-chat-setting-item-container {
+  margin: var(--size-4-2) 0;
+  padding: var(--size-4-2) var(--size-4-4);
+}
+
+.infio-chat-setting-item-container-append {
+  margin: var(--size-4-2) 0;
+  padding: var(--size-4-2) var(--size-4-4);
+  border-top: none;
+}
+
+.infio-chat-settings-model-container {
+  margin: var(--size-4-2) 0;
+  padding: var(--size-4-2) var(--size-4-4);
+  border-left: 2px solid var(--interactive-accent);
+  background-color: var(--background-secondary);
+  border-radius: var(--radius-s);
+
+  .setting-item {
+    border-top: none;
+
+    &:first-child {
+      margin-top: var(--size-4-2);
+    }
+  }
+}
+
+.infio-chat-dialog-content {
+  position: fixed;
+  left: calc(50% - var(--size-4-4));
+  top: 50%;
+  z-index: 50;
+  display: grid;
+  width: calc(100% - var(--size-4-8));
+  max-width: 32rem;
+  transform: translate(-50%, -50%);
+  gap: var(--size-4-2);
+  border: var(--border-width) solid var(--background-modifier-border);
+  background-color: var(--background-secondary);
+  padding: var(--size-4-5);
+  transition-duration: 200ms;
+  border-radius: var(--radius-m);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  margin: var(--size-4-4);
+
+  .infio-dialog-header {
+    margin-bottom: var(--size-4-2);
+    display: grid;
+    gap: var(--size-2-3);
+  }
+
+  .infio-dialog-title {
+    font-size: var(--font-ui-medium);
+    font-weight: var(--font-semibold);
+    line-height: var(--line-height-tight);
+    margin: 0;
+  }
+
+  .infio-dialog-input {
+    display: grid;
+    gap: var(--size-4-1);
+
+    & label {
+      font-size: var(--font-ui-smaller);
+    }
+  }
+
+  .infio-dialog-description {
+    font-size: var(--font-ui-small);
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .infio-dialog-footer {
+    margin-top: var(--size-4-2);
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .infio-dialog-close {
+    position: absolute;
+    right: var(--size-4-4);
+    top: var(--size-4-4);
+    cursor: var(--cursor);
+    opacity: 0.7;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.infio-chat-template-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--size-4-1);
+  width: 100%;
+
+  .infio-chat-template-menu-item-delete {
+    display: flex;
+    align-items: center;
+    padding: var(--size-4-1);
+    margin: calc(var(--size-4-1) * -1);
+    opacity: 0.7;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.infio-chat-message-actions {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    width: 20px;
+    padding: 0;
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    color: var(--text-faint);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--background-modifier-hover);
+    }
+  }
+
+  .infio-chat-message-actions-icon--copied {
+    color: var(--text-muted);
+  }
+}
+
+.infio-chat-popover-content {
+  z-index: 1000;
+  background-color: var(--background-primary);
+  border: 1px solid var(--background-modifier-border);
+  border-radius: var(--radius-s);
+  padding: var(--size-4-2);
+  font-size: var(--font-smallest);
+  animation: fadeIn 0.1s ease-in-out;
+}
+
+.infio-similarity-search-results {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--font-smaller);
+  padding-top: var(--size-4-1);
+  padding-bottom: var(--size-4-1);
+  user-select: none;
+
+  .infio-similarity-search-results__trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--size-4-1);
+    padding: var(--size-4-1);
+    border-radius: var(--radius-s);
+    cursor: pointer;
+    &:hover {
+      background-color: var(--background-modifier-hover);
+    }
+  }
+
+  .infio-similarity-search-item {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: var(--size-4-2);
+    padding: var(--size-4-1);
+    border-radius: var(--radius-s);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--background-modifier-hover);
+    }
+
+    .infio-similarity-search-item__similarity {
+      flex-shrink: 0;
+      font-size: var(--font-smallest);
+      color: var(--text-muted);
+    }
+
+    .infio-similarity-search-item__path {
+      flex-shrink: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: var(--font-smallest);
+    }
+
+    .infio-similarity-search-item__line-numbers {
+      flex-shrink: 0;
+      margin-left: auto;
+      font-size: var(--font-smallest);
+    }
+  }
+}
+
+/* 
+* LLM Info
+*/
+.infio-llm-info-content {
+  width: 320px;
+  display: grid;
+  gap: var(--size-4-3);
+}
+
+.infio-llm-info-header {
+  display: grid;
+  gap: var(--size-2-2);
+  font-size: var(--font-ui-small);
+  font-weight: var(--font-semibold);
+}
+
+.infio-llm-info-tokens {
+  display: grid;
+  gap: var(--size-4-2);
+}
+
+.infio-llm-info-tokens-header {
+  font-size: var(--font-ui-small);
+  font-weight: var(--font-medium);
+}
+
+.infio-llm-info-tokens-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: var(--size-4-5);
+  row-gap: var(--size-4-2);
+  font-size: var(--font-ui-small);
+}
+
+.infio-llm-info-token-row {
+  display: flex;
+  align-items: center;
+  gap: var(--size-2-3);
+}
+
+.infio-llm-info-token-value {
+  margin-left: auto;
+  color: var(--text-muted);
+}
+
+.infio-llm-info-token-total {
+  grid-column: span 2;
+  font-weight: var(--font-medium);
+}
+
+.infio-llm-info-footer-row {
+  display: flex;
+  align-items: center;
+  gap: var(--size-2-3);
+  font-size: var(--font-ui-small);
+  font-weight: var(--font-medium);
+}
+
+.infio-llm-info-footer-value {
+  margin-left: auto;
+}
+
+.infio-llm-info-model {
+  color: var(--text-muted);
+}
+
+.infio-llm-info-icon--input {
+  height: var(--size-4-3);
+  width: var(--size-4-3);
+  color: var(--color-green);
+}
+
+.infio-llm-info-icon--output {
+  height: var(--size-4-3);
+  width: var(--size-4-3);
+  color: var(--color-blue);
+}
+
+.infio-llm-info-icon--total {
+  height: var(--size-4-3);
+  width: var(--size-4-3);
+  color: var(--text-normal);
+}
+
+.infio-llm-info-icon--footer {
+  height: var(--size-4-4);
+  width: var(--size-4-4);
+}
+
+.infio-llm-model-settings-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.infio-llm-model-settings-table th,
+.infio-llm-model-settings-table td {
+  text-align: center;
+  vertical-align: middle;
+  padding: 0.5em;
+  border: none !important;
+  height: 2.5em;
+}
+
+.infio-llm-model-settings-table th {
+  font-weight: bold;
+}
+
+.infio-llm-model-settings-table th:nth-child(1) {
+  width: 10%;
+}
+
+.infio-llm-model-settings-table th:nth-child(2) {
+  width: 50%;
+}
+
+.infio-llm-model-settings-table th:nth-child(3),
+.infio-llm-model-settings-table th:nth-child(4),
+.infio-llm-model-settings-table th:nth-child(5),
+.infio-llm-model-settings-table th:nth-child(6) {
+  width: 8%;
+}
+
+/* Add specific styles for toggle cells */
+
+.infio-llm-model-settings-table td .infio-llm-setting-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin: 0;
+}
+
+.infio-llm-model-settings-table .switch {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin: 0;
+}
+
+.infio-llm-add-custom-model {
+  margin-top: 20px;
+}
+
+.infio-llm-chat-setting-title {
+  border-top: 1px solid var(--background-modifier-border);
+}
+
+.infio-llm-setting-item-name {
+  font-weight: bold;
+  display: block;
+  color: var(--inline-title-color);
+  margin-top: 5px;
+  margin-bottom: 3px;
+}
+
+.infio-llm-setting-item-control {
+  width: 50%; /* Adjust the width as needed */
+  max-width: 100%; /* Ensures it doesn't exceed the parent width */
+}
+
+.infio-llm-setting-item-control::placeholder {
+  color: gray;
+  opacity: 0.5;
+}
+
+.infio-llm-setting-item-control[type='range'] {
+  width: 70%;
+}
+
+/* control pc and mobile view */
+
+.desktop-only {
+  display: table;
+}
+
+@media screen and (max-width: 768px) {
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: block;
+  }
+
+  .model-cards-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 8px;
+  }
+
+  .model-card {
+    background: var(--background-primary-alt);
+    border-radius: 8px;
+    padding: 0 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .model-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--background-modifier-border);
+  }
+
+  .model-card-header h3 {
+    margin: 0;
+    font-size: 1.1em;
+    color: var(--text-normal);
+  }
+
+  .model-provider {
+    font-size: 0.9em;
+    color: var(--text-muted);
+    padding: 2px 0px;
+    background: var(--background-secondary);
+    border-radius: 4px;
+    width: fit-content;
+    align-self: flex-start;
+  }
+
+  .model-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .model-card-controls {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+  }
+
+  .model-card-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .model-card-item span {
+    color: var(--text-muted);
+    font-size: 0.9em;
+    white-space: nowrap;
+  }
+
+  .model-card-item .switch {
+    margin: 0;
+  }
+
+  .model-select-content,
+  .chain-select-content {
+    background: var(--background-primary);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .model-select-content [role='menuitem'],
+  .chain-select-content [role='menuitem'] {
+    background: var(--background-primary);
+    color: var(--text-normal);
+    padding: 8px 12px;
+    font-size: 14px;
+  }
+
+  .model-select-content [role='menuitem']:hover,
+  .chain-select-content [role='menuitem']:hover {
+    background: var(--background-modifier-hover);
+  }
+}
+
+.infio-llm-add-model-button {
+}
+
+/*
+* ai block, use edit inline
+*/
+
+.infio-ai-block {
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+}
+
+.infio-ai-block-container {
+  background: var(--background-secondary-alt);
+  border-radius: 4px;
+  padding: 0px;
+  border: 1px solid var(--background-modifier-border);
+}
+
+.infio-ai-block-input-wrapper {
+  position: relative;
+  margin-bottom: 0;
+}
+
+.infio-ai-block-content {
+  width: 80%;
+  background: transparent;
+  border: none !important;
+  padding: 8px;
+  padding-right: 40px;
+  height: 60px;
+  resize: none;
+  color: var(--text-normal);
+  font-size: 14px;
+  line-height: 1.4;
+  outline: none;
+  &:hover,
+  &:focus {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+}
+
+.infio-ai-block-close-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.infio-ai-block-controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  line-height: 1;
+  min-height: 0;
+  height: auto;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  width: 100%;
+}
+
+.infio-ai-block-model-select {
+  all: unset;
+  border: none;
+  &:hover {
+    border: none;
+  }
+  &:focus {
+    border: none;
+    background: none;
+    outline: none;
+  }
+  color: var(--text-muted);
+  padding: 0;
+  margin: 0 0 0 6px;
+  font-size: 14px;
+  cursor: pointer;
+  line-height: 1;
+  height: auto;
+  min-height: 0;
+  background: none;
+  box-shadow: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  & option {
+    background: none !important;
+    background-color: transparent !important;
+    color: var(--text-normal);
+    border: none;
+    outline: none;
+    box-shadow: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+/* Target Webkit browsers specifically */
+
+.infio-ai-block-model-select::-webkit-listbox {
+  background: transparent !important;
+  border: none !important;
+  outline: none !important;
+}
+
+/* Additional styles for the dropdown */
+
+select.infio-ai-block-model-select::-ms-expand {
+  display: none;
+}
+
+.infio-ai-block-submit-button {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px;
+  margin: 0 6px 6px 0;
+  line-height: 1;
+  min-height: 0;
+  height: auto;
+  display: inline;
+  box-sizing: content-box;
+}
+
+/*
+	Apply
+ */
+
+#infio-apply-view {
+  height: 100%;
+  font-family: var(--font-interface);
+
+  .infio-diff-line {
+    white-space: pre-wrap;
+    word-break: break-word;
+    display: flex;
+    align-items: start;
+    gap: var(--size-4-1);
+    color: var(--text-normal);
+    line-height: var(--line-height-normal);
+  }
+
+  .infio-diff-line.added {
+    background-color: rgba(var(--color-green-rgb), 0.2);
+  }
+
+  .infio-diff-line.removed {
+    background-color: rgba(var(--color-red-rgb), 0.2);
+  }
+
+  .view-content {
+    padding: 0;
+  }
+
+  .markdown-source-view.mod-cm6 {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .cm-editor {
+    flex: 1 1 0;
+    min-height: 0;
+    position: relative !important;
+    box-sizing: border-box;
+    display: flex !important;
+    flex-direction: column;
+  }
+
+  .cm-scroller {
+    padding: var(--file-margins);
+    display: flex !important;
+    align-items: flex-start !important;
+    line-height: 1.4;
+    height: 100%;
+    overflow-x: auto;
+    position: relative;
+    z-index: 0;
+  }
+
+  .cm-sizer {
+    max-width: var(--file-line-width);
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding-bottom: 488px;
+  }
+
+  .view-header {
+    height: var(--header-height);
+    display: flex;
+    border-bottom: var(--file-header-border);
+    background-color: var(--background-primary);
+    z-index: 1;
+    position: relative;
+    gap: var(--size-4-2);
+    padding: 0 var(--size-4-3);
+  }
+
+  .infio-diff-line-actions {
+    display: flex;
+    gap: 0;
+    border-radius: 0 0 var(--radius-s) var(--radius-s);
+    overflow: hidden;
+
+    button {
+      color: white;
+      padding: 0 var(--size-4-2);
+      height: var(--size-4-4);
+      font-size: var(--font-ui-smaller);
+      border-radius: 0;
+      min-width: var(--size-4-5);
+    }
+  }
+
+  .infio-accept {
+    background: rgba(var(--color-green-rgb), 0.7);
+    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
+  }
+
+  .infio-exclude {
+    background: rgba(var(--color-red-rgb), 0.7);
+    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
+  }
+
+  .view-header-title-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+  }
+
+  .view-actions {
+    button {
+      color: var(--text-normal);
+      font-weight: var(--font-medium);
+      gap: 2px;
+    }
+  }
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button.infio-chat-input-model-select {
+  background-color: transparent;
+  box-shadow: none;
+  border: 0;
+  padding: 0;
+  font-size: var(--font-smallest);
+  font-weight: var(--font-medium);
+  color: var(--text-muted);
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  height: var(--size-4-4);
+  max-width: 100%;
+
+  &:hover {
+    color: var(--text-normal);
+  }
+
+  .infio-chat-input-model-select__model-name {
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .infio-chat-input-model-select__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.infio-query-progress {
+  font-size: var(--font-ui-smaller);
+  color: var(--text-muted);
+}
+
+.infio-query-progress-detail {
+  font-size: var(--font-smallest);
+  color: var(--text-faint);
+}
+
+.infio-dot-loader {
+  display: inline-block;
+  text-align: left;
+}
+
+.infio-dot-loader::after {
+  content: '...';
+  animation: dotFade 0.75s steps(4, end) infinite;
+  color: var(--text-muted);
+}
+
+@keyframes dotFade {
+  0%,
+  100% {
+    content: '';
+  }
+  25% {
+    content: '.';
+  }
+  50% {
+    content: '..';
+  }
+  75% {
+    content: '...';
+  }
+}
+
+.infio-tooltip-content {
+  background-color: var(--background-primary);
+  border: 1px solid var(--background-modifier-border);
+  border-radius: var(--radius-s);
+  padding: var(--size-4-1) var(--size-4-2);
+  font-size: var(--font-smallest);
+  animation: fadeIn 0.1s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.infio-utils-display-suggestion-opacity {
+  opacity: 0.4;
+}
+
+.infio-utils-menu-container {
+  position: absolute;
+  display: block;
+}
+
+.infio-utils-lexical-menu-container {
+  position: absolute;
+  pointer-events: none;
+  user-select: none;
+  z-index: 100;
+}
+
+.infio-utils-lexical-menu-content {
+  position: relative;
+  pointer-events: auto;
+  user-select: text;
+  background-color: var(--background-primary);
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 6px;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+}
+
diff --git a/src/utils/image.ts b/src/utils/image.ts
index e035459..1a4507b 100644
--- a/src/utils/image.ts
+++ b/src/utils/image.ts
@@ -28,7 +28,13 @@ function fileToBase64(file: File): Promise<string> {
 	return new Promise((resolve, reject) => {
 		const reader = new FileReader()
 		reader.readAsDataURL(file)
-		reader.onload = () => resolve(reader.result as string)
+		reader.onload = () => {
+		  if (typeof reader.result === 'string') {
+		    resolve(reader.result)
+		  } else {
+		    reject(new Error('Unexpected file reader result type'))
+		  }
+		}
 		reader.onerror = () => reject(new Error('Failed to read file'))
 	})
 }
diff --git a/src/utils/obsidian.ts b/src/utils/obsidian.ts
index efaa0ad..6efba0b 100644
--- a/src/utils/obsidian.ts
+++ b/src/utils/obsidian.ts
@@ -1,4 +1,4 @@
-import { App, Editor, MarkdownView, TFile, TFolder, Vault } from 'obsidian'
+import { App, Editor, MarkdownView, TFile, TFolder, Vault, WorkspaceLeaf } from 'obsidian'
 
 import { MentionableBlockData } from '../types/mentionable'
 
@@ -60,7 +60,11 @@ export function getOpenFiles(app: App): TFile[] {
 	try {
 		const leaves = app.workspace.getLeavesOfType('markdown')
 
-		return leaves.map((v) => (v.view as MarkdownView).file).filter((v) => !!v)
+		return leaves
+			.filter((v): v is WorkspaceLeaf & { view: MarkdownView & { file: TFile } } => 
+				v.view instanceof MarkdownView && !!v.view.file
+			)
+			.map((v) => v.view.file)
 	} catch (e) {
 		return []
 	}
@@ -111,9 +115,8 @@ export function openMarkdownFile(
 	if (existingLeaf) {
 		app.workspace.setActiveLeaf(existingLeaf, { focus: true })
 
-		if (startLine) {
-			const view = existingLeaf.view as MarkdownView
-			view.setEphemeralState({ line: startLine - 1 }) // -1 because line is 0-indexed
+		if (startLine && existingLeaf.view instanceof MarkdownView) {
+			existingLeaf.view.setEphemeralState({ line: startLine - 1 }) // -1 because line is 0-indexed
 		}
 	} else {
 		const leaf = app.workspace.getLeaf('tab')
diff --git a/src/utils/ollama.ts b/src/utils/ollama.ts
index c11e808..74851ed 100644
--- a/src/utils/ollama.ts
+++ b/src/utils/ollama.ts
@@ -1,10 +1,12 @@
 import { requestUrl } from 'obsidian'
 
+type OllamaTagsResponse = {
+	models: { name: string }[]
+}
+
 export async function getOllamaModels(ollamaUrl: string) {
 	try {
-		const response = (await requestUrl(`${ollamaUrl}/api/tags`)).json as {
-			models: { name: string }[]
-		}
+		const response: OllamaTagsResponse = await requestUrl(`${ollamaUrl}/api/tags`).json
 		return response.models.map((model) => model.name)
 	} catch (error) {
 		return []
diff --git a/src/utils/parse-infio-block.test.ts b/src/utils/parse-infio-block.test.ts
index 4299805..7348de1 100644
--- a/src/utils/parse-infio-block.test.ts
+++ b/src/utils/parse-infio-block.test.ts
@@ -1,4 +1,4 @@
-import { ParsedinfioBlock, parseinfioBlocks } from './parse-infio-block'
+import { InfioBlockAction, ParsedInfioBlock, parseinfioBlocks } from './parse-infio-block'
 
 describe('parseinfioBlocks', () => {
 	it('should parse a string with infio_block elements', () => {
@@ -22,7 +22,7 @@ print("Hello, world!")
 </infio_block>
 Some text after`
 
-		const expected: ParsedinfioBlock[] = [
+		const expected: ParsedInfioBlock[] = [
 			{ type: 'string', content: 'Some text before\n' },
 			{
 				type: 'infio_block',
@@ -58,7 +58,7 @@ print("Hello, world!")
       <infio_block language="python"></infio_block>
     `
 
-		const expected: ParsedinfioBlock[] = [
+		const expected: ParsedInfioBlock[] = [
 			{ type: 'string', content: '\n      ' },
 			{
 				type: 'infio_block',
@@ -76,7 +76,7 @@ print("Hello, world!")
 	it('should handle input without infio_block elements', () => {
 		const input = 'Just a regular string without any infio_block elements.'
 
-		const expected: ParsedinfioBlock[] = [{ type: 'string', content: input }]
+		const expected: ParsedInfioBlock[] = [{ type: 'string', content: input }]
 
 		const result = parseinfioBlocks(input)
 		expect(result).toEqual(expected)
@@ -100,7 +100,7 @@ print("Hello, world!")
 </infio_block>
 End`
 
-		const expected: ParsedinfioBlock[] = [
+		const expected: ParsedInfioBlock[] = [
 			{ type: 'string', content: 'Start\n' },
 			{
 				type: 'infio_block',
@@ -139,7 +139,7 @@ print("Hello, world!")
 # Unfinished infio_block
 
 Some text after without closing tag`
-		const expected: ParsedinfioBlock[] = [
+		const expected: ParsedInfioBlock[] = [
 			{ type: 'string', content: 'Start\n' },
 			{
 				type: 'infio_block',
@@ -158,7 +158,7 @@ Some text after without closing tag`,
 
 	it('should handle infio_block with startline and endline attributes', () => {
 		const input = `<infio_block language="markdown" startline="2" endline="5"></infio_block>`
-		const expected: ParsedinfioBlock[] = [
+		const expected: ParsedInfioBlock[] = [
 			{
 				type: 'infio_block',
 				content: '',
@@ -171,4 +171,32 @@ Some text after without closing tag`,
 		const result = parseinfioBlocks(input)
 		expect(result).toEqual(expected)
 	})
+
+	it('should parse infio_block with action attribute', () => {
+		const input = `<infio_block type="edit"></infio_block>`
+		const expected: ParsedInfioBlock[] = [
+			{
+				type: 'infio_block',
+				content: '',
+				action: InfioBlockAction.Edit,
+			},
+		]
+
+		const result = parseinfioBlocks(input)
+		expect(result).toEqual(expected)
+	})
+
+	it('should handle invalid action attribute', () => {
+		const input = `<infio_block type="invalid"></infio_block>`
+		const expected: ParsedInfioBlock[] = [
+			{
+				type: 'infio_block',
+				content: '',
+				action: undefined,
+			},
+		]
+
+		const result = parseinfioBlocks(input)
+		expect(result).toEqual(expected)
+	})
 })
diff --git a/src/utils/parse-infio-block.ts b/src/utils/parse-infio-block.ts
index 3b87aec..202621c 100644
--- a/src/utils/parse-infio-block.ts
+++ b/src/utils/parse-infio-block.ts
@@ -1,6 +1,12 @@
 import { parseFragment } from 'parse5'
 
-export type ParsedinfioBlock =
+export enum InfioBlockAction {
+  Edit = 'edit',
+  New = 'new',
+  Reference = 'reference'
+}
+
+export type ParsedInfioBlock =
 	| { type: 'string'; content: string }
 	| {
 		type: 'infio_block'
@@ -9,11 +15,15 @@ export type ParsedinfioBlock =
 		filename?: string
 		startLine?: number
 		endLine?: number
-		action?: 'edit' | 'new' | 'reference'
+		action?: InfioBlockAction
 	}
 
-export function parseinfioBlocks(input: string): ParsedinfioBlock[] {
-	const parsedResult: ParsedinfioBlock[] = []
+function isInfioBlockAction(value: string): value is InfioBlockAction {
+  return Object.values<string>(InfioBlockAction).includes(value)
+}
+
+export function parseinfioBlocks(input: string): ParsedInfioBlock[] {
+	const parsedResult: ParsedInfioBlock[] = []
 	const fragment = parseFragment(input, {
 		sourceCodeLocationInfo: true,
 	})
@@ -36,7 +46,11 @@ export function parseinfioBlocks(input: string): ParsedinfioBlock[] {
 			const filename = node.attrs.find((attr) => attr.name === 'filename')?.value
 			const startLine = node.attrs.find((attr) => attr.name === 'startline')?.value
 			const endLine = node.attrs.find((attr) => attr.name === 'endline')?.value
-			const action = node.attrs.find((attr) => attr.name === 'type')?.value as 'edit' | 'new' | 'reference'
+			const actionValue = node.attrs.find((attr) => attr.name === 'type')?.value
+			const action = actionValue && isInfioBlockAction(actionValue)
+				? actionValue
+				: undefined
+
 
 			const children = node.childNodes
 			if (children.length === 0) {
diff --git a/src/utils/prompt-generator.ts b/src/utils/prompt-generator.ts
index 74bce6c..a9e05a3 100644
--- a/src/utils/prompt-generator.ts
+++ b/src/utils/prompt-generator.ts
@@ -449,17 +449,13 @@ When writing out new markdown blocks, remember not to include "line_number|" at
 	 */
 	private async getWebsiteContent(url: string): Promise<string> {
 		if (isYoutubeUrl(url)) {
-			try {
-				// TODO: pass language based on user preferences
-				const { title, transcript } =
-					await YoutubeTranscript.fetchTranscriptAndMetadata(url)
+			// TODO: pass language based on user preferences
+			const { title, transcript } =
+				await YoutubeTranscript.fetchTranscriptAndMetadata(url)
 
-				return `Title: ${title}
+			return `Title: ${title}
 Video Transcript:
 ${transcript.map((t) => `${t.offset}: ${t.text}`).join('\n')}`
-			} catch (error) {
-				console.error('Error fetching YouTube transcript', error)
-			}
 		}
 
 		const response = await requestUrl({ url })
diff --git a/styles.css b/styles.css
index 786351e..a7bcfec 100644
--- a/styles.css
+++ b/styles.css
@@ -1602,3 +1602,12 @@ button.infio-chat-input-model-select {
     opacity: 1;
   }
 }
+
+.infio-utils-display-suggestion-opacity {
+  opacity: 0.4;
+}
+
+.infio-utils-lexical-menu-container {
+  position: absolute;
+  display: block;
+}