Skip to content

Commit

Permalink
Merge branch 'main' into feat/timer-indicator
Browse files Browse the repository at this point in the history
  • Loading branch information
natemoo-re authored Feb 5, 2025
2 parents 2979f48 + 251518b commit 783397e
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 0 deletions.
13 changes: 13 additions & 0 deletions .changeset/gentle-jokes-fail.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
"@clack/prompts": minor
---

Adds `stream` API which provides the same methods as `log`, but for iterable (even async) message streams. This is particularly useful for AI responses which are dynamically generated by LLMs.

```ts
import * as p from '@clack/prompts';

await p.stream.step((async function* () {
yield* generateLLMResponse(question);
})())
```
1 change: 1 addition & 0 deletions examples/basic/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"scripts": {
"start": "jiti ./index.ts",
"stream": "jiti ./stream.ts",
"spinner": "jiti ./spinner.ts",
"spinner-ci": "npx cross-env CI=\"true\" jiti ./spinner-ci.ts",
"spinner-timer": "jiti ./spinner-timer.ts"
Expand Down
36 changes: 36 additions & 0 deletions examples/basic/stream.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { setTimeout } from 'node:timers/promises';
import * as p from '@clack/prompts';
import color from 'picocolors';

async function main() {
console.clear();

await setTimeout(1000);

p.intro(`${color.bgCyan(color.black(' create-app '))}`);

await p.stream.step(
(async function* () {
for (const line of lorem) {
for (const word of line.split(' ')) {
yield word;
yield ' ';
await setTimeout(200);
}
yield '\n';
if (line !== lorem.at(-1)) {
await setTimeout(1000);
}
}
})()
);

p.outro(`Problems? ${color.underline(color.cyan('https://example.com/issues'))}`);
}

const lorem = [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
];

main().catch(console.error);
16 changes: 16 additions & 0 deletions packages/prompts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -188,4 +188,20 @@ log.error('Error!');
log.message('Hello, World', { symbol: color.cyan('~') });
```


### Stream

When interacting with dynamic LLMs or other streaming message providers, use the `stream` APIs to log messages from an iterable, even an async one.

```js
import { stream } from '@clack/prompts';

stream.info((function *() { yield 'Info!'; })());
stream.success((function *() { yield 'Success!'; })());
stream.step((function *() { yield 'Step!'; })());
stream.warn((function *() { yield 'Warn!'; })());
stream.error((function *() { yield 'Error!'; })());
stream.message((function *() { yield 'Hello'; yield ", World" })(), { symbol: color.cyan('~') });
```

[clack-log-prompts](https://github.com/natemoo-re/clack/blob/main/.github/assets/clack-logs.png)
45 changes: 45 additions & 0 deletions packages/prompts/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -675,6 +675,51 @@ export const log = {
},
};

const prefix = `${color.gray(S_BAR)} `;
export const stream = {
message: async (
iterable: Iterable<string> | AsyncIterable<string>,
{ symbol = color.gray(S_BAR) }: LogMessageOptions = {}
) => {
process.stdout.write(`${color.gray(S_BAR)}\n${symbol} `);
let lineWidth = 3;
for await (let chunk of iterable) {
chunk = chunk.replace(/\n/g, `\n${prefix}`);
if (chunk.includes('\n')) {
lineWidth = 3 + strip(chunk.slice(chunk.lastIndexOf('\n'))).length;
}
const chunkLen = strip(chunk).length;
if (lineWidth + chunkLen < process.stdout.columns) {
lineWidth += chunkLen;
process.stdout.write(chunk);
} else {
process.stdout.write(`\n${prefix}${chunk.trimStart()}`);
lineWidth = 3 + strip(chunk.trimStart()).length;
}
}
process.stdout.write('\n');
},
info: (iterable: Iterable<string> | AsyncIterable<string>) => {
return stream.message(iterable, { symbol: color.blue(S_INFO) });
},
success: (iterable: Iterable<string> | AsyncIterable<string>) => {
return stream.message(iterable, { symbol: color.green(S_SUCCESS) });
},
step: (iterable: Iterable<string> | AsyncIterable<string>) => {
return stream.message(iterable, { symbol: color.green(S_STEP_SUBMIT) });
},
warn: (iterable: Iterable<string> | AsyncIterable<string>) => {
return stream.message(iterable, { symbol: color.yellow(S_WARN) });
},
/** alias for `log.warn()`. */
warning: (iterable: Iterable<string> | AsyncIterable<string>) => {
return stream.warn(iterable);
},
error: (iterable: Iterable<string> | AsyncIterable<string>) => {
return stream.message(iterable, { symbol: color.red(S_ERROR) });
},
};

export interface SpinnerOptions {
indicator?: 'dots' | 'timer';
}
Expand Down

0 comments on commit 783397e

Please sign in to comment.