fix: ModelSelectorLogo styles for dark mode (#39)

* fix: ModelSelectorLogo styles for dark mode and correct typo in Tool component documentation

* fix(docs): update ModelSelectorLogo styles for dark mode

Author: peoray

apps/www/content/3.components/1.chatbot/model-selector.md

@@ -206,7 +206,7 @@ const props = defineProps<Props>()
   <img
     v-bind="$attrs"
     :alt="`${props.provider} logo`"
-    :class="cn('size-3', props.class)"
+    :class="cn('size-3 dark:invert', props.class)"
     height="12"
     :src="`https://models.dev/logos/${props.provider}.svg`"
     width="12"
@@ -230,7 +230,7 @@ const props = defineProps<Props>()
   <div
     :class="
       cn(
-        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 [&>img]:ring-border',
+        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground',
         props.class,
       )
     "

apps/www/content/3.components/1.chatbot/tool.md

@@ -4,7 +4,7 @@ description: A collapsible component for displaying tool invocation details in A
 icon: lucide:tool-case
 ---
 
-The `Tool` component isplays a collapsible interface for showing/hiding tool details. It is designed to take the `ToolUIPart` type from the AI SDK and display it in a collapsible interface.
+The `Tool` component displays a collapsible interface for showing/hiding tool details. It is designed to take the `ToolUIPart` type from the AI SDK and display it in a collapsible interface.
 
 :::ComponentLoader{label="Preview" componentName="Tool"}
 :::

packages/elements/src/model-selector/ModelSelectorLogo.vue

@@ -14,7 +14,7 @@ const props = defineProps<Props>()
   <img
     v-bind="$attrs"
     :alt="`${props.provider} logo`"
-    :class="cn('size-3', props.class)"
+    :class="cn('size-3 dark:invert', props.class)"
     height="12"
     :src="`https://models.dev/logos/${props.provider}.svg`"
     width="12"

packages/elements/src/model-selector/ModelSelectorLogoGroup.vue

@@ -13,7 +13,7 @@ const props = defineProps<Props>()
   <div
     :class="
       cn(
-        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 [&>img]:ring-border',
+        '-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground',
         props.class,
       )
     "