diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index 67c65df..7d26837 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1 +1 @@
-github: chihebnabil
\ No newline at end of file
+github: chihebnabil
diff --git a/LICENSE.md b/LICENSE.md
index b1232fd..0303f9a 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/README.md b/README.md
index a4ccde6..81e8c0a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 # Claude UI
+
 A modern chat interface for Anthropic's Claude AI models built with Nuxt.js. Experience seamless conversations with Claude in a clean user interface.
 
 ## Prerequisites
@@ -12,6 +13,7 @@ A modern chat interface for Anthropic's Claude AI models built with Nuxt.js. Exp
 </p>
 
 ## 🌟 Features
+
 - 💾 Conversation history management
 - 🎭 Multiple Claude model support
 - 📝 Markdown and code syntax highlighting
@@ -23,6 +25,7 @@ A modern chat interface for Anthropic's Claude AI models built with Nuxt.js. Exp
 - 📝🔍 Text extraction and parsing
 
 ## Tech Stack
+
 - 🚀 Built with [Nuxt 3](https://nuxt.com/)
 - 💾 Database integration with [Drizzle ORM](https://orm.drizzle.team/)
 - 🎨 UI components from [@nuxt/ui](https://ui.nuxt.com/)
diff --git a/components/AuthForm.vue b/components/AuthForm.vue
index 97afc61..29a0b66 100644
--- a/components/AuthForm.vue
+++ b/components/AuthForm.vue
@@ -1,35 +1,41 @@
 <template>
-    <form class="mt-8 space-y-6" @submit.prevent="onSubmit">
-        <slot />
-        <div class="flex items-center justify-between">
-            <UCheckbox v-model="rememberMe" label="Remember me" name="remember-me" />
-            <div class="text-sm">
-                <UButton v-if="linkPath" variant="link" :to="linkPath">
-                    {{ linkText }}
-                </UButton>
-            </div>
-        </div>
-        <div>
-            <UButton type="submit" block color="primary" :loading="isLoading" size="lg">
-                <template #leading>
-                    <UIcon name="i-heroicons-lock-closed" />
-                </template>
-                {{ buttonText }}
-            </UButton>
-        </div>
-    </form>
+  <form class="mt-8 space-y-6" @submit.prevent="onSubmit">
+    <slot />
+    <div class="flex items-center justify-between">
+      <UCheckbox v-model="rememberMe" label="Remember me" name="remember-me" />
+      <div class="text-sm">
+        <UButton v-if="linkPath" variant="link" :to="linkPath">
+          {{ linkText }}
+        </UButton>
+      </div>
+    </div>
+    <div>
+      <UButton
+        type="submit"
+        block
+        color="primary"
+        :loading="isLoading"
+        size="lg"
+      >
+        <template #leading>
+          <UIcon name="i-heroicons-lock-closed" />
+        </template>
+        {{ buttonText }}
+      </UButton>
+    </div>
+  </form>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
 defineProps({
-    onSubmit: Function,
-    buttonText: String,
-    linkText: String,
-    linkPath: String
+  onSubmit: Function,
+  buttonText: String,
+  linkText: String,
+  linkPath: String,
 });
 
 const rememberMe = ref(false);
 const isLoading = ref(false);
-</script>
\ No newline at end of file
+</script>
diff --git a/components/ChatMessage.vue b/components/ChatMessage.vue
index f78c3fd..5b53eee 100644
--- a/components/ChatMessage.vue
+++ b/components/ChatMessage.vue
@@ -1,71 +1,84 @@
 <template>
-    <div :class="[
-        'flex mb-4 max-w-full',
-        message.role === 'user' ? 'justify-end' : 'justify-start'
-    ]">
-        <div :class="[
-            'flex items-start max-w-[85%]',
-            message.role === 'user' ? 'flex-row-reverse' : ''
-        ]">
-            <UAvatar :alt="message.role === 'user' ? 'User' : 'AI'" size="sm" class="flex-shrink-0" />
-            <div class="flex flex-col mx-2">
-                <div :class="[
-                    'px-4 py-2 rounded-lg break-words',
-                    message.role === 'user'
-                        ? 'bg-primary text-white dark:bg-primary-600'
-                        : 'bg-gray-200 dark:bg-gray-700 dark:text-gray-100'
-                ]" v-html="$mdRenderer.render(message.content)" />
-                <span :class="[
-                    'text-xs mt-1',
-                    message.role === 'user' ? 'text-right' : 'text-left',
-                    'text-gray-500 dark:text-gray-400'
-                ]">
-                    {{ relativeTime }}
-                </span>
-            </div>
-        </div>
+  <div
+    :class="[
+      'flex mb-4 max-w-full',
+      message.role === 'user' ? 'justify-end' : 'justify-start',
+    ]"
+  >
+    <div
+      :class="[
+        'flex items-start max-w-[85%]',
+        message.role === 'user' ? 'flex-row-reverse' : '',
+      ]"
+    >
+      <UAvatar
+        :alt="message.role === 'user' ? 'User' : 'AI'"
+        size="sm"
+        class="flex-shrink-0"
+      />
+      <div class="flex flex-col mx-2">
+        <div
+          :class="[
+            'px-4 py-2 rounded-lg break-words',
+            message.role === 'user'
+              ? 'bg-primary text-white dark:bg-primary-600'
+              : 'bg-gray-200 dark:bg-gray-700 dark:text-gray-100',
+          ]"
+          v-html="$mdRenderer.render(message.content)"
+        />
+        <span
+          :class="[
+            'text-xs mt-1',
+            message.role === 'user' ? 'text-right' : 'text-left',
+            'text-gray-500 dark:text-gray-400',
+          ]"
+        >
+          {{ relativeTime }}
+        </span>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-const { $mdRenderer } = useNuxtApp()
+import { computed } from "vue";
+const { $mdRenderer } = useNuxtApp();
 
 const props = defineProps({
-    message: {
-        type: Object,
-        required: true,
-        validator: (value) => {
-            return value.role && value.content && value.createdAt
-        }
-    }
-})
+  message: {
+    type: Object,
+    required: true,
+    validator: (value) => {
+      return value.role && value.content && value.createdAt;
+    },
+  },
+});
 
 const relativeTime = computed(() => {
-    const now = new Date()
-    const createdAt = new Date(props.message.createdAt)
-    const diffInSeconds = Math.floor((now - createdAt) / 1000)
+  const now = new Date();
+  const createdAt = new Date(props.message.createdAt);
+  const diffInSeconds = Math.floor((now - createdAt) / 1000);
 
-    if (diffInSeconds < 60) {
-        return 'just now'
-    }
+  if (diffInSeconds < 60) {
+    return "just now";
+  }
 
-    const diffInMinutes = Math.floor(diffInSeconds / 60)
-    if (diffInMinutes < 60) {
-        return `${diffInMinutes}m ago`
-    }
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}m ago`;
+  }
 
-    const diffInHours = Math.floor(diffInMinutes / 60)
-    if (diffInHours < 24) {
-        return `${diffInHours}h ago`
-    }
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  if (diffInHours < 24) {
+    return `${diffInHours}h ago`;
+  }
 
-    const diffInDays = Math.floor(diffInHours / 24)
-    if (diffInDays < 7) {
-        return `${diffInDays}d ago`
-    }
+  const diffInDays = Math.floor(diffInHours / 24);
+  if (diffInDays < 7) {
+    return `${diffInDays}d ago`;
+  }
 
-    // For older messages, show the actual date
-    return createdAt.toLocaleDateString()
-})
-</script>
\ No newline at end of file
+  // For older messages, show the actual date
+  return createdAt.toLocaleDateString();
+});
+</script>
diff --git a/components/ColorPicker.vue b/components/ColorPicker.vue
index 2c8229e..ba2e0b7 100644
--- a/components/ColorPicker.vue
+++ b/components/ColorPicker.vue
@@ -1,62 +1,99 @@
 <template>
-    <UPopover mode="hover" :popper="{ strategy: 'absolute' }" :ui="{ width: 'w-[156px]' }">
-        <template #default="{ open }">
-            <UButton
-color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']"
-                aria-label="Color picker">
-                <UIcon name="i-heroicons-swatch-20-solid" class="w-5 h-5 text-primary-500 dark:text-primary-400" />
-            </UButton>
-        </template>
-
-        <template #panel>
-            <div class="p-2">
-                <div class="grid grid-cols-5 gap-px">
-                    <ColorPickerPill
-v-for="color in primaryColors" :key="color.value" :color="color"
-                        :selected="primary" @select="primary = color" />
-                </div>
-
-                <hr class="border-gray-200 dark:border-gray-800 my-2">
-
-                <div class="grid grid-cols-5 gap-px">
-                    <ColorPickerPill
-v-for="color in grayColors" :key="color.value" :color="color" :selected="gray"
-                        @select="gray = color" />
-                </div>
-            </div>
-        </template>
-    </UPopover>
+  <UPopover
+    mode="hover"
+    :popper="{ strategy: 'absolute' }"
+    :ui="{ width: 'w-[156px]' }"
+  >
+    <template #default="{ open }">
+      <UButton
+        color="gray"
+        variant="ghost"
+        square
+        :class="[open && 'bg-gray-50 dark:bg-gray-800']"
+        aria-label="Color picker"
+      >
+        <UIcon
+          name="i-heroicons-swatch-20-solid"
+          class="w-5 h-5 text-primary-500 dark:text-primary-400"
+        />
+      </UButton>
+    </template>
+
+    <template #panel>
+      <div class="p-2">
+        <div class="grid grid-cols-5 gap-px">
+          <ColorPickerPill
+            v-for="color in primaryColors"
+            :key="color.value"
+            :color="color"
+            :selected="primary"
+            @select="primary = color"
+          />
+        </div>
+
+        <hr class="border-gray-200 dark:border-gray-800 my-2" />
+
+        <div class="grid grid-cols-5 gap-px">
+          <ColorPickerPill
+            v-for="color in grayColors"
+            :key="color.value"
+            :color="color"
+            :selected="gray"
+            @select="gray = color"
+          />
+        </div>
+      </div>
+    </template>
+  </UPopover>
 </template>
 
 <script setup lang="ts">
-import colors from '#tailwind-config/theme/colors'
+import colors from "#tailwind-config/theme/colors";
 
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
+const appConfig = useAppConfig();
+const colorMode = useColorMode();
 
 // Computed
 
-const primaryColors = computed(() => appConfig.ui.colors.filter(color => color !== 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const primaryColors = computed(() =>
+  appConfig.ui.colors
+    .filter((color) => color !== "primary")
+    .map((color) => ({
+      value: color,
+      text: color,
+      hex: colors[color][colorMode.value === "dark" ? 400 : 500],
+    })),
+);
 const primary = computed({
-    get() {
-        return primaryColors.value.find(option => option.value === appConfig.ui.primary)
-    },
-    set(option) {
-        appConfig.ui.primary = option.value
+  get() {
+    return primaryColors.value.find(
+      (option) => option.value === appConfig.ui.primary,
+    );
+  },
+  set(option) {
+    appConfig.ui.primary = option.value;
 
-        window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.primary)
-    }
-})
+    window.localStorage.setItem("nuxt-ui-primary", appConfig.ui.primary);
+  },
+});
 
-const grayColors = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const grayColors = computed(() =>
+  ["slate", "cool", "zinc", "neutral", "stone"].map((color) => ({
+    value: color,
+    text: color,
+    hex: colors[color][colorMode.value === "dark" ? 400 : 500],
+  })),
+);
 const gray = computed({
-    get() {
-        return grayColors.value.find(option => option.value === appConfig.ui.gray)
-    },
-    set(option) {
-        appConfig.ui.gray = option.value
-
-        window.localStorage.setItem('nuxt-ui-gray', appConfig.ui.gray)
-    }
-})
-</script>
\ No newline at end of file
+  get() {
+    return grayColors.value.find(
+      (option) => option.value === appConfig.ui.gray,
+    );
+  },
+  set(option) {
+    appConfig.ui.gray = option.value;
+
+    window.localStorage.setItem("nuxt-ui-gray", appConfig.ui.gray);
+  },
+});
+</script>
diff --git a/components/ColorPickerPill.vue b/components/ColorPickerPill.vue
index 836d6e4..466266e 100644
--- a/components/ColorPickerPill.vue
+++ b/components/ColorPickerPill.vue
@@ -1,19 +1,31 @@
 <template>
   <UTooltip :text="color.value" class="capitalize" :open-delay="500">
     <UButton
-color="white" square :ui="{
-      color: {
-        white: {
-          solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
-          ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
-        }
-      }
-    }" :variant="color.value === selected.value ? 'solid' : 'ghost'" @click.stop.prevent="$emit('select')">
-      <span class="inline-block w-3 h-3 rounded-full" :style="{ backgroundColor: color.hex }" />
+      color="white"
+      square
+      :ui="{
+        color: {
+          white: {
+            solid:
+              'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
+            ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
+          },
+        },
+      }"
+      :variant="color.value === selected.value ? 'solid' : 'ghost'"
+      @click.stop.prevent="$emit('select')"
+    >
+      <span
+        class="inline-block w-3 h-3 rounded-full"
+        :style="{ backgroundColor: color.hex }"
+      />
     </UButton>
   </UTooltip>
 </template>
 <script setup lang="ts">
-defineProps<{ color: { value: string, hex: string }, selected: { value: string } }>()
-defineEmits(['select'])
-</script>
\ No newline at end of file
+defineProps<{
+  color: { value: string; hex: string };
+  selected: { value: string };
+}>();
+defineEmits(["select"]);
+</script>
diff --git a/components/CreateThreadModal.vue b/components/CreateThreadModal.vue
index 1b4643b..21c504c 100644
--- a/components/CreateThreadModal.vue
+++ b/components/CreateThreadModal.vue
@@ -1,72 +1,92 @@
 <template>
-    <UModal v-model="isModalOpen">
-        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-            <template #title>
-                Create a new agent
-            </template>
-            <template #default>
-                <UForm @submit="handleCreateThread">
-                    <div class="flex flex-col space-y-4">
-                        <UFormGroup label="Name" label-for="name">
-                            <UInput id="name" :required="true" v-model="name" placeholder="Enter a name for the chat" />
-                        </UFormGroup>
-                        <UFormGroup label="Instructions" label-for="systemMessage">
-                            <UTextarea id="systemMessage" v-model="systemMessage" :required="true"
-                                placeholder="You are a helpful assistant" />
-                        </UFormGroup>
+  <UModal v-model="isModalOpen">
+    <UCard
+      :ui="{
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+      }"
+    >
+      <template #title> Create a new agent </template>
+      <template #default>
+        <UForm @submit="handleCreateThread">
+          <div class="flex flex-col space-y-4">
+            <UFormGroup label="Name" label-for="name">
+              <UInput
+                id="name"
+                :required="true"
+                v-model="name"
+                placeholder="Enter a name for the chat"
+              />
+            </UFormGroup>
+            <UFormGroup label="Instructions" label-for="systemMessage">
+              <UTextarea
+                id="systemMessage"
+                v-model="systemMessage"
+                :required="true"
+                placeholder="You are a helpful assistant"
+              />
+            </UFormGroup>
 
-                        <div class="flex gap-2 justify-between">
+            <div class="flex gap-2 justify-between">
+              <UFormGroup label="Max Tokens">
+                <UInput
+                  id="maxTokens"
+                  v-model="maxTokens"
+                  type="number"
+                  min="10"
+                  placeholder="Enter max token for the responce"
+                />
+              </UFormGroup>
 
-                            <UFormGroup label="Max Tokens">
-                                <UInput id="maxTokens" v-model="maxTokens" type="number" min="10"
-                                    placeholder="Enter max token for the responce" />
-                            </UFormGroup>
+              <UFormGroup label="Model">
+                <USelect v-model="model" :options="models" />
+              </UFormGroup>
+            </div>
 
-                            <UFormGroup label="Model">
-                                <USelect v-model="model" :options="models" />
-                            </UFormGroup>
-
-                        </div>
-
-                        <UFormGroup label="Creativity" label-for="temperature">
-                            <URange id="temperature" v-model="temperature" min="0" max="1" step="0.1" />
-                        </UFormGroup>
-                        <UButton block type="submit" color="primary">
-                            Create
-                        </UButton>
-
-                    </div>
-                </UForm>
-            </template>
-        </UCard>
-    </UModal>
+            <UFormGroup label="Creativity" label-for="temperature">
+              <URange
+                id="temperature"
+                v-model="temperature"
+                min="0"
+                max="1"
+                step="0.1"
+              />
+            </UFormGroup>
+            <UButton block type="submit" color="primary"> Create </UButton>
+          </div>
+        </UForm>
+      </template>
+    </UCard>
+  </UModal>
 </template>
 <script setup>
-const { isModalOpen, closeModal } = useCustomModal()
+const { isModalOpen, closeModal } = useCustomModal();
 
-const name = ref('')
-const systemMessage = ref('You are a helpful assistant')
-const temperature = ref(0.7)
-const maxTokens = ref(1024)
-const model = ref('claude-3-5-sonnet-latest')
-const models = ['claude-3-5-sonnet-latest', 'claude-3-5-haiku-latest', 'claude-3-opus-latest']
+const name = ref("");
+const systemMessage = ref("You are a helpful assistant");
+const temperature = ref(0.7);
+const maxTokens = ref(1024);
+const model = ref("claude-3-5-sonnet-latest");
+const models = [
+  "claude-3-5-sonnet-latest",
+  "claude-3-5-haiku-latest",
+  "claude-3-opus-latest",
+];
 
 const handleCreateThread = async () => {
-    const res = await $fetch('/api/threads', {
-        method: 'POST',
-        body: JSON.stringify({
-            name: name.value,
-            systemMessage: systemMessage.value,
-            temperature: temperature.value,
-            model: model.value,
-            maxTokens: maxTokens.value
-        })
-    })
-
-    navigateTo('/threads/' + res.id)
-
-    closeModal()
+  const res = await $fetch("/api/threads", {
+    method: "POST",
+    body: JSON.stringify({
+      name: name.value,
+      systemMessage: systemMessage.value,
+      temperature: temperature.value,
+      model: model.value,
+      maxTokens: maxTokens.value,
+    }),
+  });
 
-}
+  navigateTo("/threads/" + res.id);
 
-</script>
\ No newline at end of file
+  closeModal();
+};
+</script>
diff --git a/components/DarkModeToggle.vue b/components/DarkModeToggle.vue
index b8f3c4f..ea297af 100644
--- a/components/DarkModeToggle.vue
+++ b/components/DarkModeToggle.vue
@@ -1,18 +1,18 @@
 <template>
-    <UButton
-      :icon="isDark ? 'i-heroicons-moon' : 'i-heroicons-sun'"
-      color="gray"
-      variant="ghost"
-      aria-label="Toggle color mode"
-      @click="toggleColorMode"
-    />
-  </template>
-  
-  <script setup>
-  const colorMode = useColorMode()
-  const isDark = computed(() => colorMode.value === 'dark')
-  
-  const toggleColorMode = () => {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-  </script>
\ No newline at end of file
+  <UButton
+    :icon="isDark ? 'i-heroicons-moon' : 'i-heroicons-sun'"
+    color="gray"
+    variant="ghost"
+    aria-label="Toggle color mode"
+    @click="toggleColorMode"
+  />
+</template>
+
+<script setup>
+const colorMode = useColorMode();
+const isDark = computed(() => colorMode.value === "dark");
+
+const toggleColorMode = () => {
+  colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
+};
+</script>
diff --git a/components/FileAttachments.vue b/components/FileAttachments.vue
index a12fbb3..7d2f496 100644
--- a/components/FileAttachments.vue
+++ b/components/FileAttachments.vue
@@ -1,31 +1,38 @@
 <template>
-    <div v-if="files.length" class="mb-2 flex flex-wrap">
-        <div
-v-for="file in files" :key="file.name"
-            class="p-2 mr-2 flex items-center gap-2 mb-1 bg-gray-50 dark:bg-gray-800 rounded">
-            <UCheckbox v-model="file.selected" />
-            <UBadge size="sm" variant="ghost">{{ file.name }}</UBadge>
-            <UBadge size="sm" variant="solid">{{ file.tokens }} tokens</UBadge>
-            <UButton
-:loading="loader" size="xs" color="red" variant="ghost" icon="i-heroicons-x-mark"
-                @click="handleRemoveFile(file)" />
-        </div>
+  <div v-if="files.length" class="mb-2 flex flex-wrap">
+    <div
+      v-for="file in files"
+      :key="file.name"
+      class="p-2 mr-2 flex items-center gap-2 mb-1 bg-gray-50 dark:bg-gray-800 rounded"
+    >
+      <UCheckbox v-model="file.selected" />
+      <UBadge size="sm" variant="ghost">{{ file.name }}</UBadge>
+      <UBadge size="sm" variant="solid">{{ file.tokens }} tokens</UBadge>
+      <UButton
+        :loading="loader"
+        size="xs"
+        color="red"
+        variant="ghost"
+        icon="i-heroicons-x-mark"
+        @click="handleRemoveFile(file)"
+      />
     </div>
+  </div>
 </template>
 
 <script setup>
-const { loader } = useLoader()
+const { loader } = useLoader();
 
 const props = defineProps({
-    files: {
-        type: Array,
-        required: true
-    }
-})
+  files: {
+    type: Array,
+    required: true,
+  },
+});
 
-const emit = defineEmits(['remove-file'])
+const emit = defineEmits(["remove-file"]);
 
 const handleRemoveFile = (file) => {
-    emit('remove-file', file)
-}
+  emit("remove-file", file);
+};
 </script>
diff --git a/components/MessageInput.vue b/components/MessageInput.vue
index dca7c71..7b65c81 100644
--- a/components/MessageInput.vue
+++ b/components/MessageInput.vue
@@ -1,209 +1,233 @@
 <template>
-    <div class="shrink-0 pb-4 px-4">
-        <FileAttachments :files="attachedFiles" @remove-file="removeFile" />
-
-        <form class="flex flex-col gap-2" @submit.prevent="handleSendMessage">
-            <div class="flex gap-2">
-                <UTextarea v-model="inputMessage" placeholder="Type your message here..."
-                    class="flex-grow min-w-0 bg-white dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
-                    :rows="3" :auto-size="true" :max-rows="4" />
-
-                <div class="flex flex-col gap-2">
-                    <UButton :loading="loader" type="button" color="gray" icon="i-heroicons-paper-clip"
-                        class="flex-shrink-0" @click="triggerFileInput" />
-                    <UButton :loading="loader" type="submit" color="primary" icon="i-heroicons-paper-airplane-20-solid"
-                        class="flex-shrink-0">
-                        Send
-                    </UButton>
-                </div>
-            </div>
-        </form>
-
-        <!-- Hidden file input -->
-        <input ref="fileInput" type="file"
-            accept=".html,.ts,.htm,.atom,.rss,.md,.markdown,.epub,.xml,.xsl,.pdf,.doc,.docx,.odt,.ott,.rtf,.xls,.xlsx,.xlsb,.xlsm,.xltx,.csv,.ods,.ots,.pptx,.potx,.odp,.otp,.odg,.otg,.png,.jpg,.jpeg,.gif,.dxf,.js,text/*"
-            multiple class="hidden" @change="handleFileSelect">
-    </div>
+  <div class="shrink-0 pb-4 px-4">
+    <FileAttachments :files="attachedFiles" @remove-file="removeFile" />
+
+    <form class="flex flex-col gap-2" @submit.prevent="handleSendMessage">
+      <div class="flex gap-2">
+        <UTextarea
+          v-model="inputMessage"
+          placeholder="Type your message here..."
+          class="flex-grow min-w-0 bg-white dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
+          :rows="3"
+          :auto-size="true"
+          :max-rows="4"
+        />
+
+        <div class="flex flex-col gap-2">
+          <UButton
+            :loading="loader"
+            type="button"
+            color="gray"
+            icon="i-heroicons-paper-clip"
+            class="flex-shrink-0"
+            @click="triggerFileInput"
+          />
+          <UButton
+            :loading="loader"
+            type="submit"
+            color="primary"
+            icon="i-heroicons-paper-airplane-20-solid"
+            class="flex-shrink-0"
+          >
+            Send
+          </UButton>
+        </div>
+      </div>
+    </form>
+
+    <!-- Hidden file input -->
+    <input
+      ref="fileInput"
+      type="file"
+      accept=".html,.ts,.htm,.atom,.rss,.md,.markdown,.epub,.xml,.xsl,.pdf,.doc,.docx,.odt,.ott,.rtf,.xls,.xlsx,.xlsb,.xlsm,.xltx,.csv,.ods,.ots,.pptx,.potx,.odp,.otp,.odg,.otg,.png,.jpg,.jpeg,.gif,.dxf,.js,text/*"
+      multiple
+      class="hidden"
+      @change="handleFileSelect"
+    />
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const route = useRoute()
-const { loader } = useLoader()
-const { messages } = useApp()
-const toast = useToast()
+import { ref } from "vue";
+const route = useRoute();
+const { loader } = useLoader();
+const { messages } = useApp();
+const toast = useToast();
 
 const props = defineProps({
-    attachedFiles: {
-        type: Array,
-        default: () => [],
-        required: true
-    }
-})
+  attachedFiles: {
+    type: Array,
+    default: () => [],
+    required: true,
+  },
+});
 
-const emit = defineEmits(['update:attachedFiles', 'send-message'])
+const emit = defineEmits(["update:attachedFiles", "send-message"]);
 
-const inputMessage = ref('')
-const fileInput = ref(null)
+const inputMessage = ref("");
+const fileInput = ref(null);
 
 const triggerFileInput = () => {
-    fileInput.value.click()
-}
+  fileInput.value.click();
+};
 
 const selectedFiles = computed(() => {
-    return (props.attachedFiles || [])
-        .filter(file => file.selected)
-        .map(file => file.id)
-})
-
+  return (props.attachedFiles || [])
+    .filter((file) => file.selected)
+    .map((file) => file.id);
+});
 
 const handleFileSelect = async (event) => {
-    const files = Array.from(event.target.files)
-    loader.value = true
-
-    try {
-        for (const file of files) {
-            const formData = new FormData()
-            formData.append('file', file)
-            const fileReq = await $fetch(`/api/threads/${route.params.id}/files`, {
-                method: 'post',
-                body: formData
-            })
-
-            const newFile = {
-                file,
-                name: file.name,
-                selected: true,
-                tokens: fileReq.file.tokens,
-                id: fileReq.last_row_id
-            }
-
-            emit('update:attachedFiles', [...props.attachedFiles, newFile])
-        }
-    } catch (error) {
-        console.error('Error uploading files:', error)
-    } finally {
-        fileInput.value.value = '' // Reset file input
-        loader.value = false
+  const files = Array.from(event.target.files);
+  loader.value = true;
+
+  try {
+    for (const file of files) {
+      const formData = new FormData();
+      formData.append("file", file);
+      const fileReq = await $fetch(`/api/threads/${route.params.id}/files`, {
+        method: "post",
+        body: formData,
+      });
+
+      const newFile = {
+        file,
+        name: file.name,
+        selected: true,
+        tokens: fileReq.file.tokens,
+        id: fileReq.last_row_id,
+      };
+
+      emit("update:attachedFiles", [...props.attachedFiles, newFile]);
     }
-}
+  } catch (error) {
+    console.error("Error uploading files:", error);
+  } finally {
+    fileInput.value.value = ""; // Reset file input
+    loader.value = false;
+  }
+};
 
 const removeFile = async (fileToRemove) => {
-    loader.value = true
-    try {
-        await $fetch(`/api/files/${fileToRemove.id}`, {
-            method: 'DELETE',
-        })
-        emit('update:attachedFiles', props.attachedFiles.filter(file => file !== fileToRemove))
-    } catch (error) {
-        console.error('Error removing file:', error)
-    } finally {
-        loader.value = false
-    }
-}
+  loader.value = true;
+  try {
+    await $fetch(`/api/files/${fileToRemove.id}`, {
+      method: "DELETE",
+    });
+    emit(
+      "update:attachedFiles",
+      props.attachedFiles.filter((file) => file !== fileToRemove),
+    );
+  } catch (error) {
+    console.error("Error removing file:", error);
+  } finally {
+    loader.value = false;
+  }
+};
 
 const handleSendMessage = async () => {
-    if (inputMessage.value.trim() === '') return
-
-    // Add user message
-    const userMessage = {
-        id: messages.value.length + 1,
-        createdAt: new Date(),
-        content: inputMessage.value,
-        role: 'user'
+  if (inputMessage.value.trim() === "") return;
+
+  // Add user message
+  const userMessage = {
+    id: messages.value.length + 1,
+    createdAt: new Date(),
+    content: inputMessage.value,
+    role: "user",
+  };
+  messages.value.push(userMessage);
+
+  // Create assistant message placeholder for streaming
+  const assistantMessage = {
+    id: messages.value.length + 2,
+    createdAt: new Date(),
+    content: "", // Will be updated as we receive chunks
+    role: "assistant",
+  };
+  messages.value.push(assistantMessage);
+
+  loader.value = true;
+  const messageContent = inputMessage.value;
+  inputMessage.value = ""; // Clear input after sending
+
+  try {
+    // Use regular fetch for streaming
+    const response = await fetch("/api/chat", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        prompt: messageContent,
+        threadId: route.params.id,
+        selectedFiles: selectedFiles.value,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
     }
-    messages.value.push(userMessage)
-
-    // Create assistant message placeholder for streaming
-    const assistantMessage = {
-        id: messages.value.length + 2,
-        createdAt: new Date(),
-        content: '',  // Will be updated as we receive chunks
-        role: 'assistant'
-    }
-    messages.value.push(assistantMessage)
 
-    loader.value = true
-    const messageContent = inputMessage.value
-    inputMessage.value = '' // Clear input after sending
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
 
     try {
-        // Use regular fetch for streaming
-        const response = await fetch('/api/chat', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                prompt: messageContent,
-                threadId: route.params.id,
-                selectedFiles: selectedFiles.value
-            })
-        })
-
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`)
-        }
-
-        const reader = response.body.getReader()
-        const decoder = new TextDecoder()
-
-        try {
-            while (true) {
-                const { done, value } = await reader.read()
-                if (done) break
-
-                const chunk = decoder.decode(value, { stream: true })
-                const lines = chunk.split('\n')
-
-                for (const line of lines) {
-                    if (line.trim() && line.startsWith('data: ')) {
-                        try {
-                            const data = JSON.parse(line.slice(5))
-                            if (data.type === 'content_block_delta' && data.delta?.text) {
-                                // Update the last messages item with the new content
-                                messages.value[messages.value.length - 1].content += data.delta.text
-                                // delay to allow the UI to update
-                                await new Promise(resolve => setTimeout(resolve, 100))
-                            }
-                        } catch (e) {
-                            console.error('Error parsing SSE data:', e)
-                            toast.add({
-                                title: 'Error',
-                                description: 'Error parsing response data',
-                                color: 'red',
-                                timeout: 5000,
-                                icon: 'i-heroicons-exclamation-circle'
-                            })
-                        }
-                    }
-                }
-            }
-        } catch (streamError) {
-            console.error('Error reading stream:', streamError)
-            toast.add({
-                title: 'Error',
-                description: 'Error reading response stream',
-                color: 'red',
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        const lines = chunk.split("\n");
+
+        for (const line of lines) {
+          if (line.trim() && line.startsWith("data: ")) {
+            try {
+              const data = JSON.parse(line.slice(5));
+              if (data.type === "content_block_delta" && data.delta?.text) {
+                // Update the last messages item with the new content
+                messages.value[messages.value.length - 1].content +=
+                  data.delta.text;
+                // delay to allow the UI to update
+                await new Promise((resolve) => setTimeout(resolve, 100));
+              }
+            } catch (e) {
+              console.error("Error parsing SSE data:", e);
+              toast.add({
+                title: "Error",
+                description: "Error parsing response data",
+                color: "red",
                 timeout: 5000,
-                icon: 'i-heroicons-exclamation-circle'
-            })
-            // remove assistant message on error
-            messages.value.pop()
+                icon: "i-heroicons-exclamation-circle",
+              });
+            }
+          }
         }
-    } catch (error) {
-        console.error('Error sending message:', error)
-        toast.add({
-            title: 'Error',
-            description: error.message || 'Failed to send message',
-            color: 'red',
-            timeout: 5000,
-            icon: 'i-heroicons-exclamation-circle'
-        })
-        // remove assistant message on error
-        messages.value.pop()
-    } finally {
-        loader.value = false
+      }
+    } catch (streamError) {
+      console.error("Error reading stream:", streamError);
+      toast.add({
+        title: "Error",
+        description: "Error reading response stream",
+        color: "red",
+        timeout: 5000,
+        icon: "i-heroicons-exclamation-circle",
+      });
+      // remove assistant message on error
+      messages.value.pop();
     }
-}
-</script>
\ No newline at end of file
+  } catch (error) {
+    console.error("Error sending message:", error);
+    toast.add({
+      title: "Error",
+      description: error.message || "Failed to send message",
+      color: "red",
+      timeout: 5000,
+      icon: "i-heroicons-exclamation-circle",
+    });
+    // remove assistant message on error
+    messages.value.pop();
+  } finally {
+    loader.value = false;
+  }
+};
+</script>
diff --git a/components/MessageList.vue b/components/MessageList.vue
index 6e5f54c..c399c03 100644
--- a/components/MessageList.vue
+++ b/components/MessageList.vue
@@ -1,26 +1,38 @@
 <template>
-    <div ref="messagesContainer" class="flex-1 overflow-y-auto overflow-x-hidden p-4">
-        <ChatMessage v-for="message in messages" :key="message.id" :message="message" />
-    </div>
+  <div
+    ref="messagesContainer"
+    class="flex-1 overflow-y-auto overflow-x-hidden p-4"
+  >
+    <ChatMessage
+      v-for="message in messages"
+      :key="message.id"
+      :message="message"
+    />
+  </div>
 </template>
 
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, nextTick } from "vue";
 
 const props = defineProps({
-    messages: {
-        type: Array,
-        required: true
-    }
-})
+  messages: {
+    type: Array,
+    required: true,
+  },
+});
 
-const messagesContainer = ref(null)
+const messagesContainer = ref(null);
 
-watch(() => props.messages, () => {
+watch(
+  () => props.messages,
+  () => {
     nextTick(() => {
-        if (messagesContainer.value) {
-            messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-        }
-    })
-}, { deep: true })
+      if (messagesContainer.value) {
+        messagesContainer.value.scrollTop =
+          messagesContainer.value.scrollHeight;
+      }
+    });
+  },
+  { deep: true },
+);
 </script>
diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 6e1ea8f..bdbb1e2 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -1,72 +1,102 @@
 <template>
-    <div class="w-64 dark:bg-gray-900 bg-white border-r border-gray-200 p-4">
-        <div class="flex align-center justify-between mb-4">
-            <UButton :loading="loader" icon="i-heroicons-plus-circle" class="justify-start" @click="openModal">
-                New Agent
-            </UButton>
-            <DarkModeToggle />
-            <ColorPicker />
-        </div>
-
-        <UScrollbar class="h-[calc(100vh-8rem)]">
-            <div class="h-[calc(100vh-8rem)]">
-                <div v-for="thread in threads" :key="thread.id" class="flex items-center gap-2 group">
-                    <UButton variant="ghost" block class="flex-1"
-                        :class="{ 'bg-primary-500 text-white dark:bg-gray-800 dark:text-white': isSelected(thread.id) }"
-                        @click="openThread(thread.id)">
-                        {{ thread.name }}
-                    </UButton>
+  <div class="w-64 dark:bg-gray-900 bg-white border-r border-gray-200 p-4">
+    <div class="flex align-center justify-between mb-4">
+      <UButton
+        :loading="loader"
+        icon="i-heroicons-plus-circle"
+        class="justify-start"
+        @click="openModal"
+      >
+        New Agent
+      </UButton>
+      <DarkModeToggle />
+      <ColorPicker />
+    </div>
 
-                    <div class="hidden group-hover:flex gap-1">
-                        <UButton :loading="loader" size="xs" color="red" variant="ghost" icon="i-heroicons-trash"
-                            @click="deleteThread(thread.id)" />
-                    </div>
-                </div>
-            </div>
+    <UScrollbar class="h-[calc(100vh-8rem)]">
+      <div class="h-[calc(100vh-8rem)]">
+        <div
+          v-for="thread in threads"
+          :key="thread.id"
+          class="flex items-center gap-2 group"
+        >
+          <UButton
+            variant="ghost"
+            block
+            class="flex-1"
+            :class="{
+              'bg-primary-500 text-white dark:bg-gray-800 dark:text-white':
+                isSelected(thread.id),
+            }"
+            @click="openThread(thread.id)"
+          >
+            {{ thread.name }}
+          </UButton>
 
-        </UScrollbar>
-        <div class="flex justify-between  gap-2 mt-4">
-            <UButton icon="i-heroicons-arrow-left-end-on-rectangle" size="xs" variant="ghost" @click="logout">
-                Logout
-            </UButton>
-            <UButton icon="i-heroicons-document-magnifying-glass" size="xs" variant="ghost"
-                @click="navigateTo('/logs')">
-                Logs
-            </UButton>
+          <div class="hidden group-hover:flex gap-1">
+            <UButton
+              :loading="loader"
+              size="xs"
+              color="red"
+              variant="ghost"
+              icon="i-heroicons-trash"
+              @click="deleteThread(thread.id)"
+            />
+          </div>
         </div>
+      </div>
+    </UScrollbar>
+    <div class="flex justify-between gap-2 mt-4">
+      <UButton
+        icon="i-heroicons-arrow-left-end-on-rectangle"
+        size="xs"
+        variant="ghost"
+        @click="logout"
+      >
+        Logout
+      </UButton>
+      <UButton
+        icon="i-heroicons-document-magnifying-glass"
+        size="xs"
+        variant="ghost"
+        @click="navigateTo('/logs')"
+      >
+        Logs
+      </UButton>
     </div>
+  </div>
 </template>
 
 <script setup>
 const { clear } = useUserSession();
 
-const { isModalOpen, openModal } = useCustomModal()
-const { loader } = useLoader()
+const { isModalOpen, openModal } = useCustomModal();
+const { loader } = useLoader();
 
-const { threads } = useApp()
-const route = useRoute()
+const { threads } = useApp();
+const route = useRoute();
 
 const isSelected = (threadId) => {
-    return route.params.id === threadId.toString()
-}
+  return route.params.id === threadId.toString();
+};
 onMounted(async () => {
-    threads.value = await $fetch('/api/threads')
-})
+  threads.value = await $fetch("/api/threads");
+});
 
 const logout = async () => {
-    await clear()
-    navigateTo('/login', { replace: true })
-}
+  await clear();
+  navigateTo("/login", { replace: true });
+};
 
 const deleteThread = async (id) => {
-    // Handle deleting thread
-    await $fetch('/api/threads/' + id, {
-        method: 'DELETE'
-    })
-    threads.value = threads.value.filter(thread => thread.id !== id)
-    navigateTo('/')
-}
+  // Handle deleting thread
+  await $fetch("/api/threads/" + id, {
+    method: "DELETE",
+  });
+  threads.value = threads.value.filter((thread) => thread.id !== id);
+  navigateTo("/");
+};
 const openThread = (threadId) => {
-    navigateTo('/threads/' + threadId)
-}
-</script>
\ No newline at end of file
+  navigateTo("/threads/" + threadId);
+};
+</script>
diff --git a/composables/useApp.ts b/composables/useApp.ts
index 44d1182..4a4faa5 100644
--- a/composables/useApp.ts
+++ b/composables/useApp.ts
@@ -1,16 +1,14 @@
-
-
 export const useApp = () => {
-    const messages = useState<Array<any>>("messages", () => []);
-    const threads = useState<Array<any>>("threads",() => []);
-
-    const getThread = async (id: any) => {
-        return threads.value.find(thread => thread.id === Number(id));
-    };
-
-    return {
-        messages,
-        getThread,
-        threads
-    };
-};
\ No newline at end of file
+  const messages = useState<Array<any>>("messages", () => []);
+  const threads = useState<Array<any>>("threads", () => []);
+
+  const getThread = async (id: any) => {
+    return threads.value.find((thread) => thread.id === Number(id));
+  };
+
+  return {
+    messages,
+    getThread,
+    threads,
+  };
+};
diff --git a/composables/useAutoScroll.ts b/composables/useAutoScroll.ts
index 7bb7497..e7fc4b1 100644
--- a/composables/useAutoScroll.ts
+++ b/composables/useAutoScroll.ts
@@ -1,4 +1,4 @@
-import { onMounted, onUpdated, ref, watch } from 'vue';
+import { onMounted, onUpdated, ref, watch } from "vue";
 
 export function useAutoScroll(messagesRef) {
   const containerRef = ref<HTMLElement | null>(null);
diff --git a/composables/useCustomModal.ts b/composables/useCustomModal.ts
index fab04c9..68ef649 100644
--- a/composables/useCustomModal.ts
+++ b/composables/useCustomModal.ts
@@ -13,4 +13,4 @@ export const useCustomModal = () => {
     openModal,
     closeModal,
   };
-};
\ No newline at end of file
+};
diff --git a/composables/useFileHandler.ts b/composables/useFileHandler.ts
index 943b97f..17169ec 100644
--- a/composables/useFileHandler.ts
+++ b/composables/useFileHandler.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
 export function useFileHandler() {
   const file = ref<File | null>(null);
diff --git a/composables/useLoader.ts b/composables/useLoader.ts
index b4fabfb..8254ef8 100644
--- a/composables/useLoader.ts
+++ b/composables/useLoader.ts
@@ -1,6 +1,6 @@
 export const useLoader = () => {
-    const loader = useState<boolean>("loader", () => false);
-    const start = () => (loader.value = true);
-    const stop = () => (loader.value = false);
-    return { loader, start, stop };
-};
\ No newline at end of file
+  const loader = useState<boolean>("loader", () => false);
+  const start = () => (loader.value = true);
+  const stop = () => (loader.value = false);
+  return { loader, start, stop };
+};
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 934c3a1..4b785f2 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,5 @@
 // @ts-check
-import withNuxt from './.nuxt/eslint.config.mjs'
+import withNuxt from "./.nuxt/eslint.config.mjs";
 
-export default withNuxt(
-  // Your custom configs here
-)
+export default withNuxt();
+// Your custom configs here
diff --git a/middleware/guest.ts b/middleware/guest.ts
index 8b771be..3ec0293 100644
--- a/middleware/guest.ts
+++ b/middleware/guest.ts
@@ -1,8 +1,7 @@
 export default defineNuxtRouteMiddleware(async (to, from) => {
-    const { loggedIn , fetch } = useUserSession();
-    await fetch()
-    if (loggedIn.value) {
-      return navigateTo("/");
-    }
-  });
-  
\ No newline at end of file
+  const { loggedIn, fetch } = useUserSession();
+  await fetch();
+  if (loggedIn.value) {
+    return navigateTo("/");
+  }
+});
diff --git a/package.json b/package.json
index 76ed08c..612e7e4 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,9 @@
     "postinstall": "nuxt prepare && npm run db:migrate",
     "db:generate": "drizzle-kit generate",
     "db:migrate": "drizzle-kit migrate",
-    "lint": "yarn lint:eslint && yarn lint:prettier",
+    "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint .",
-    "lint:prettier": "prettier . --check",
+    "lint:prettier": "prettier . --check --write",
     "lint:fix": "eslint . --fix && prettier --write --list-different ."
   },
   "dependencies": {
diff --git a/pages/index.vue b/pages/index.vue
index 8266188..bc5437e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,13 @@
 <template>
-    <div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
-        <Sidebar />
-        <CreateThreadModal />
-    </div>
-
+  <div
+    class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-200"
+  >
+    <Sidebar />
+    <CreateThreadModal />
+  </div>
 </template>
 <script setup>
 definePageMeta({
-  middleware: ["auth"]
-})
+  middleware: ["auth"],
+});
 </script>
diff --git a/pages/login.vue b/pages/login.vue
index 12a2bc7..8eed479 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,58 +1,76 @@
 <template>
-    <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-md w-full space-y-8">
-            <div class="flex justify-between items-center">
-                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">
-                    Login to your account
-                </h2>
-                <DarkModeToggle />
-            </div>
-            <AuthForm :on-submit="handleSubmit" 
-            link-text="Don't have an account?" link-path="/signup"
-            button-text="Login">
-                <UFormGroup label="Email" label-for="email">
-                    <UInput
-v-model="email" name="email" label="Email address" placeholder="Enter your email"
-                        autocomplete="email" type="email" size="lg" required />
-                </UFormGroup>
-                <UFormGroup label="password" label-for="password">
-                    <UInput
-v-model="password" name="password" label="Password" placeholder="Enter your password"
-minlength="6"
-                        autocomplete="new-password" type="password" size="lg" required />
-                </UFormGroup>
-            </AuthForm>
-        </div>
+  <div
+    class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
+  >
+    <div class="max-w-md w-full space-y-8">
+      <div class="flex justify-between items-center">
+        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">
+          Login to your account
+        </h2>
+        <DarkModeToggle />
+      </div>
+      <AuthForm
+        :on-submit="handleSubmit"
+        link-text="Don't have an account?"
+        link-path="/signup"
+        button-text="Login"
+      >
+        <UFormGroup label="Email" label-for="email">
+          <UInput
+            v-model="email"
+            name="email"
+            label="Email address"
+            placeholder="Enter your email"
+            autocomplete="email"
+            type="email"
+            size="lg"
+            required
+          />
+        </UFormGroup>
+        <UFormGroup label="password" label-for="password">
+          <UInput
+            v-model="password"
+            name="password"
+            label="Password"
+            placeholder="Enter your password"
+            minlength="6"
+            autocomplete="new-password"
+            type="password"
+            size="lg"
+            required
+          />
+        </UFormGroup>
+      </AuthForm>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
 definePageMeta({
-    middleware: ["guest"]
-})
+  middleware: ["guest"],
+});
 
-const email = ref('');
-const password = ref('');
+const email = ref("");
+const password = ref("");
 const toast = useToast();
 
 const handleSubmit = async () => {
-    try {
-        const res = await $fetch('/api/auth/signin', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ email: email.value, password: password.value })
-        });
+  try {
+    const res = await $fetch("/api/auth/signin", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email: email.value, password: password.value }),
+    });
 
-        await navigateTo('/')
-        
-    } catch (error) {
-        console.error('Login failed', error);
-        toast.add({
-            title: 'Login failed',
-            description: error.message,
-        })
-    }
+    await navigateTo("/");
+  } catch (error) {
+    console.error("Login failed", error);
+    toast.add({
+      title: "Login failed",
+      description: error.message,
+    });
+  }
 };
 </script>
diff --git a/pages/logs.vue b/pages/logs.vue
index 282519d..b138a37 100644
--- a/pages/logs.vue
+++ b/pages/logs.vue
@@ -1,84 +1,90 @@
 <template>
-    <div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
-        <Sidebar />
+  <div
+    class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-200"
+  >
+    <Sidebar />
 
-        <div class="flex-1 flex flex-col h-screen overflow-hidden min-w-0">
-            <UTable :columns="cols" :rows="logsData?.items || []">
-                <template #empty-state>
-                    <div class="flex flex-col items-center justify-center py-6 gap-3">
-                        <span class="italic text-sm">No logs here!</span>
-                    </div>
-                </template>
-            </UTable>
-            <UPagination
-v-model="currentPage" :total="logsData?.pagination?.totalCount || 0" :to="(page) => ({
-                query: { page }
-            })" />
-        </div>
+    <div class="flex-1 flex flex-col h-screen overflow-hidden min-w-0">
+      <UTable :columns="cols" :rows="logsData?.items || []">
+        <template #empty-state>
+          <div class="flex flex-col items-center justify-center py-6 gap-3">
+            <span class="italic text-sm">No logs here!</span>
+          </div>
+        </template>
+      </UTable>
+      <UPagination
+        v-model="currentPage"
+        :total="logsData?.pagination?.totalCount || 0"
+        :to="
+          (page) => ({
+            query: { page },
+          })
+        "
+      />
     </div>
+  </div>
 </template>
 
 <script setup>
 definePageMeta({
-    middleware: ["auth"]
-})
+  middleware: ["auth"],
+});
 
-const route = useRoute()
-const currentPage = ref(parseInt(route.query.page) || 1)
+const route = useRoute();
+const currentPage = ref(parseInt(route.query.page) || 1);
 
 // Create a reactive fetch key that changes with the page
-const fetchKey = computed(() => `/api/logs?page=${currentPage.value}`)
+const fetchKey = computed(() => `/api/logs?page=${currentPage.value}`);
 
 // Use a reactive fetch that will automatically refetch when the key changes
 const { data: logsData, refresh } = await useFetch(fetchKey, {
-    watch: [fetchKey]
-})
+  watch: [fetchKey],
+});
 
 // Watch for route changes
 watch(
-    () => route.query.page,
-    async (newPage) => {
-        currentPage.value = parseInt(newPage) || 1
-        await refresh()
-    }
-)
+  () => route.query.page,
+  async (newPage) => {
+    currentPage.value = parseInt(newPage) || 1;
+    await refresh();
+  },
+);
 
 const cols = [
-    {
-        key: 'inputTokens',
-        label: 'Input Tokens',
-        width: '100px',
-        align: 'center',
-        sortable: true,
-    },
-    {
-        key: 'outputTokens',
-        label: 'Output Tokens',
-        width: '100px',
-        align: 'center',
-        sortable: true,
-    },
-    {
-        key: 'cacheReadInputTokens',
-        label: 'Cache Creation Input Tokens',
-        width: '100px',
-        align: 'center',
-        sortable: true,
-    },
-    {
-        key: 'cacheCreationInputTokens',
-        label: 'Cache Read Input Tokens',
-        width: '100px',
-        align: 'center',
-        sortable: true,
-    },
-    {
-        key: 'createdAt',
-        label: 'Created At',
-        width: '100px',
-        align: 'center',
-        sortable: true,
-    }
-
-]
+  {
+    key: "inputTokens",
+    label: "Input Tokens",
+    width: "100px",
+    align: "center",
+    sortable: true,
+  },
+  {
+    key: "outputTokens",
+    label: "Output Tokens",
+    width: "100px",
+    align: "center",
+    sortable: true,
+  },
+  {
+    key: "cacheReadInputTokens",
+    label: "Cache Creation Input Tokens",
+    width: "100px",
+    align: "center",
+    sortable: true,
+  },
+  {
+    key: "cacheCreationInputTokens",
+    label: "Cache Read Input Tokens",
+    width: "100px",
+    align: "center",
+    sortable: true,
+  },
+  {
+    key: "createdAt",
+    label: "Created At",
+    width: "100px",
+    align: "center",
+    sortable: true,
+  },
+];
 </script>
diff --git a/pages/signup.vue b/pages/signup.vue
index 2c3e6d7..8a47333 100644
--- a/pages/signup.vue
+++ b/pages/signup.vue
@@ -1,66 +1,82 @@
 <template>
-    <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-md w-full space-y-8">
-            <div class="flex justify-between items-center">
-                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">
-                    Create your account
-                </h2>
-                <DarkModeToggle />
-            </div>
-            <AuthForm
-:on-submit="handleSubmit" 
-button-text="Sign up" 
-link-text="Already have an account?"
-                link-path="/login">
-                <UFormGroup label="Email" label-for="email">
-                    <UInput
-v-model="email" name="email" label="Email address" placeholder="Enter your email"
-                        autocomplete="email" type="email" size="lg" required />
-                </UFormGroup>
-                <UFormGroup label="password" label-for="password">
-                    <UInput
-                    minlength="6"
-v-model="password" name="password" label="Password" placeholder="Enter your password"
-                        autocomplete="new-password" type="password" size="lg" required />
-                </UFormGroup>
-            </AuthForm>
-        </div>
+  <div
+    class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
+  >
+    <div class="max-w-md w-full space-y-8">
+      <div class="flex justify-between items-center">
+        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">
+          Create your account
+        </h2>
+        <DarkModeToggle />
+      </div>
+      <AuthForm
+        :on-submit="handleSubmit"
+        button-text="Sign up"
+        link-text="Already have an account?"
+        link-path="/login"
+      >
+        <UFormGroup label="Email" label-for="email">
+          <UInput
+            v-model="email"
+            name="email"
+            label="Email address"
+            placeholder="Enter your email"
+            autocomplete="email"
+            type="email"
+            size="lg"
+            required
+          />
+        </UFormGroup>
+        <UFormGroup label="password" label-for="password">
+          <UInput
+            minlength="6"
+            v-model="password"
+            name="password"
+            label="Password"
+            placeholder="Enter your password"
+            autocomplete="new-password"
+            type="password"
+            size="lg"
+            required
+          />
+        </UFormGroup>
+      </AuthForm>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 definePageMeta({
-    middleware: ["guest"]
-})
-const email = ref('');
-const password = ref('');
+  middleware: ["guest"],
+});
+const email = ref("");
+const password = ref("");
 const toast = useToast();
 
 const handleSubmit = async () => {
-    try {
-        const res = await fetch('/api/auth/signup', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ email: email.value, password: password.value })
-        });
-        if (res.ok) {
-            await navigateTo('/login')
-        } else {
-            const data = await res.json();
-            toast.add({
-                title: 'Error',
-                description: data.message,
-                color: "red"
-            });
-        }
-
-    } catch (error) {
-        toast.add({
-            title: 'Error',
-            description: 'Something went wrong',
-            color: "red"
-        });
+  try {
+    const res = await fetch("/api/auth/signup", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email: email.value, password: password.value }),
+    });
+    if (res.ok) {
+      await navigateTo("/login");
+    } else {
+      const data = await res.json();
+      toast.add({
+        title: "Error",
+        description: data.message,
+        color: "red",
+      });
     }
+  } catch (error) {
+    toast.add({
+      title: "Error",
+      description: "Something went wrong",
+      color: "red",
+    });
+  }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/threads/[id].vue b/pages/threads/[id].vue
index 88d85a4..1f2d970 100644
--- a/pages/threads/[id].vue
+++ b/pages/threads/[id].vue
@@ -1,100 +1,102 @@
 <template>
-    <div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
-        <Sidebar/>
-        <div class="flex-1 flex flex-col h-screen overflow-hidden min-w-0">
-            <!-- Messages List Component -->
-            <MessageList :messages="messages" />
+  <div
+    class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-200"
+  >
+    <Sidebar />
+    <div class="flex-1 flex flex-col h-screen overflow-hidden min-w-0">
+      <!-- Messages List Component -->
+      <MessageList :messages="messages" />
 
-            <!-- Message Input Component -->
-            <MessageInput 
-                v-model:attached-files="attachedFiles"
-                @send-message="handleSendMessage"
-            />
-        </div>
-        <CreateThreadModal />
+      <!-- Message Input Component -->
+      <MessageInput
+        v-model:attached-files="attachedFiles"
+        @send-message="handleSendMessage"
+      />
     </div>
+    <CreateThreadModal />
+  </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted } from "vue";
 
-const route = useRoute()
-const { getThread , messages } = useApp()
-const { loader } = useLoader()
+const route = useRoute();
+const { getThread, messages } = useApp();
+const { loader } = useLoader();
 
-const attachedFiles = ref([])
+const attachedFiles = ref([]);
 
 definePageMeta({
-  middleware: ["auth"]
-})
+  middleware: ["auth"],
+});
 
 // get array of ids of selected files
 const selectedFiles = computed(() => {
-    return attachedFiles.value
-        .filter(file => file.selected)
-        .map(file => file.id)
-})
+  return attachedFiles.value
+    .filter((file) => file.selected)
+    .map((file) => file.id);
+});
 
 // Load initial data
 onMounted(async () => {
-    try {
-        loader.value = true
-        messages.value = await $fetch('/api/messages/' + route.params.id)
-        const thread = await getThread(route.params.id)
-        attachedFiles.value = thread?.files ?? []
-    } catch (error) {
-        console.error('Error loading thread:', error)
-        attachedFiles.value = []
-    } finally {
-        loader.value = false
-    }
-})
+  try {
+    loader.value = true;
+    messages.value = await $fetch("/api/messages/" + route.params.id);
+    const thread = await getThread(route.params.id);
+    attachedFiles.value = thread?.files ?? [];
+  } catch (error) {
+    console.error("Error loading thread:", error);
+    attachedFiles.value = [];
+  } finally {
+    loader.value = false;
+  }
+});
 
 const handleSendMessage = async (messageText) => {
-    if (messageText.trim() !== '') {
-        const newMessage = {
-            id: messages.value.length + 1,
-            content: messageText,
-            role: 'user'
-        }
-        messages.value.push(newMessage)
-        loader.value = true
+  if (messageText.trim() !== "") {
+    const newMessage = {
+      id: messages.value.length + 1,
+      content: messageText,
+      role: "user",
+    };
+    messages.value.push(newMessage);
+    loader.value = true;
 
-        try {
-            const res = await $fetch('/api/chat', {
-                method: 'POST',
-                body: JSON.stringify({
-                    messages: messages.value,
-                    threadId: route.params.id,
-                    selectedFiles: selectedFiles.value
-                })
-            })
+    try {
+      const res = await $fetch("/api/chat", {
+        method: "POST",
+        body: JSON.stringify({
+          messages: messages.value,
+          threadId: route.params.id,
+          selectedFiles: selectedFiles.value,
+        }),
+      });
 
-            messages.value.push({
-                id: messages.value.length + 1,
-                content: res.content[0].text,
-                role: 'assistant'
-            })
-        } catch (error) {
-            console.error('Error sending message:', error)
-            // Handle error (maybe show a notification to user)
-        } finally {
-            loader.value = false
-        }
+      messages.value.push({
+        id: messages.value.length + 1,
+        content: res.content[0].text,
+        role: "assistant",
+      });
+    } catch (error) {
+      console.error("Error sending message:", error);
+      // Handle error (maybe show a notification to user)
+    } finally {
+      loader.value = false;
     }
-}
+  }
+};
 </script>
 
 <style scoped>
 /* Optional: Add styles to handle markdown content width */
 :deep(.markdown-body) {
-    max-width: 100%;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
 }
 
 :deep(pre) {
-    max-width: 100%;
-    overflow-x: auto;
+  max-width: 100%;
+  overflow-x: auto;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/plugins/markdownit.client.ts b/plugins/markdownit.client.ts
index c2de073..09d8be4 100644
--- a/plugins/markdownit.client.ts
+++ b/plugins/markdownit.client.ts
@@ -1,6 +1,6 @@
 import markdownit from "markdown-it";
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github-dark.min.css';
+import hljs from "highlight.js";
+import "highlight.js/styles/github-dark.min.css";
 
 export default defineNuxtPlugin((nuxtApp) => {
   let codeBlockId = 0;
@@ -8,27 +8,32 @@ export default defineNuxtPlugin((nuxtApp) => {
   const md = markdownit({
     highlight: function (str, lang) {
       const currentId = `code-block-${codeBlockId++}`;
-      
+
       if (lang && hljs.getLanguage(lang)) {
         try {
-          const highlighted = hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
+          const highlighted = hljs.highlight(str, {
+            language: lang,
+            ignoreIllegals: true,
+          }).value;
           // Return without the surrounding pre/code tags since markdown-it will add them
           return highlighted;
         } catch (__) {}
       }
 
       return md.utils.escapeHtml(str);
-    }
+    },
   });
 
   // Override the fence renderer to add our custom wrapper
   md.renderer.rules.fence = function (tokens, idx, options, env, slf) {
     const token = tokens[idx];
-    const info = token.info ? md.utils.unescapeAll(token.info).trim() : '';
-    const lang = info ? info.split(/\s+/g)[0] : '';
+    const info = token.info ? md.utils.unescapeAll(token.info).trim() : "";
+    const lang = info ? info.split(/\s+/g)[0] : "";
     const currentId = `code-block-${codeBlockId++}`;
 
-    const code = options.highlight ? options.highlight(token.content, lang, '') : token.content;
+    const code = options.highlight
+      ? options.highlight(token.content, lang, "")
+      : token.content;
 
     const codeBlock = `
       <div class="relative code-block">
@@ -54,32 +59,33 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   // Add the copy functionality to the window object
   if (import.meta.client) {
-    window.copyCode = async function(id: string) {
+    window.copyCode = async function (id: string) {
       const codeBlock = document.getElementById(id);
       if (!codeBlock) return;
 
-      const code = codeBlock.textContent || '';
-      
+      const code = codeBlock.textContent || "";
+
       try {
         await navigator.clipboard.writeText(code);
-        
+
         // Get the button associated with this code block
-        const button = codeBlock.parentElement?.parentElement?.querySelector('.copy-button');
-        const copyIcon = button?.querySelector('.copy-icon');
-        const checkIcon = button?.querySelector('.check-icon');
-        
+        const button =
+          codeBlock.parentElement?.parentElement?.querySelector(".copy-button");
+        const copyIcon = button?.querySelector(".copy-icon");
+        const checkIcon = button?.querySelector(".check-icon");
+
         if (copyIcon && checkIcon) {
-          copyIcon.classList.add('hidden');
-          checkIcon.classList.remove('hidden');
-          
+          copyIcon.classList.add("hidden");
+          checkIcon.classList.remove("hidden");
+
           // Reset button after 2 seconds
           setTimeout(() => {
-            copyIcon.classList.remove('hidden');
-            checkIcon.classList.add('hidden');
+            copyIcon.classList.remove("hidden");
+            checkIcon.classList.add("hidden");
           }, 2000);
         }
       } catch (err) {
-        console.error('Failed to copy code:', err);
+        console.error("Failed to copy code:", err);
       }
     };
   }
@@ -89,4 +95,4 @@ export default defineNuxtPlugin((nuxtApp) => {
       mdRenderer: md,
     },
   };
-});
\ No newline at end of file
+});
diff --git a/server/api/chat.post.ts b/server/api/chat.post.ts
index 57e9ab4..61e23bb 100644
--- a/server/api/chat.post.ts
+++ b/server/api/chat.post.ts
@@ -73,8 +73,8 @@ export default defineEventHandler(async (event: H3Event) => {
         .where(
           and(
             eq(files.threadId, body.threadId),
-            inArray(files.id, body.selectedFiles)
-          )
+            inArray(files.id, body.selectedFiles),
+          ),
         );
 
       for (const file of selectedFiles) {
diff --git a/server/api/logs/index.get.ts b/server/api/logs/index.get.ts
index 6039acd..8d3d611 100644
--- a/server/api/logs/index.get.ts
+++ b/server/api/logs/index.get.ts
@@ -11,7 +11,7 @@ export default defineEventHandler(async (event) => {
   const page = Math.max(1, parseInt(query.page as string) || 1);
   const pageSize = Math.max(
     1,
-    Math.min(100, parseInt(query.pageSize as string) || 10)
+    Math.min(100, parseInt(query.pageSize as string) || 10),
   );
   const offset = (page - 1) * pageSize;
 
diff --git a/server/api/messages/[threadId].get.ts b/server/api/messages/[threadId].get.ts
index b39a830..a36e6f6 100644
--- a/server/api/messages/[threadId].get.ts
+++ b/server/api/messages/[threadId].get.ts
@@ -1,6 +1,6 @@
 import db from "~/server/utils/db";
 import { eq } from "drizzle-orm";
-import { messages , threads } from "~/server/database/schema";
+import { messages, threads } from "~/server/database/schema";
 
 export default defineEventHandler(async (event) => {
   try {
diff --git a/server/api/threads/[id]/index.delete.ts b/server/api/threads/[id]/index.delete.ts
index 9da28e7..1b0e0a7 100644
--- a/server/api/threads/[id]/index.delete.ts
+++ b/server/api/threads/[id]/index.delete.ts
@@ -24,7 +24,6 @@ export default defineEventHandler(async (event) => {
       userId = thread.userId;
     }
 
-
     // Delete related records first (to maintain referential integrity)
     await db.delete(messages).where(eq(messages.threadId, id));
     // Delete files
diff --git a/server/api/threads/index.get.ts b/server/api/threads/index.get.ts
index 892b859..be0313e 100644
--- a/server/api/threads/index.get.ts
+++ b/server/api/threads/index.get.ts
@@ -24,7 +24,7 @@ export default defineEventHandler(async (event) => {
         FROM threads t
         WHERE t.user_id = ${session.user.id}
         ORDER BY t.created_at DESC
-      `
+      `,
     );
 
     // Parse the JSON string in files column
diff --git a/server/api/validations/auth.ts b/server/api/validations/auth.ts
index 448e81a..7f066b7 100644
--- a/server/api/validations/auth.ts
+++ b/server/api/validations/auth.ts
@@ -1,24 +1,23 @@
 import { z } from "zod";
 
-
 export const signInRequest = z.object({
-    email: z.string().email(),
-    password:
-        z.string({
-            errorMap: () => (
-                { message: 'Password must be at least 6 characters long' }
-            )
-        })
-            .min(6),
-})
+  email: z.string().email(),
+  password: z
+    .string({
+      errorMap: () => ({
+        message: "Password must be at least 6 characters long",
+      }),
+    })
+    .min(6),
+});
 
 export const signUpRequest = z.object({
-    email: z.string().email(),
-    password:
-        z.string({
-            errorMap: () => (
-                { message: 'Password must be at least 6 characters long' }
-            )
-        })
-            .min(6),
-})
\ No newline at end of file
+  email: z.string().email(),
+  password: z
+    .string({
+      errorMap: () => ({
+        message: "Password must be at least 6 characters long",
+      }),
+    })
+    .min(6),
+});
diff --git a/server/api/validations/chat.ts b/server/api/validations/chat.ts
index 64797a7..e0c78ca 100644
--- a/server/api/validations/chat.ts
+++ b/server/api/validations/chat.ts
@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 export const messageRequest = z.object({
-    threadId: z.string(),
-    prompt: z.string(),
-    selectedFiles: z.array(z.number()).optional(),
-});
\ No newline at end of file
+  threadId: z.string(),
+  prompt: z.string(),
+  selectedFiles: z.array(z.number()).optional(),
+});
diff --git a/server/api/validations/thread.ts b/server/api/validations/thread.ts
index ffb34ba..de37f96 100644
--- a/server/api/validations/thread.ts
+++ b/server/api/validations/thread.ts
@@ -1,10 +1,9 @@
 import { z } from "zod";
 
-
 export const createThreadRequest = z.object({
-    name: z.string().min(1),
-    systemMessage: z.string().min(5),
-    temperature: z.number().min(0).max(1),
-    model: z.string(),
-    maxTokens: z.number().min(1),
-});
\ No newline at end of file
+  name: z.string().min(1),
+  systemMessage: z.string().min(5),
+  temperature: z.number().min(0).max(1),
+  model: z.string(),
+  maxTokens: z.number().min(1),
+});
diff --git a/server/database/migrations/meta/0000_snapshot.json b/server/database/migrations/meta/0000_snapshot.json
index 3f94edf..d749cbd 100644
--- a/server/database/migrations/meta/0000_snapshot.json
+++ b/server/database/migrations/meta/0000_snapshot.json
@@ -247,4 +247,4 @@
   "internal": {
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/server/database/migrations/meta/0001_snapshot.json b/server/database/migrations/meta/0001_snapshot.json
index d947ab8..ed72b1f 100644
--- a/server/database/migrations/meta/0001_snapshot.json
+++ b/server/database/migrations/meta/0001_snapshot.json
@@ -303,4 +303,4 @@
   "internal": {
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/server/database/migrations/meta/0002_snapshot.json b/server/database/migrations/meta/0002_snapshot.json
index 1172623..6417328 100644
--- a/server/database/migrations/meta/0002_snapshot.json
+++ b/server/database/migrations/meta/0002_snapshot.json
@@ -70,12 +70,8 @@
           "name": "files_user_id_users_id_fk",
           "tableFrom": "files",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -147,12 +143,8 @@
           "name": "logs_users_id_users_id_fk",
           "tableFrom": "logs",
           "tableTo": "users",
-          "columnsFrom": [
-            "users_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["users_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -213,12 +205,8 @@
           "name": "messages_user_id_users_id_fk",
           "tableFrom": "messages",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -296,12 +284,8 @@
           "name": "threads_user_id_users_id_fk",
           "tableFrom": "threads",
           "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
           "onDelete": "no action",
           "onUpdate": "no action"
         }
@@ -366,4 +350,4 @@
   "internal": {
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/server/database/migrations/meta/_journal.json b/server/database/migrations/meta/_journal.json
index 32a0e2c..28e5efc 100644
--- a/server/database/migrations/meta/_journal.json
+++ b/server/database/migrations/meta/_journal.json
@@ -24,4 +24,4 @@
       "breakpoints": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/server/database/schema.ts b/server/database/schema.ts
index 195c452..09465ed 100644
--- a/server/database/schema.ts
+++ b/server/database/schema.ts
@@ -1,4 +1,4 @@
-import { sqliteTable, text, integer, real  } from "drizzle-orm/sqlite-core";
+import { sqliteTable, text, integer, real } from "drizzle-orm/sqlite-core";
 
 export const threads = sqliteTable("threads", {
   id: integer("id").primaryKey(),
@@ -6,9 +6,9 @@ export const threads = sqliteTable("threads", {
   systemMessage: text("system_message"),
   createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
   temperature: real("temperature").default(0.5),
-  model : text('model').default('claude-3-5-sonnet-20241022'),
-  maxTokens : integer('max_tokens').default(1024),
-  userId : integer('user_id').references(() => users.id),
+  model: text("model").default("claude-3-5-sonnet-20241022"),
+  maxTokens: integer("max_tokens").default(1024),
+  userId: integer("user_id").references(() => users.id),
 });
 
 export const messages = sqliteTable("messages", {
@@ -24,8 +24,8 @@ export const files = sqliteTable("files", {
   id: integer("id").primaryKey(),
   name: text("name"),
   path: text("path"),
-  text : text("text"),
-  tokens : integer('tokens'),
+  text: text("text"),
+  tokens: integer("tokens"),
   createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
   threadId: integer("thread_id").notNull(),
   userId: integer("user_id").references(() => users.id),
@@ -39,13 +39,12 @@ export const users = sqliteTable("users", {
   createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
 });
 
-
 export const logs = sqliteTable("logs", {
   id: integer("id").primaryKey(),
-  inputTokens : integer('input_tokens').default(0),
-  outputTokens : integer('output_tokens').default(0),
-  cacheCreationInputTokens : integer('cache_creation_input_tokens').default(0),
-  cacheReadInputTokens : integer('cache_read_input_tokens').default(0),
+  inputTokens: integer("input_tokens").default(0),
+  outputTokens: integer("output_tokens").default(0),
+  cacheCreationInputTokens: integer("cache_creation_input_tokens").default(0),
+  cacheReadInputTokens: integer("cache_read_input_tokens").default(0),
   createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
   userId: integer("users_id").references(() => users.id),
-});
\ No newline at end of file
+});
diff --git a/server/plugins/db.ts b/server/plugins/db.ts
index cdf06fc..fbe9dc1 100644
--- a/server/plugins/db.ts
+++ b/server/plugins/db.ts
@@ -1,8 +1,8 @@
 // server/plugins/db.ts
-import { getDb } from '../utils/db';
+import { getDb } from "../utils/db";
 
 export default defineNitroPlugin(() => {
   // Initialize DB connection once
   getDb();
-  console.log('Database initialized in Nitro plugin');
-});
\ No newline at end of file
+  console.log("Database initialized in Nitro plugin");
+});
diff --git a/server/utils/db.ts b/server/utils/db.ts
index 8bec5e1..264aae4 100644
--- a/server/utils/db.ts
+++ b/server/utils/db.ts
@@ -1,6 +1,6 @@
-import { drizzle } from 'drizzle-orm/better-sqlite3';
-import Database from 'better-sqlite3';
-import * as schema from '../database/schema';
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import Database from "better-sqlite3";
+import * as schema from "../database/schema";
 
 let db: ReturnType<typeof drizzle>;
 
@@ -8,11 +8,11 @@ let db: ReturnType<typeof drizzle>;
 export function getDb() {
   if (!db) {
     const sqlite = new Database(useRuntimeConfig().databaseUrl);
-    sqlite.pragma('foreign_keys = ON');
+    sqlite.pragma("foreign_keys = ON");
     db = drizzle(sqlite, { schema });
-    console.log('New database connection established');
+    console.log("New database connection established");
   }
   return db;
 }
 
-export default getDb()
\ No newline at end of file
+export default getDb();
diff --git a/server/utils/fileParser.ts b/server/utils/fileParser.ts
index 124f2d2..29898fc 100644
--- a/server/utils/fileParser.ts
+++ b/server/utils/fileParser.ts
@@ -4,42 +4,90 @@ import { promisify } from "util";
 const textractFromBuffer = promisify(textract.fromBufferWithName);
 
 const TEXT_EXTENSIONS = new Set([
-  'txt', 'js', 'ts', 'json', 'html', 'htm', 'atom', 'rss', 'md', 'markdown',
-  'epub', 'xml', 'xsl', 'pdf', 'doc', 'docx', 'odt', 'ott', 'rtf',
-  'xls', 'xlsx', 'xlsb', 'xlsm', 'xltx', 'csv', 'ods', 'ots',
-  'pptx', 'potx', 'odp', 'otp', 'odg', 'otg', 'png', 'jpg', 'jpeg', 'gif', 'dxf'
+  "txt",
+  "js",
+  "ts",
+  "json",
+  "html",
+  "htm",
+  "atom",
+  "rss",
+  "md",
+  "markdown",
+  "epub",
+  "xml",
+  "xsl",
+  "pdf",
+  "doc",
+  "docx",
+  "odt",
+  "ott",
+  "rtf",
+  "xls",
+  "xlsx",
+  "xlsb",
+  "xlsm",
+  "xltx",
+  "csv",
+  "ods",
+  "ots",
+  "pptx",
+  "potx",
+  "odp",
+  "otp",
+  "odg",
+  "otg",
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "dxf",
 ]);
 
 const TEXT_MIMETYPES = new Set([
-  'text/html', 'text/htm', 'application/atom+xml', 'application/rss+xml',
-  'text/markdown', 'application/epub+zip', 'application/xml', 'text/xml',
-  'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-  'application/vnd.oasis.opendocument.text', 'application/rtf',
-  'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  'text/csv', 'application/vnd.oasis.opendocument.spreadsheet',
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-  'application/vnd.oasis.opendocument.presentation',
-  'application/vnd.oasis.opendocument.graphics',
-  'image/png', 'image/jpeg', 'image/gif',
-  'application/dxf', 'application/javascript'
+  "text/html",
+  "text/htm",
+  "application/atom+xml",
+  "application/rss+xml",
+  "text/markdown",
+  "application/epub+zip",
+  "application/xml",
+  "text/xml",
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.oasis.opendocument.text",
+  "application/rtf",
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "text/csv",
+  "application/vnd.oasis.opendocument.spreadsheet",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "application/vnd.oasis.opendocument.presentation",
+  "application/vnd.oasis.opendocument.graphics",
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "application/dxf",
+  "application/javascript",
 ]);
 
 export async function parseFile(
   filename: string,
   buffer: Buffer,
-  mimeType?: string
+  mimeType?: string,
 ): Promise<string> {
   try {
-    const ext = filename.split('.').pop()?.toLowerCase();
+    const ext = filename.split(".").pop()?.toLowerCase();
 
     // Use buffer.toString() for plain text files and specific cases
     if (
-      mimeType?.startsWith('text/') ||
-      mimeType === 'application/json' ||
-      mimeType === 'application/javascript' ||
-      ext === 'ts' ||
-      ext === 'js' ||
-      ext === 'json'
+      mimeType?.startsWith("text/") ||
+      mimeType === "application/json" ||
+      mimeType === "application/javascript" ||
+      ext === "ts" ||
+      ext === "js" ||
+      ext === "json"
     ) {
       return buffer.toString();
     }
@@ -59,4 +107,4 @@ export async function parseFile(
     console.error("Error parsing file:", error);
     throw new Error(`Failed to parse file: ${error.message}`);
   }
-}
\ No newline at end of file
+}