code-ollama/src/components/App/ReadinessCheck.tsx at 116e4ed5d98cee77330cf8d2cbbc3cd7b146f165 · ai-action/code-ollama · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { Box, Text } from 'ink';

import { ChatInput } from '@/components/Chat';
import { THEME, UI } from '@/constants';
import type { ThemeDefinition } from '@/types';

export enum ReadinessState {
  Checking = 'checking',
  Ready = 'ready',
  MissingModelConfig = 'missing-model-config',
  NoInstalledModels = 'no-installed-models',
  ServerUnavailable = 'server-unavailable',
  ModelLoadError = 'model-load-error',
}

interface Props {
  errorMessage?: string | null;
  onCommand: (command: string) => void;
  setupState: ReadinessState;
  theme?: ThemeDefinition;
}

function getTitle(setupState: ReadinessState): string | undefined {
  switch (setupState) {
    case ReadinessState.ServerUnavailable:
      return 'Ollama Server Unavailable';

    case ReadinessState.ModelLoadError:
      return 'Connection Error';

    case ReadinessState.MissingModelConfig:
      return 'No Model Configured';

    case ReadinessState.NoInstalledModels:
      return 'No Model Installed';
  }
}

function getMessage(
  setupState: ReadinessState,
  errorMessage?: string | null,
): React.ReactNode {
  const theme = THEME.getTheme();

  switch (setupState) {
    case ReadinessState.Checking:
      return <Text>Checking Ollama server and model setup...</Text>;

    case ReadinessState.MissingModelConfig:
      return (
        <Text>
          Select or download a model with{' '}
          <Text color={theme.colors.command}>/model</Text>
        </Text>
      );

    case ReadinessState.NoInstalledModels:
      return (
        <Text>
          Download a model with <Text color={theme.colors.command}>/model</Text>
        </Text>
      );

    case ReadinessState.ServerUnavailable:
      return (
        <>
          <Text>Ollama server is not running or unreachable.</Text>
          <Text>
            Start it with <Text color={theme.colors.command}>ollama serve</Text>{' '}
            and restart the app
          </Text>
        </>
      );

    case ReadinessState.ModelLoadError:
      return (
        <>
          <Text>
            Error loading models{errorMessage ? `: ${errorMessage}` : ''}.
          </Text>

          <Text>Fix the connection and restart the app</Text>
        </>
      );

    case ReadinessState.Ready:
    default:
      return null;
  }
}

export function ReadinessCheck({
  errorMessage,
  onCommand,
  setupState,
  theme = THEME.getTheme(),
}: Props) {
  const title = getTitle(setupState);

  return (
    <Box flexDirection="column">
      <Box
        borderStyle="round"
        flexDirection="column"
        marginBottom={1}
        paddingX={1}
        paddingY={1}
      >
        {title && (
          <Text bold color={theme.colors.error}>
            {UI.EXCLAMATION} {title}
          </Text>
        )}

        {getMessage(setupState, errorMessage)}
      </Box>

      <ChatInput
        history={[]}
        onSubmit={({ content }) => {
          onCommand(content);
        }}
        theme={theme}
      />
    </Box>
  );
}