Lumpiasty/llama.cpp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: ESLint config updates (#27700)

Browse Source 
* chore: Spacing between sibling elements in html markup

* chore: Formatting and linting rules
This commit is contained in:
Aleksander Grygier
2026-08-25 14:34:34 +02:00
committed by GitHub
parent 3737e41370
commit f1357e4998
267 changed files with 1706 additions and 1344 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/ui/tests/stories/ChatMessage.stories.svelte
+8 -8
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import ChatMessage from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte';
import type { ChatMessageActions } from '$lib/types';
@@ -100,10 +100,10 @@
</script>
<Story
name="User"
args={{
message: userMessage
}}
name="User"
play={async () => {
const { settingsStore } = await import('$lib/stores/settings/index.svelte');
@@ -112,11 +112,11 @@
/>
<Story
name="Assistant"
args={{
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
message: assistantMessage
}}
name="Assistant"
play={async () => {
const { settingsStore } = await import('$lib/stores/settings/index.svelte');
@@ -125,11 +125,11 @@
/>
<Story
name="AssistantWithReasoning"
args={{
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
message: assistantWithReasoning
}}
name="AssistantWithReasoning"
play={async () => {
const { settingsStore } = await import('$lib/stores/settings/index.svelte');
@@ -138,11 +138,11 @@
/>
<Story
name="RawLlmOutput"
args={{
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
message: rawOutputMessage
}}
name="RawLlmOutput"
play={async () => {
const { settingsStore } = await import('$lib/stores/settings/index.svelte');
@@ -151,11 +151,11 @@
/>
<Story
name="WithReasoningContent"
args={{
message: streamingMessage
}}
asChild
name="WithReasoningContent"
play={async () => {
const { settingsStore } = await import('$lib/stores/settings/index.svelte');
@@ -203,15 +203,15 @@
}}
>
<div class="w-[56rem]">
<ChatMessage message={streamingMessage} {chatActions} />
<ChatMessage {chatActions} message={streamingMessage} />
</div>
</Story>
<Story
name="Processing"
args={{
message: processingMessage
}}
name="Processing"
play={async () => {
const { settingsStore } = await import('$lib/stores/settings/index.svelte');
tools/ui/tests/stories/ChatScreenForm.stories.svelte
+4 -4
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import jpgAsset from './fixtures/assets/1.jpg?url';
import pdfAsset from './fixtures/assets/example.pdf?raw';
import svgAsset from './fixtures/assets/hf-logo.svg?url';
@@ -42,8 +42,8 @@
</script>
<Story
name="Default"
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
name="Default"
play={async ({ canvas, userEvent }) => {
const textarea = await canvas.findByRole('textbox');
const submitButton = await canvas.findByRole('button', { name: 'Send' });
@@ -67,14 +67,14 @@
}}
/>
<Story name="Loading" args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', isLoading: true }} />
<Story args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', isLoading: true }} name="Loading" />
<Story
name="FileAttachments"
args={{
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
uploadedFiles: fileAttachments
}}
name="FileAttachments"
play={async ({ canvas }) => {
const jpgAttachment = canvas.getByAltText('1.jpg');
const svgAttachment = canvas.getByAltText('hf-logo.svg');
tools/ui/tests/stories/MarkdownContent.stories.svelte
+9 -9
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { AI_TUTORIAL_MD } from './fixtures/ai-tutorial.js';
import { API_DOCS_MD } from './fixtures/api-docs.js';
import { BLOG_POST_MD } from './fixtures/blog-post.js';
@@ -19,40 +19,39 @@
});
</script>
<Story name="Empty" args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: EMPTY_MD }} />
<Story args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: EMPTY_MD }} name="Empty" />
<Story
name="AI Tutorial"
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: AI_TUTORIAL_MD }}
name="AI Tutorial"
/>
<Story
name="API Documentation"
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: API_DOCS_MD }}
name="API Documentation"
/>
<Story
name="Technical Blog"
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: BLOG_POST_MD }}
name="Technical Blog"
/>
<Story
name="Data Analysis"
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: DATA_ANALYSIS_MD }}
name="Data Analysis"
/>
<Story
name="README file"
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: README_MD }}
name="README file"
/>
<Story
name="Math Formulas"
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', content: MATH_FORMULAS_MD }}
name="Math Formulas"
/>
<Story
name="URL Links"
args={{
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
content: `# URL Links Test
@@ -68,6 +67,7 @@ You can also test inline links like https://example.com or https://docs.python.o
All links should have \`target="_blank"\` and \`rel="noopener noreferrer"\` attributes for security.`
}}
name="URL Links"
play={async (context) => {
const { canvasElement } = context;
tools/ui/tests/stories/ModelsSelector.stories.svelte
+81 -72
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import ModelsSelectorList from '$lib/components/app/models/ModelsSelectorList.svelte';
import ModelsSelectorOption from '$lib/components/app/models/ModelsSelectorOption.svelte';
@@ -122,11 +122,11 @@
<Story name="List">
<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
<ModelsSelectorList
groups={groupedOptions}
currentModel={selectedModel}
{activeId}
onSelect={handleSelect}
currentModel={selectedModel}
groups={groupedOptions}
onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
onSelect={handleSelect}
/>
</div>
</Story>
@@ -134,15 +134,15 @@
<Story name="SingleLoaded">
<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
<ModelsSelectorList
activeId={null}
currentModel={null}
groups={{
available: [],
favorites: [],
loaded: [loadedModels[0]]
}}
currentModel={null}
activeId={null}
onSelect={handleSelect}
onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
onSelect={handleSelect}
/>
</div>
</Story>
@@ -150,15 +150,15 @@
<Story name="WithFavoritesOnly">
<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
<ModelsSelectorList
activeId={null}
currentModel={null}
groups={{
available: [],
favorites: favoriteModels,
loaded: []
}}
currentModel={null}
activeId={null}
onSelect={handleSelect}
onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
onSelect={handleSelect}
/>
</div>
</Story>
@@ -168,55 +168,60 @@
<div class="px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none">
Server model states
</div>
<ModelsSelectorOption
hideOrgName={true}
isFav={false}
isHighlighted={false}
isSelected={false}
onKeyDown={() => {}}
onMouseEnter={() => {}}
onSelect={() => {}}
option={mockModel('model-idle', 'Model (idle)', 'meta')}
isSelected={false}
isHighlighted={false}
isFav={false}
hideOrgName={true}
onSelect={() => {}}
onMouseEnter={() => {}}
onKeyDown={() => {}}
/>
<ModelsSelectorOption
hideOrgName={true}
isFav={false}
isHighlighted={false}
isSelected={false}
onKeyDown={() => {}}
onMouseEnter={() => {}}
onSelect={() => {}}
option={mockModel('model-loading', 'Model (loading)', 'meta')}
isSelected={false}
isHighlighted={false}
isFav={false}
hideOrgName={true}
onSelect={() => {}}
onMouseEnter={() => {}}
onKeyDown={() => {}}
/>
<ModelsSelectorOption
hideOrgName={true}
isFav={false}
isHighlighted={false}
isSelected={false}
onKeyDown={() => {}}
onMouseEnter={() => {}}
onSelect={() => {}}
option={mockModel('model-loaded', 'Model (loaded)', 'meta')}
isSelected={false}
isHighlighted={false}
isFav={false}
hideOrgName={true}
onSelect={() => {}}
onMouseEnter={() => {}}
onKeyDown={() => {}}
/>
<ModelsSelectorOption
hideOrgName={true}
isFav={false}
isHighlighted={false}
isSelected={false}
onKeyDown={() => {}}
onMouseEnter={() => {}}
onSelect={() => {}}
option={mockModel('model-sleeping', 'Model (sleeping)', 'meta')}
isSelected={false}
isHighlighted={false}
isFav={false}
hideOrgName={true}
onSelect={() => {}}
onMouseEnter={() => {}}
onKeyDown={() => {}}
/>
<ModelsSelectorOption
option={mockModel('model-failed', 'Model (failed)', 'meta')}
isSelected={false}
isHighlighted={false}
isFav={false}
hideOrgName={true}
onSelect={() => {}}
onMouseEnter={() => {}}
isFav={false}
isHighlighted={false}
isSelected={false}
onKeyDown={() => {}}
onMouseEnter={() => {}}
onSelect={() => {}}
option={mockModel('model-failed', 'Model (failed)', 'meta')}
/>
</div>
</Story>
@@ -226,45 +231,49 @@
<div class="px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none">
Selection states
</div>
<ModelsSelectorOption
hideOrgName={true}
isFav={false}
isHighlighted={false}
isSelected={false}
onKeyDown={() => {}}
onMouseEnter={() => {}}
onSelect={() => {}}
option={mockModel('normal-model', 'Normal Model', 'meta')}
isSelected={false}
isHighlighted={false}
isFav={false}
hideOrgName={true}
onSelect={() => {}}
onMouseEnter={() => {}}
onKeyDown={() => {}}
/>
<ModelsSelectorOption
option={mockModel('selected-model', 'Selected Model', 'meta')}
hideOrgName={true}
isFav={false}
isHighlighted={false}
isSelected={true}
isHighlighted={false}
isFav={false}
hideOrgName={true}
onSelect={() => {}}
onMouseEnter={() => {}}
onKeyDown={() => {}}
onMouseEnter={() => {}}
onSelect={() => {}}
option={mockModel('selected-model', 'Selected Model', 'meta')}
/>
<ModelsSelectorOption
option={mockModel('highlighted-model', 'Highlighted Model', 'meta')}
isSelected={false}
hideOrgName={true}
isFav={false}
isHighlighted={true}
isFav={false}
hideOrgName={true}
onSelect={() => {}}
onMouseEnter={() => {}}
onKeyDown={() => {}}
/>
<ModelsSelectorOption
option={mockModel('fav-model', 'Favorite Model', 'Qwen')}
isSelected={false}
isHighlighted={false}
isFav={true}
hideOrgName={true}
onSelect={() => {}}
onMouseEnter={() => {}}
onKeyDown={() => {}}
onMouseEnter={() => {}}
onSelect={() => {}}
option={mockModel('highlighted-model', 'Highlighted Model', 'meta')}
/>
<ModelsSelectorOption
hideOrgName={true}
isFav={true}
isHighlighted={false}
isSelected={false}
onKeyDown={() => {}}
onMouseEnter={() => {}}
onSelect={() => {}}
option={mockModel('fav-model', 'Favorite Model', 'Qwen')}
/>
</div>
</Story>
tools/ui/tests/stories/PwaRefreshAlert.stories.svelte
+4 -4
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import PwaRefreshAlert from '$lib/components/pwa/PwaRefreshAlert.svelte';
import { expect } from 'storybook/test';
@@ -13,8 +13,8 @@
</script>
<Story
name="Default"
args={{ needRefresh: true, updateServiceWorker: () => console.log('reload') }}
name="Default"
play={async ({ canvas }) => {
const title = canvas.getByText('Update available');
@@ -31,8 +31,8 @@
/>
<Story
name="Hidden"
args={{ needRefresh: false, updateServiceWorker: () => console.log('reload') }}
name="Hidden"
play={async ({ canvas }) => {
const title = canvas.queryByText('Update available');
@@ -41,11 +41,11 @@
/>
<Story
name="ClickReload"
args={{
needRefresh: true,
updateServiceWorker: () => console.log('reload')
}}
name="ClickReload"
play={async ({ canvas, userEvent }) => {
const button = canvas.getByRole('button', { name: 'Reload' });
tools/ui/tests/stories/SidebarNavigation.stories.svelte
+1 -1
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import SidebarNavigation from '$lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte';
import { waitFor } from 'storybook/test';
tools/ui/tests/stories/a11y/ActionIcon.a11y.stories.svelte
+3 -2
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { Copy } from '@lucide/svelte';
import { defineMeta } from '@storybook/addon-svelte-csf';
import ActionIcon from '$lib/components/app/actions/ActionIcon.svelte';
@@ -29,6 +29,7 @@
>
<div>
<button type="button">before</button>
<ActionIcon icon={Copy} tooltip="Copy" onclick={() => {}} />
<ActionIcon icon={Copy} onclick={() => {}} tooltip="Copy" />
</div>
</Story>
tools/ui/tests/stories/a11y/ChatMessageStatistics.a11y.stories.svelte
+2 -2
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import ChatMessageStatistics from '$lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte';
import { expect } from 'storybook/test';
@@ -14,7 +14,6 @@
</script>
<Story
name="ViewButtonsSingleTabStop"
args={{
agenticTimings: {
llm: { predicted_ms: 1000, predicted_n: 200, prompt_ms: 500, prompt_n: 100 },
@@ -29,6 +28,7 @@
promptMs: 500,
promptTokens: 100
}}
name="ViewButtonsSingleTabStop"
play={async ({ canvas, userEvent }) => {
const reading = await canvas.findByRole('button', { name: 'Reading' });
const generation = await canvas.findByRole('button', { name: 'Generation' });
tools/ui/tests/stories/a11y/ChatScreenForm.a11y.stories.svelte
+3 -3
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import ChatScreenForm from '$lib/components/app/chat/ChatScreen/ChatScreenForm.svelte';
import { ATTACHMENT_TOOLTIP_TEXT } from '$lib/constants';
@@ -15,8 +15,8 @@
</script>
<Story
name="AddButtonSingleTabStop"
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
name="AddButtonSingleTabStop"
play={async ({ canvas, userEvent }) => {
const textarea = await canvas.findByRole('textbox');
@@ -35,8 +35,8 @@
/>
<Story
name="AddDropdownFocusesFirstEnabled"
args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
name="AddDropdownFocusesFirstEnabled"
play={async ({ canvas, userEvent }) => {
const trigger = await canvas.findByRole('button', { name: ATTACHMENT_TOOLTIP_TEXT });
tools/ui/tests/stories/a11y/ScrollCarousel.a11y.stories.svelte
+5 -1
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import { ScrollCarousel } from '$lib/components/app';
import { ScrollCarouselVariant } from '$lib/enums';
@@ -34,10 +34,13 @@
>
<div>
<button type="button">before</button>
<ScrollCarousel class="w-96" variant={ScrollCarouselVariant.CENTER}>
<div class="h-12 w-12 shrink-0 bg-muted"></div>
<div class="h-12 w-12 shrink-0 bg-muted"></div>
</ScrollCarousel>
<button type="button">after</button>
</div>
</Story>
@@ -61,6 +64,7 @@
>
<div>
<button type="button">before</button>
<ScrollCarousel class="w-48" variant={ScrollCarouselVariant.CENTER}>
{#each [...Array(20).keys()] as i (i)}
<div class="h-12 w-24 shrink-0 bg-muted">{i}</div>
tools/ui/tests/stories/a11y/SidebarNavigationConversationItem.a11y.stories.svelte
+2 -2
View File
@@ -1,4 +1,4 @@
<script module lang="ts">
<script lang="ts" module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import SidebarNavigationConversationItem from '$lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationItem.svelte';
import { expect } from 'storybook/test';
@@ -22,8 +22,8 @@
</script>
<Story
name="ForkIconSingleTabStop"
args={{ conversation: mockForkedConversation, depth: 1 }}
name="ForkIconSingleTabStop"
play={async ({ canvas, userEvent }) => {
const row = await canvas.findByRole('button', { name: /Forked Conversation/ });
const forkIcon = await canvas.findByRole('link');